feat: improve operator progress and recording accuracy

apps/showcase_ui/src/app/components/agent-stream/agent-stream.component.scss

@@ -37,14 +37,13 @@ $stream-row-height: 25px;
   background: #f8f9fa;
   box-sizing: border-box;
   position: relative;
+  container-type: inline-size;
+  container-name: stream-panel;
 
-
-
-  /* Light VS Code / IDE Style Top Action Bar */
-  /* Light VS Code / IDE Style Top Action Bar */
   .vscode-nav-header {
     position: relative;
     height: 60px;
+    flex-shrink: 0;
     background: #ffffff;
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     display: flex;
@@ -99,17 +98,6 @@ $stream-row-height: 25px;
       outline: none;
       white-space: nowrap;
 
-      @media (max-width: 1150px) {
-        padding: 0 9px;
-        gap: 0;
-      }
-
-      .tab-label {
-        @media (max-width: 1150px) {
-          display: none !important;
-        }
-      }
-
       .tab-icon {
         font-size: 16px;
         color: inherit;
@@ -1032,7 +1020,6 @@ $stream-row-height: 25px;
     }
   }
 
-  /* Floating Top-Right Action Toolbar (Model Info + Screen Recording Button) */
   .stream-floating-toolbar {
     position: absolute;
     top: 12px;
@@ -3717,3 +3704,39 @@ $stream-row-height: 25px;
     }
   }
 }
+
+@media (min-width: 1151px) {
+  @container stream-panel (max-width: 660px) {
+    .agent-stream-container .stream-floating-toolbar {
+      .model-info-chip {
+        padding: 0 9px;
+
+        .model-label {
+          display: none;
+        }
+      }
+
+      .btn-screen-recording {
+        padding: 0 9px;
+        gap: 0;
+
+        .btn-text {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1150px) {
+  @container stream-panel (max-width: 900px) {
+    .agent-stream-container .vscode-nav-header .vscode-tab-btn {
+      padding: 0 9px;
+      gap: 0;
+
+      .tab-label {
+        display: none;
+      }
+    }
+  }
+}

apps/showcase_ui/src/app/pages/home/home.component.scss

@@ -431,6 +431,18 @@ $text-light: #94a3b8;
           transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           outline: none;
           white-space: nowrap;
+          min-width: 0;
+
+          @media (max-width: 560px) {
+            white-space: normal;
+            height: auto;
+            min-height: 32px;
+            padding: 6px 10px;
+            gap: 5px;
+            font-size: 12px;
+            line-height: 1.2;
+            text-align: center;
+          }
 
           .tab-icon {
             font-size: 16px;
@@ -440,6 +452,7 @@ $text-light: #94a3b8;
             align-items: center;
             justify-content: center;
             color: #64748b;
+            flex-shrink: 0;
             transition: color 0.15s ease, transform 0.15s ease;
 
             &.icon-ready {
@@ -454,6 +467,7 @@ $text-light: #94a3b8;
 
           .tab-label {
             color: #475569;
+            min-width: 0;
             transition: color 0.15s ease;
           }