feat: improve recording automation and task workflows

frontend/src/styles/main.css

@@ -66,6 +66,7 @@ body {
     linear-gradient(180deg, #faf8f3 0%, #f6f4ef 42%, #f1eee9 100%);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  overflow-x: hidden;
 }
 
 body,
@@ -106,7 +107,7 @@ select:focus-visible {
   font-size: clamp(28px, 3vw, 38px);
   font-weight: 700;
   letter-spacing: -0.04em;
-  line-height: 1.02;
+  line-height: 1.06;
   color: var(--text-primary);
 }
 
@@ -252,6 +253,14 @@ select:focus-visible {
 
 .monospace {
   font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;
+  word-break: break-all;
+}
+
+.table-scroll-shell {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 
 .el-card {
@@ -536,10 +545,12 @@ select:focus-visible {
   .page-header {
     flex-direction: column;
     align-items: flex-start;
+    gap: 14px;
   }
 
   .page-title {
-    font-size: 30px;
+    font-size: clamp(22px, 7vw, 28px);
+    line-height: 1.08;
   }
 
   .stats-grid {
@@ -549,4 +560,35 @@ select:focus-visible {
   .surface-card .el-card__body {
     padding: 18px;
   }
+
+  .page-subtitle {
+    margin-top: 10px;
+    font-size: 12px;
+    line-height: 1.62;
+  }
+
+  .el-dialog {
+    width: min(100vw - 20px, 560px) !important;
+    margin: 6vh auto 0 !important;
+  }
+
+  .el-dialog__header {
+    padding: 18px 18px 8px;
+  }
+
+  .el-dialog__body {
+    padding: 10px 18px 4px;
+  }
+
+  .el-dialog__footer {
+    padding: 12px 18px 18px;
+  }
+
+  .el-space {
+    width: 100%;
+  }
+
+  .el-space__item {
+    max-width: 100%;
+  }
 }