remove width prop, fix ellipsis padding

wavetermdev · sawka · Mar 14, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026
commit df17a38d3fffd79ba01cb445a4ff94472e42c8d2
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@ out/
 make/
 artifacts/
 mikework/
+aiplans/
 manifests/
 .env
 out

diff --git a/frontend/app/tab/vtab.tsx b/frontend/app/tab/vtab.tsx
@@ -156,7 +156,9 @@ export function VTab({
                 isDragging && "opacity-50"
             )}
         >
-            {active && <div className="pointer-events-none absolute inset-x-1 inset-y-[4px] rounded-sm bg-foreground/10" />}
+            {active && (
+                <div className="pointer-events-none absolute inset-x-1 inset-y-[4px] rounded-sm bg-foreground/10" />
+            )}
             {!active && !isReordering && (
                 <div className="pointer-events-none absolute inset-x-1 inset-y-[4px] rounded-sm bg-transparent transition-colors group-hover:bg-foreground/10" />
             )}
@@ -174,7 +176,7 @@ export function VTab({
             <div
                 ref={editableRef}
                 className={cn(
-                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap transition-[padding-right]",
+                    "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap transition-[padding-right] pr-3",
                     onClose && !isReordering && "group-hover:pr-6",
                     isEditable && "rounded-[2px] bg-white/15 outline-none"
                 )}

diff --git a/frontend/app/tab/vtabbar.tsx b/frontend/app/tab/vtabbar.tsx
@@ -8,30 +8,16 @@ import { useWaveEnv } from "@/app/waveenv/waveenv";
 import { validateCssColor } from "@/util/color-validator";
 import { cn, fireAndForget } from "@/util/util";
 import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { VTab, VTabItem } from "./vtab";
 import { VTabBarEnv } from "./vtabbarenv";
 export type { VTabItem } from "./vtab";
 
 interface VTabBarProps {
     workspace: Workspace;
-    width?: number;
     className?: string;
 }
 
-function clampWidth(width?: number): number {
-    if (width == null) {
-        return 220;
-    }
-    if (width < 100) {
-        return 100;
-    }
-    if (width > 400) {
-        return 400;
-    }
-    return width;
-}
-
 interface VTabWrapperProps {
     tabId: string;
     active: boolean;
@@ -108,7 +94,7 @@ function VTabWrapper({
     );
 }
 
-export function VTabBar({ workspace, width, className }: VTabBarProps) {
+export function VTabBar({ workspace, className }: VTabBarProps) {
     const env = useWaveEnv<VTabBarEnv>();
     const activeTabId = useAtomValue(env.atoms.staticTabId);
     const reinitVersion = useAtomValue(env.atoms.reinitVersion);
@@ -134,8 +120,6 @@ export function VTabBar({ workspace, width, className }: VTabBarProps) {
         }
     }, [reinitVersion]);
 
-    const barWidth = useMemo(() => clampWidth(width), [width]);
-
     const clearDragState = () => {
         if (dragSourceRef.current != null && !didResetHoverForDragRef.current) {
             didResetHoverForDragRef.current = true;
@@ -170,11 +154,8 @@ export function VTabBar({ workspace, width, className }: VTabBarProps) {
 
     return (
         <div
-            className={cn(
-                "flex h-full min-w-[100px] max-w-[400px] flex-col overflow-hidden",
-                className
-            )}
-            style={{ width: barWidth, backdropFilter: "blur(20px)", background: "rgba(0, 0, 0, 0.35)" }}
+            className={cn("flex h-full flex-col overflow-hidden", className)}
+            style={{ backdropFilter: "blur(20px)", background: "rgba(0, 0, 0, 0.35)" }}
         >
             <div
                 className="relative flex min-h-0 flex-1 flex-col overflow-y-auto"

diff --git a/frontend/preview/previews/vtabbar.preview.tsx b/frontend/preview/previews/vtabbar.preview.tsx
@@ -41,15 +41,15 @@ function VTabBarPreviewInner({ width, setWidth }: VTabBarPreviewInnerProps) {
                     min={100}
                     max={400}
                     value={width}
-                    onChange={(event) => setWidth(Number(event.target.value))}
+                    onChange={(event) => setWidth(Math.max(100, Math.min(400, Number(event.target.value))))}
                     className="w-full cursor-pointer"
                 />
                 <p className="mt-3 text-xs text-muted">
                     Drag tabs to reorder. Names, badges, and close buttons remain single-line.
                 </p>
             </div>
-            <div className="h-[360px] rounded-md border border-border bg-background">
-                {workspace != null && <VTabBar workspace={workspace} width={width} />}
+            <div className="h-[360px] overflow-hidden rounded-md border border-border bg-background" style={{ width }}>
+                {workspace != null && <VTabBar workspace={workspace} />}
             </div>
         </div>
     );