ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-10-30 09:16:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/dock/dock.css
+3 -5
View File
@@ -48,7 +48,7 @@
.hf-dock .dv-tabs-and-actions-container { .hf-dock .dv-tabs-and-actions-container {
align-items: flex-end; align-items: flex-end;
padding: 6px 0 0 6px; padding: 6px 0 0 4px;
} }
.hf-dock .dv-scrollable { .hf-dock .dv-scrollable {
@@ -62,7 +62,6 @@
} }
.hf-dock .dv-tabs-container { .hf-dock .dv-tabs-container {
gap: 2px;
--hf-fade-start: 0px; --hf-fade-start: 0px;
--hf-fade-end: 0px; --hf-fade-end: 0px;
} }
@@ -91,7 +90,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: 30px; height: 30px;
padding: 0 10px; padding: 0 6px;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
white-space: nowrap; white-space: nowrap;
} }
@@ -134,7 +133,7 @@
.hf-dock-tab { .hf-dock-tab {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 4px;
height: 100%; height: 100%;
} }
@@ -158,7 +157,6 @@
/* Takes its space whenever the tab is shown, so hover never moves the label. */ /* Takes its space whenever the tab is shown, so hover never moves the label. */
.hf-dock-tab-close { .hf-dock-tab-close {
display: flex; display: flex;
margin-left: 2px;
opacity: 0; opacity: 0;
} }
scripts/contrast-pairs.json
+2 -2
View File
@@ -300,8 +300,8 @@
"role": "text", "role": "text",
"minimum": 4.5, "minimum": 4.5,
"sources": [ "sources": [
"packages/studio/src/components/dock/dock.css:101", "packages/studio/src/components/dock/dock.css:100",
"packages/studio/src/components/dock/dock.css:103" "packages/studio/src/components/dock/dock.css:102"
] ]
} }
] ]
scripts/studio-runtime-smoke.mjs
+13
View File
@@ -113,6 +113,8 @@ export async function runStudioRuntimeSmoke(targetUrl) {
args: ["--no-sandbox", "--disable-setuid-sandbox"], args: ["--no-sandbox", "--disable-setuid-sandbox"],
}); });
const page = await browser.newPage(); 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 errors = [];
const unmockedApiRequests = []; const unmockedApiRequests = [];
@@ -143,6 +145,17 @@ export async function runStudioRuntimeSmoke(targetUrl) {
return textContent.includes("Something went wrong") ? textContent : null; return textContent.includes("Something went wrong") ? textContent : null;
}); });
if (errorBoundary) errors.push(`React error boundary triggered: ${errorBoundary}`); 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 { } finally {
await browser.close(); await browser.close();
} }