fix: restore kebab menu flex (#24359)

Agent log tabs could spill over the Copy/Download area, and the overflow
kebab sometimes never wired up because ResizeObserver ran with no node
or while inactive. This ties the hook to when the strip is real and
clips the tab column.

- `AgentRow`: `enabled` for `useKebabMenu` is `hasStartupFeatures &&
hasAnyLogs && showLogs`; `hasAnyLogs` is computed before the hook; tab
list wrapper gets `overflow-hidden`.
- `useKebabMenu`: attach `ResizeObserver` in `useLayoutEffect`; bail if
missing container or `!enabled || !isActive`; deps include `enabled` and
`isActive`.
- `TabsList` (`overflowKebabMenu`): add `min-w-0 w-full max-w-full` with
`flex-nowrap` so the list stays inside the flex column.

site/src/components/Tabs/Tabs.tsx

@@ -64,7 +64,7 @@ export const TabsList: FC<TabsListProps> = ({
 			data-slot="tabs-list"
 			className={cn(
 				tabsListVariants({ variant }),
-				overflowKebabMenu && "flex-nowrap",
+				overflowKebabMenu && "min-w-0 w-full max-w-full flex-nowrap",
 				className,
 			)}
 			{...props}

site/src/components/Tabs/utils/useKebabMenu.ts

@@ -2,6 +2,7 @@ import {
 	type RefObject,
 	useCallback,
 	useEffect,
+	useLayoutEffect,
 	useRef,
 	useState,
 } from "react";
@@ -105,9 +106,9 @@ export const useKebabMenu = <T extends TabValue>({
 		recalculateOverflow(availableWidthRef.current);
 	}, [recalculateOverflow, tabs]);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const container = containerRef.current;
-		if (!container) {
+		if (!container || !enabled || !isActive) {
 			return;
 		}
 
@@ -121,7 +122,7 @@ export const useKebabMenu = <T extends TabValue>({
 		});
 		observer.observe(container);
 		return () => observer.disconnect();
-	}, [recalculateOverflow]);
+	}, [recalculateOverflow, enabled, isActive]);
 
 	const overflowTabValuesSet = new Set(overflowTabValues);
 	const { visibleTabs, overflowTabs } = tabs.reduce<{

site/src/modules/resources/AgentRow.tsx

@@ -260,6 +260,8 @@ export const AgentRow: FC<AgentRowProps> = ({
 		...(startupScriptLogTab ? [startupScriptLogTab] : []),
 		...sortedSourceLogTabs,
 	];
+	const hasAnyLogs = agentLogs.length > 0;
+	const logTabsMeasureEnabled = hasStartupFeatures && hasAnyLogs && showLogs;
 	const {
 		containerRef: logTabsListContainerRef,
 		visibleTabs: visibleLogTabs,
@@ -267,7 +269,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 		getTabMeasureProps,
 	} = useKebabMenu({
 		tabs: logTabs,
-		enabled: true,
+		enabled: logTabsMeasureEnabled,
 		isActive: showLogs,
 	});
 	const overflowLogTabValuesSet = new Set(
@@ -287,7 +289,6 @@ export const AgentRow: FC<AgentRowProps> = ({
 	const allLogsText = agentLogs.map((log) => log.output).join("\n");
 	const selectedLogsText = selectedLogs.map((log) => log.output).join("\n");
 	const hasSelectedLogs = selectedLogs.length > 0;
-	const hasAnyLogs = agentLogs.length > 0;
 	const { showCopiedSuccess, copyToClipboard } = useClipboard();
 	const downloadableLogSets = logTabs
 		.filter((tab) => tab.value !== "all")
@@ -498,7 +499,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 									<div className="flex items-stretch">
 										<div
 											ref={logTabsListContainerRef}
-											className="min-w-0 flex-1"
+											className="min-w-0 flex-1 overflow-hidden"
 										>
 											<TabsList variant="insideBox" overflowKebabMenu>
 												{visibleLogTabs.map((tab) => (