diff --git a/web/src/components/AssistantChat/StatusBar.tsx b/web/src/components/AssistantChat/StatusBar.tsx
index c1e14945..557a967c 100644
--- a/web/src/components/AssistantChat/StatusBar.tsx
+++ b/web/src/components/AssistantChat/StatusBar.tsx
@@ -177,6 +177,13 @@ export function StatusBar(props: {
         const percentageUsed = Math.min(100, Math.round((props.contextSize / maxContextSize) * 100))
         return `ctx ${formatTokenCount(props.contextSize)}/${formatTokenCount(maxContextSize)} (${percentageUsed}%)`
     }, [props.contextSize, props.contextWindow, props.model, props.agentFlavor])
+    const compactContextUsageLabel = useMemo(() => {
+        if (props.contextSize === undefined) return null
+        const maxContextSize = props.contextWindow ?? getContextBudgetTokens(props.model, props.agentFlavor)
+        if (!maxContextSize) return `ctx ${formatTokenCount(props.contextSize)}`
+        const percentageLeft = Math.max(0, Math.round(100 - (props.contextSize / maxContextSize) * 100))
+        return `ctx ${formatTokenCount(maxContextSize).toUpperCase()}, ${percentageLeft}% left`
+    }, [props.contextSize, props.contextWindow, props.model, props.agentFlavor])
     const cacheHitLabel = useMemo(() => {
         if (!props.contextCacheRead || props.contextCacheRead <= 0) return null
         return `cache ${formatTokenCount(props.contextCacheRead)}`
@@ -211,51 +218,56 @@ export function StatusBar(props: {
         : null
 
     return (
-        <div className="flex items-center justify-between px-2 pb-1">
-            <div className="flex items-baseline gap-3">
-                <div className="flex items-center gap-1.5">
+        <div className="flex min-w-0 items-center justify-between gap-2 px-2 pb-1">
+            <div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
+                <div className="flex shrink-0 items-center gap-1.5">
                     <span
                         className={`h-2 w-2 rounded-full ${connectionStatus.dotColor} ${connectionStatus.isPulsing ? 'animate-pulse' : ''}`}
                     />
-                    <span className={`text-xs ${connectionStatus.color}`}>
+                    <span className={`whitespace-nowrap text-xs ${connectionStatus.color}`}>
                         {connectionStatus.text}
                     </span>
                 </div>
                 {contextUsageLabel ? (
-                    <span className={`text-[10px] ${contextWarning?.color ?? 'text-[var(--app-hint)]'}`}>
-                        {contextUsageLabel}{contextWarning ? ` · ${contextWarning.text}` : ''}
+                    <span className={`min-w-0 whitespace-nowrap text-[10px] ${contextWarning?.color ?? 'text-[var(--app-hint)]'}`}>
+                        <span className="sm:hidden">
+                            {compactContextUsageLabel}
+                        </span>
+                        <span className="hidden sm:inline">
+                            {contextUsageLabel}{contextWarning ? ` · ${contextWarning.text}` : ''}
+                        </span>
                     </span>
                 ) : null}
                 {cacheHitLabel ? (
-                    <span className="text-[10px] text-[var(--app-hint)]">
+                    <span className="hidden whitespace-nowrap text-[10px] text-[var(--app-hint)] sm:inline">
                         {cacheHitLabel}
                     </span>
                 ) : null}
             </div>
 
-            <div className="flex min-w-0 items-center gap-2">
+            <div className="flex min-w-0 shrink-0 items-center gap-2">
                 {codexReasoningLabel ? (
-                    <span className="text-xs text-[var(--app-hint)]">
+                    <span className="whitespace-nowrap text-xs text-[var(--app-hint)]">
                         {codexReasoningLabel}
                     </span>
                 ) : null}
                 {codexFastMode ? (
-                    <span className="text-xs text-[#34C759]">
+                    <span className="whitespace-nowrap text-xs text-[#34C759]">
                         fast
                     </span>
                 ) : null}
                 {goalLabel ? (
-                    <span className="text-xs text-[var(--app-link)]">
+                    <span className="whitespace-nowrap text-xs text-[var(--app-link)]">
                         {goalLabel}
                     </span>
                 ) : null}
                 {collaborationModeLabel ? (
-                    <span className="text-xs text-blue-500">
+                    <span className="whitespace-nowrap text-xs text-blue-500">
                         {collaborationModeLabel}
                     </span>
                 ) : null}
                 {displayPermissionMode ? (
-                    <span className={`text-xs ${permissionModeColor}`}>
+                    <span className={`whitespace-nowrap text-xs ${permissionModeColor}`}>
                         {permissionModeLabel}
                     </span>
                 ) : null}