Skip to content

bottom panel UX improve#2808

Open
abose wants to merge 3 commits intomainfrom
ai
Open

bottom panel UX improve#2808
abose wants to merge 3 commits intomainfrom
ai

Conversation

@abose
Copy link
Copy Markdown
Member

@abose abose commented Apr 10, 2026

No description provided.

abose added 3 commits April 10, 2026 23:56
…tom panel tabs

Replace iconClass (FontAwesome class strings) with iconSvg (SVG file paths)
for all createBottomPanel callers. FA class approach caused inconsistent
sizing between fa-solid and fa-brands due to font-weight/font-size quirks
that required CSS overrides.

SVG icons are rendered via mask-image with background-color: currentColor
so they inherit the theme text color automatically — works correctly in
both light and dark themes, and for active/inactive tab states.

- New SVG files in src/styles/images/: panel-icon-{terminal,problems,
  search,git,snippets,shortcuts,default}.svg
- Updated callers: Terminal, CodeInspection, SearchResultsView, Git,
  CustomSnippets, DisplayShortcuts, DefaultPanelView
- PanelView.js and DefaultPanelView.js set mask-image inline via JS
- Removed iconClass support and related CSS overrides
- Collapsed mode: set min-width: 63px on all bottom-panel-tab elements
  so active/inactive tabs have the same width (no jitter when switching)
- Hide inactive tab close buttons with display:none and center-align
  their icons via justify-content: center
- Tools button (.bottom-panel-add-btn): add min-width: 70px, remove
  overflow: hidden so the "Tools" text isn't clipped alongside the icon
- Make the default panel (Tools) tab non-draggable: set draggable="false"
  on the tab, reject dragstart on it, and reject it as a drop target
- Add bottom-panel-tab-default class to identify the Tools tab in CSS
- Always show the icon alongside the title for the Tools tab in both
  expanded and collapsed modes (other tabs show icons only when collapsed)
- In collapsed mode, the Tools tab keeps its natural width with title
  visible instead of collapsing to a fixed icon-only width
@sonarqubecloud
Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant