RI-7774 Fix navigation icons alignment on the Databases page #5267
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixed misalignment of Coplit and Insights icons on the Databases page by: - Adding align and justify props for proper alignment - Matching the layout pattern used in InstanceHeader References: #RI-7774
References: #RI-7774
Added new sections documenting best practices learned from migration: - Use gap prop instead of custom margins - Use theme spacing instead of magic numbers - Use semantic colors from theme instead of CSS variables - Use layout components (Row/Col/FlexGroup) instead of div References: #RI-7774
valkirilov
requested review from
ArtemHoruzhenko,
DimoHG,
KrumTy,
dantovska,
pawelangelow,
pd-redis and
tptodorov
as code owners
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| <PageWrapper> | ||
| <ExplorePanelWrapper> | ||
| <ExplorePanelTemplate>{children}</ExplorePanelTemplate> | ||
| </ExplorePanelWrapper> |
There was a problem hiding this comment.
Bug: Side panel padding applied to wrong element
The panelClassName prop that previously passed padding-bottom: 16px styling to ExplorePanelTemplate (and through it to SidePanels → StyledSidePanel) has been removed. Instead, ExplorePanelWrapper now applies padding-bottom to a wrapper around the entire template. This changes where the padding is applied - from the side panel component itself to an outer container, which has different visual behavior. The SidePanels component uses panelClassName to style the StyledSidePanel element directly, so the side panels will no longer receive the intended padding-bottom styling.
Additional Locations (1)
Contributor
Code Coverage - Frontend unit tests
Test suite run success5446 tests passing in 703 suites. Report generated by 🧪jest coverage report action from 4324d77 |
KrumTy
approved these changes
Nov 28, 2025
valkirilov
deleted the
fe/bugfix/RI-7774/fix-icon-alignment-databases-page
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Fix the alignment of the Copilot and Insights icons in the navigation when on the Databases tab.
Note: Also, remove the deprecated SASS, transform it to "styled components" and update AI rules.
Testing
Observe the placement of the icon in the top right corner.
Before
After
Note
Aligns Copilot/Insights/profile actions in the Home page header and replaces SCSS with styled-components using layout components, theme spacing, and semantic colors; updates frontend rules accordingly.
styles.module.scsswithHomePageTemplate.styles.tsusingstyled-componentsand layout components (Row,FlexGroup).space800,space200) and semantic colors for header background/border; remove magic numbers and CSS vars.PageDefaultHeaderwithalign="center",justify="between",gap="l"; wrap content withPageWrapperandExplorePanelWrapper.CopilotTrigger,InsightsTrigger,OAuthUserProfile) using layout props.gapprop, theme spacing, semantic colors, and layout components instead ofdiv.Written by Cursor Bugbot for commit 4324d77. This will update automatically on new commits. Configure here.