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;
+      }
+    }
+  }
+}