Center lock icon when widget isn't accessible#17055
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This PR improves the visual presentation of widgets without access by centering the lock icon. The change wraps the lock icon in a flex container to center it both horizontally and vertically.
Key changes:
- Added a styled component to center the lock icon when a widget isn't accessible
- Wrapped the IconLock component in a centered flex container
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const StyledNoAccessContainer = styled.div` | ||
| align-items: center; | ||
| display: flex; |
There was a problem hiding this comment.
The StyledNoAccessContainer is missing a height property to properly center the icon vertically within the WidgetCardContent. Since WidgetCardContent has height: 100%, this container should also have height: 100% to ensure the icon is centered both horizontally and vertically across the full available space. Similar patterns in the codebase (e.g., GraphWidgetAggregateChart) include height: 100% when centering content with flexbox.
| display: flex; | |
| display: flex; | |
| height: 100%; |
|
🚀 Preview Environment Ready! Your preview environment is available at: http://bore.pub:8366 This environment will automatically shut down when the PR is closed or after 5 hours. |
|
Hey @Devessier! After you've done the QA of your Pull Request, you can mark it as done here. Thank you! |
1 similar comment
|
Hey @Devessier! After you've done the QA of your Pull Request, you can mark it as done here. Thank you! |
Before
After