From af4f2b9b039f3946facd25f0a05669fa273ac9a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Wed, 23 Sep 2026 02:43:58 -0400
Subject: [PATCH] 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.
---
 packages/studio/src/components/dock/dock.css |  8 +++-----
 scripts/contrast-pairs.json                  |  4 ++--
 scripts/studio-runtime-smoke.mjs             | 13 +++++++++++++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/studio/src/components/dock/dock.css b/packages/studio/src/components/dock/dock.css
index d4e809e19d..4aa149bf9a 100644
--- a/packages/studio/src/components/dock/dock.css
+++ b/packages/studio/src/components/dock/dock.css
@@ -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;
 }
 
diff --git a/scripts/contrast-pairs.json b/scripts/contrast-pairs.json
index 37c54567cb..49d13dccc5 100644
--- a/scripts/contrast-pairs.json
+++ b/scripts/contrast-pairs.json
@@ -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"
           ]
         }
       ]
diff --git a/scripts/studio-runtime-smoke.mjs b/scripts/studio-runtime-smoke.mjs
index a30edda022..9239876b53 100644
--- a/scripts/studio-runtime-smoke.mjs
+++ b/scripts/studio-runtime-smoke.mjs
@@ -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();
   }