Skip to content

Commit fe9a6ad

Browse files
committed
fix(panel): consistent tab widths in collapsed mode, Tools button sizing
- 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
1 parent 9f69c03 commit fe9a6ad

1 file changed

Lines changed: 13 additions & 4 deletions

File tree

src/styles/Extn-BottomPanelTabs.less

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -227,9 +227,18 @@
227227
.bottom-panel-tab-close-btn {
228228
margin-left: 0.8rem;
229229
}
230-
/* Only show close button on the active tab to prevent accidental clicks */
230+
/* Fix all collapsed tabs to the same width so the UI doesn't shake
231+
when switching active tab. The width matches the active tab's
232+
natural content (icon + close button) using fixed px since the
233+
icon has a fixed size. The Tools button (.bottom-panel-add-btn)
234+
is a separate element and keeps its natural "Tools" text width. */
235+
.bottom-panel-tab {
236+
min-width: 63px;
237+
box-sizing: border-box;
238+
justify-content: center;
239+
}
231240
.bottom-panel-tab:not(.active) .bottom-panel-tab-close-btn {
232-
visibility: hidden;
241+
display: none;
233242
}
234243
}
235244

@@ -283,10 +292,10 @@
283292
display: flex;
284293
align-items: center;
285294
justify-content: center;
286-
padding: 0 8px;
295+
padding: 0 10px;
287296
height: 2rem;
297+
min-width: 70px;
288298
line-height: 2rem;
289-
overflow: hidden;
290299
cursor: pointer;
291300
color: #888;
292301
font-size: 0.82rem;

0 commit comments

Comments
 (0)