fix(side-panel): use correct spacing in collapse mode#1704
fix(side-panel): use correct spacing in collapse mode#1704spike-rabbit wants to merge 1 commit intomainfrom
Conversation
Currently, the spacing in the collapse mode is completely off. With this change, all collapse buttons have a correct size of 48x40.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively addresses the spacing issues in the collapse mode of the side panel and collapsible panels. The changes introduce dynamic class application in the HTML templates and specific CSS rules to ensure correct sizing and spacing of elements when the panels are collapsed. The updated Playwright snapshots confirm the visual correctness of these adjustments.
| [class]="`collapsible-header focus-inside ${headerCssClasses()}`" | ||
| [class.px-5]="hcollapsed()" | ||
| [class.px-6]="!hcollapsed()" |
There was a problem hiding this comment.
The refactoring of the px-6 class into conditional px-5 and px-6 based on hcollapsed() is a good approach to manage spacing dynamically. This aligns with the goal of adjusting spacing in collapse mode.
| <si-icon | ||
| class="icon" | ||
| [class.p-1]="hcollapsed()" | ||
| [class.pe-2]="!hcollapsed()" | ||
| [icon]="headerIcon" | ||
| [class.collapsed-icon]="isHCollapsible" | ||
| /> |
There was a problem hiding this comment.
Applying conditional padding classes (p-1 and pe-2) to the si-icon based on the hcollapsed() state is a clean way to handle the icon's spacing in different modes. This improves the visual consistency of the component.
| </span> | ||
| } | ||
| <span class="ms-auto overflow-hidden"> | ||
| <span class="ms-auto autohide"> |
There was a problem hiding this comment.
Changing overflow-hidden to autohide for the dropdown caret span is a functional improvement. This leverages the existing .autohide class defined in the SCSS to correctly manage visibility when the panel is collapsed, ensuring the caret behaves as expected.
1 participant
Currently, the spacing in the collapse mode is completely off. With this change, all collapse buttons have a correct size of 48x40.
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: