Resolve Sidebar Icon Layout Shift #1319
Conversation
…/collapse - Set consistent icon size (14px/1.28571429em) across all sidebar states - Fixed row height to 41px for both collapsed and expanded states - Used flexbox alignment to maintain icon position - Prevent icon size changes between minimized, hover, and mobile states - Removed font-size inherit which caused icon scaling issues fossasia#1215
- Added sidebar-text span wrappers to navigation labels in both templates - Updated CSS to hide .sidebar-text when sidebar is minimized - CSS compiles correctly but template changes not reflecting in browser - Issue: Django template caching preventing changes from appearing Status: Work in progress - debugging template rendering issue
- Standardize icon sizes to 14px in both collapsed and expanded states - Wrap menu labels in .sidebar-text spans for proper visibility control - Use display:none for text hiding instead of font-size manipulation - Maintain consistent padding and alignment in all sidebar states - Match stable behavior from Talk component sidebar
Wrap TEST MODE label in sidebar-text span to ensure it hides properly when sidebar is collapsed, maintaining consistent behavior with other menu items.
- Remove complex flex layouts, transitions, and positioning - Use simple display:none/inline pattern like Talk component - Remove fixed heights and line-heights causing layout shifts - Keep consistent 10px 15px padding in all states - Icon sizes remain stable at 14px - Clean hover expansion without visual glitches
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @ArnavBallinCode, you have reached your weekly rate limit of 500000 diff characters.
Please try again later or upgrade to continue using Sourcery
|
yeah.... its changing only when using the 3 lines for opening right.... while hovering it doesn't change..... Ill fix that
|
Screen.Recording.2025-11-17.at.3.30.30.PM.mov |
hongquan
left a comment
hongquan
left a comment
There was a problem hiding this comment.
Don't make the PR title "Fix/xxx".
Don't include the GH issue ID in the title.
This has been remined before.
ArnavBallinCode
changed the title
Sorry about that, updated the PR title and will follow the convention going forward.... |
hongquan
left a comment
hongquan
left a comment
There was a problem hiding this comment.
Just small issue. Please add a blank line at the end of file (configure your code editor to automatically do so, so that it won't happen again).
After that, the PR is OK to be merged.
4 participants
Screen.Recording.2025-11-17.at.11.10.49.AM.mov
fixes #1215