webui: fix chat header width when sidebar is closed (#17981)

* webui: fix chat header width when sidebar is closed

* chore: add index.html.gz

diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 2ff90e800a9cdf1d5715382876a4fe760411cfc1..d6cc23ebfc4822d2d4da6760d97ba8c7a62731e0 100644 (file)
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenHeader.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenHeader.svelte
index 24803d0a00b9ff3b9a2150730932a01e3b071038..874140feecc0e4682e8a2cce8e2f51d179a56735 100644 (file)
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenHeader.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenHeader.svelte
@@ -2,6 +2,9 @@
        import { Settings } from '@lucide/svelte';
        import { DialogChatSettings } from '$lib/components/app';
        import { Button } from '$lib/components/ui/button';
+       import { useSidebar } from '$lib/components/ui/sidebar';
+
+       const sidebar = useSidebar();
 
        let settingsOpen = $state(false);
 
@@ -11,7 +14,9 @@
 </script>
 
 <header
-       class="md:background-transparent pointer-events-none fixed top-0 right-0 left-0 z-50 flex items-center justify-end bg-background/40 p-4 backdrop-blur-xl md:left-[var(--sidebar-width)]"
+       class="md:background-transparent pointer-events-none fixed top-0 right-0 left-0 z-50 flex items-center justify-end bg-background/40 p-4 backdrop-blur-xl duration-200 ease-linear {sidebar.open
+               ? 'md:left-[var(--sidebar-width)]'
+               : ''}"
 >
        <div class="pointer-events-auto flex items-center space-x-2">
                <Button variant="ghost" size="sm" onclick={toggleSettings}>