chat : adjust tab bar width and use a shared offset variable

Widen the tab bar for the expanded sidebar and rename the tab bar height
variable to --chat-tabs-offset with a smaller value so the chat screen
min-height accounts for the overlay without overshooting.

Assisted-by: pi

tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -298,7 +298,7 @@
 	<ServerLoadingSplash />
 {:else}
 	<div
-		class="chat-screen flex grow flex-col min-h-[calc(100dvh-1rem)] md:min-h-[calc(100dvh-1rem-var(--chat-tabs-height,0px))] px-4 md:py-0 pt-12 pb-48 md:pb-4"
+		class="chat-screen flex grow flex-col min-h-[calc(100dvh-1rem)] md:min-h-[calc(100dvh-1rem-var(--chat-tabs-offset,0px))] px-4 md:py-0 pt-12 pb-48 md:pb-4"
 		style:--chat-form-bottom-position={chatFormBottomPosition}
 		ondragenter={dragAndDrop.dragHandlers.dragenter}
 		ondragleave={dragAndDrop.dragHandlers.dragleave}

tools/ui/src/lib/components/app/chat/ChatTabs/ChatTabs.svelte

@@ -74,8 +74,8 @@
 
 <nav
 	class="group sticky pl-1 top-0 z-10 hidden md:block chat-tabs-fade transition-[padding] duration-200 ease-in-out pt-3.25 {uiStore.isSidebarExpanded
-		? 'max-w-[calc(100vw-19.5rem)]'
-		: 'max-w-[calc(100vw-4.5rem)]'}"
+		? 'max-w-[calc(100vw-20rem)]'
+		: 'max-w-[calc(100vw-5rem)]'}"
 	aria-label="Open conversations"
 >
 	<div class="relative">

tools/ui/src/routes/(chat)/+layout.svelte

@@ -25,7 +25,7 @@
 	});
 </script>
 
-<div class={showTabs ? 'md:[--chat-tabs-height:2.5rem]' : ''}>
+<div class={showTabs ? 'md:[--chat-tabs-offset:1.25rem]' : ''}>
 	{#if showTabs}
 		<ChatTabs />
 	{/if}