feat: enhance header tab responsiveness

packages/desktop/src-tauri/Cargo.lock

@@ -2847,7 +2847,7 @@ dependencies = [
 
 [[package]]
 name = "openchamber-desktop"
-version = "1.2.8"
+version = "1.2.9"
 dependencies = [
  "anyhow",
  "axum",

packages/ui/src/components/layout/Header.tsx

@@ -310,7 +310,7 @@ export const Header: React.FC = () => {
 
             isGitTab && 'border-r',
 
-            isChatTab && !isMobile && 'min-w-[165px]'
+            isChatTab && !isMobile && 'min-w-[165px] max-[1024px]:min-w-0'
           )}
           style={{
             ...(isActive && isChatTab && isSidebarOpen ? {
@@ -319,6 +319,7 @@ export const Header: React.FC = () => {
             } : {}),
             ...((isChatTab && !(isDesktopApp && isMacPlatform && isSidebarOpen)) || isGitTab ? { borderColor: 'var(--interactive-border)' } : {}),
           }}
+          aria-label={tab.label}
           aria-selected={isActive}
           role="tab"
         >
@@ -327,7 +328,7 @@ export const Header: React.FC = () => {
           ) : (
             <>
               <Icon size={16} />
-              <span>{tab.label}</span>
+              <span className="header-tab-label">{tab.label}</span>
             </>
           )}
           {}

packages/ui/src/index.css

@@ -884,6 +884,17 @@ html:not(.dark) .chat-scroll {
   }
 }
 
+/* Header tab responsiveness */
+:root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-label {
+  display: inline;
+}
+
+@media (max-width: 820px) {
+  :root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-label {
+    display: none;
+  }
+}
+
 /* Mobile Adaptations - All Devices */
 
 /* Set global device type variables */