mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
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:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user