RI-7785 Fix Analysis tabs padding consistency #5255
Merged
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
Contributor
Code Coverage - Frontend unit tests
Test suite run success5474 tests passing in 705 suites. Report generated by 🧪jest coverage report action from a7f4efb |
valkirilov
requested review from
ArtemHoruzhenko,
DimoHG,
KrumTy,
dantovska,
pawelangelow,
pd-redis and
tptodorov
as code owners
valkirilov
changed the title
pd-redis
reviewed
Nov 28, 2025
| export const Wrapper = styled.div` | ||
| ${scrollbarStyles()} | ||
| max-height: calc(100% - 134px); | ||
| max-width: 1920px; |
Contributor
There was a problem hiding this comment.
So specific ...
All these values should be put together and with descriptive names.
I guess one more tech debt item
Member
Author
There was a problem hiding this comment.
It was ported from the styles.sass.ts, but actually, we don't need it at all. Removed 👍
pd-redis
previously approved these changes
Nov 28, 2025
Create reusable container component for analysis pages with consistent horizontal padding. References: #RI-7785
Replace local MainContainer with shared AnalysisPageContainer component. References: #RI-7785
Wrap Overview page content in shared AnalysisPageContainer to add consistent horizontal padding. References: #RI-7785
…etailsPage Remove styles.module.scss and implement styled-components for consistent styling in the ClusterDetailsPage References: #RI-7785
Replace main container with shared AnalysisPageContainer to add consistent horizontal padding. Remove unused SCSS styles. References: #RI-7785
…pages - Replace AnalyticsTabs with the new AnalyticsPageHeader component for improved consistency across pages. - Update styles and layout to enhance visual coherence. References: #RI-7785
- Remove max-height and max-width properties from the Wrapper styled component for improved layout flexibility. References: #RI-7785
valkirilov
force-pushed
the
fe/bugfix/RI-7785/fix-analysis-pages-padding
branch
from
d892a98 to
5760f3c
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| export const StyledAnalysisPageContainer = styled(Col)` | ||
| overflow: auto; | ||
| padding-inline: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; | ||
| ` |
There was a problem hiding this comment.
Bug: Missing height constraint on AnalysisPageContainer
The StyledAnalysisPageContainer is missing height: 100% which was present in the old styles for all three pages. Without a defined height, the container won't properly constrain its children, causing the overflow: auto to not work correctly and preventing the pages from filling the available vertical space. The Col component's flex-grow: 1 alone isn't sufficient without a parent height constraint.
pawelangelow
approved these changes
Nov 28, 2025
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
Standardized horizontal padding (16px) across all three analysis pages (Overview, Database Analysis, and Slow Log) by creating a shared
AnalysisPageContainercomponent and refactoring all pages to use it.Changes
AnalysisPageContainercomponent with consistentpadding-inline: 1.6remTesting
Before
Screen.Recording.2025-11-27.at.15.28.19.mov
After
Screen.Recording.2025-11-27.at.15.26.38.mov
Closes #RI-7785
Note
Introduces shared layout components and refactors Cluster Details, Database Analysis, and Slow Log pages for consistent padding and header structure, with minor styling and button updates.
AnalysisPageContainer(shared overflow +padding-inline),AnalyticsPageHeader(wrapsAnalyticsTabs+ optional actions).database-analysis: ReplaceMainContainerwithAnalysisPageContainer; header rebuilt to useAnalyticsPageHeader; tabs wrapped inStyledTabswith top padding.slow-log: Page migrated toAnalysisPageContainer; header/actions moved intoAnalyticsPageHeader; addContentWrapperfor content spacing; removestyles.module.scss.cluster-details: UseAnalyticsPageHeaderin header;ClusterDetailsPageWrapperaddsscrollbarStylesand themepadding.TabsWrapperoverlaps border; consistent theme spacing (space200).PrimaryButton.AnalyticsTabsusages withAnalyticsPageHeader.Written by Cursor Bugbot for commit a7f4efb. This will update automatically on new commits. Configure here.