fix(studio): fit every panel tab label in the default layout

Tighter tab padding and gaps, same font.
The load smoke now fails when a tab strip clips a label at 1440x900.
This commit is contained in:
Miguel Ángel
2026-09-23 02:43:58 -04:00
parent 8079c63541
commit af4f2b9b03
3 changed files with 18 additions and 7 deletions
+3 -5
View File
@@ -48,7 +48,7 @@
.hf-dock .dv-tabs-and-actions-container {
align-items: flex-end;
padding: 6px 0 0 6px;
padding: 6px 0 0 4px;
}
.hf-dock .dv-scrollable {
@@ -62,7 +62,6 @@
}
.hf-dock .dv-tabs-container {
gap: 2px;
--hf-fade-start: 0px;
--hf-fade-end: 0px;
}
@@ -91,7 +90,7 @@
display: flex;
align-items: center;
height: 30px;
padding: 0 10px;
padding: 0 6px;
border-radius: 6px 6px 0 0;
white-space: nowrap;
}
@@ -134,7 +133,7 @@
.hf-dock-tab {
display: flex;
align-items: center;
gap: 6px;
gap: 4px;
height: 100%;
}
@@ -158,7 +157,6 @@
/* Takes its space whenever the tab is shown, so hover never moves the label. */
.hf-dock-tab-close {
display: flex;
margin-left: 2px;
opacity: 0;
}
+2 -2
View File
@@ -300,8 +300,8 @@
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/components/dock/dock.css:101",
"packages/studio/src/components/dock/dock.css:103"
"packages/studio/src/components/dock/dock.css:100",
"packages/studio/src/components/dock/dock.css:102"
]
}
]
+13
View File
@@ -113,6 +113,8 @@ export async function runStudioRuntimeSmoke(targetUrl) {
args: ["--no-sandbox", "--disable-setuid-sandbox"],
});
const page = await browser.newPage();
// Studio's default layout is sized for a laptop window; the tab-strip check below depends on it.
await page.setViewport({ width: 1440, height: 900 });
const errors = [];
const unmockedApiRequests = [];
@@ -143,6 +145,17 @@ export async function runStudioRuntimeSmoke(targetUrl) {
return textContent.includes("Something went wrong") ? textContent : null;
});
if (errorBoundary) errors.push(`React error boundary triggered: ${errorBoundary}`);
const clippedStrips = await page.evaluate(() =>
[...document.querySelectorAll(".dv-tabs-container")]
.filter((strip) => strip.scrollWidth > strip.clientWidth + 1)
.map((strip) => {
const labels = [...strip.querySelectorAll(".dv-tab")].map((tab) => tab.textContent);
return `${labels.join(", ")}: ${strip.scrollWidth}px of tabs in ${strip.clientWidth}px`;
}),
);
for (const strip of clippedStrips) {
errors.push(`Dock tab strip clips a label at the default layout: ${strip}`);
}
} finally {
await browser.close();
}