fix(settings): fit long versions in the sidebar and keep side panels off the window edge (#1875)

* fix(settings): fit long versions in the sidebar and keep side panels off the window edge

The About item's version was flex-shrink: 0 beside a zero-basis label, so a
nightly build string squeezed "About" to nothing and overflowed the panel.
The label now has an auto basis and the version yields first, truncating
with an ellipsis and keeping the full string in its tooltip.

The context panel used height: 100% plus padding without a border-box reset,
so it ran 24px past its host and the footer item sat on the window edge.
The host is now a flex column and the panel fills it as a flex item, which
restores the bottom padding for every side panel variant.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* test(settings): answer the GitHub releases check in the version layout E2E

The sidebar renders the version only after the releases request answers.
CI runners are rate-limited on api.github.com, so the tag never appeared
and the test failed on its first locator. Fulfil the request locally with
an older release so the version shows without an update badge.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Opus 5.5 authored and GitHub committed 2026-10-10 21:49:57 +02:00
1 parent e1d4f00d93
commit 91e277e9ba
6 files changed
+83 -4

No files matched your search

@@ -112,8 +112,10 @@
}
}
// Auto basis, not `flex: 1`: a zero basis gives the label no claim on the
// row, so any wide trailing element squeezed it to nothing.
.nav-item-label {
flex: 1;
flex: 1 1 auto;
min-width: 0;
line-height: 1.2;
white-space: nowrap;
@@ -138,8 +140,16 @@
background: var(--app-selection-color);
}
// The version yields first when the panel narrows: a nightly build string
// (0.25.0-nightly.YYYYMMDD.N) is wider than the default panel. The large
// shrink factor makes it give way before the label starts to; the full string
// stays in the tooltip.
.nav-item-version {
flex-shrink: 0;
flex: 0 1000 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
@@ -163,6 +163,12 @@ describe('WorkspaceSettingsContextPanelComponent', () => {
link('about').querySelector('[data-test-id="settings-nav-version"]')
?.textContent
).toBe('0.25.0');
// A long nightly string is truncated; the tooltip keeps all of it.
expect(
link('about')
.querySelector('[data-test-id="settings-nav-version"]')
?.getAttribute('title')
).toBe('0.25.0');
expect(link('general').querySelector('.nav-item-version')).toBeNull();
ctx.setUpdateAvailable(true);
@@ -133,6 +133,7 @@ interface SettingsNavGroupView {
<span
class="nav-item-version"
data-test-id="settings-nav-version"
[attr.title]="version"
>{{ version }}</span
>
}
@@ -1,5 +1,6 @@
:host {
display: block;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
@@ -16,7 +17,10 @@
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
// Fills the host as a flex item rather than with `height: 100%`: without
// a border-box reset that height excludes the padding, so the panel ran
// its bottom padding past the window edge and items sat on it.
flex: 1 1 auto;
padding: 12px;
width: 300px;
min-width: 0;