style(export): keep top controls horizontal on narrow widths

src/pages/ExportPage.scss

@@ -23,37 +23,38 @@
 .global-export-controls {
   background: var(--card-bg);
   border: 1px solid var(--border-color);
-  border-radius: 14px;
+  border-radius: 12px;
-  padding: 14px;
+  padding: 12px;
   display: grid;
-  grid-template-columns: minmax(320px, 1.45fr) minmax(220px, 0.8fr) minmax(260px, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  gap: 10px;
-  align-items: end;
+  align-items: stretch;
 
   .control-label {
-    font-size: 12px;
+    font-size: 11px;
     color: var(--text-secondary);
     font-weight: 600;
-    letter-spacing: 0.3px;
+    letter-spacing: 0.2px;
   }
 
   .path-control {
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 4px;
   }
 
   .path-inline-row {
     min-width: 0;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
+    flex-wrap: nowrap;
   }
 
   .path-value {
     border: 1px dashed var(--border-color);
-    border-radius: 10px;
+    border-radius: 8px;
     background: var(--bg-secondary);
     display: flex;
     align-items: stretch;
@@ -65,10 +66,10 @@
   .path-link {
     border: none;
     background: transparent;
-    font-size: 13px;
+    font-size: 12px;
     color: var(--text-primary);
     text-align: left;
-    padding: 10px 12px;
+    padding: 8px 10px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -90,9 +91,9 @@
     border-left: 1px dashed var(--border-color);
     background: transparent;
     color: var(--text-secondary);
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
-    padding: 0 12px;
+    padding: 0 9px;
     cursor: pointer;
     flex-shrink: 0;
 
@@ -106,17 +107,22 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 4px;
+    min-width: 0;
     z-index: 40;
   }
 
   .layout-trigger {
-    padding: 10px 12px;
+    width: 100%;
-    border-radius: 10px;
+    padding: 8px 10px;
+    border-radius: 8px;
     border: 1px solid var(--border-color);
     background: var(--bg-secondary);
     color: var(--text-primary);
-    font-size: 13px;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     text-align: left;
     cursor: pointer;
     transition: border-color 0.12s ease;
@@ -196,42 +202,45 @@
   .task-center-control {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 4px;
     min-width: 0;
   }
 
   .task-center-inline {
-    min-height: 40px;
+    min-height: 34px;
     border: 1px solid var(--border-color);
-    border-radius: 10px;
+    border-radius: 8px;
     background: var(--bg-secondary);
-    padding: 0 10px;
+    padding: 0 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: 6px;
+    flex-wrap: nowrap;
   }
 
   .task-summary {
     display: inline-flex;
     align-items: center;
-    gap: 10px;
+    gap: 6px;
-    font-size: 12px;
+    font-size: 11px;
     color: var(--text-secondary);
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     min-width: 0;
   }
 
   .task-collapse-btn {
     border: 1px solid var(--border-color);
     background: var(--bg-primary);
-    border-radius: 8px;
+    border-radius: 7px;
-    padding: 4px 8px;
+    padding: 3px 7px;
-    font-size: 12px;
+    font-size: 11px;
     color: var(--text-secondary);
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+    gap: 3px;
     cursor: pointer;
     flex-shrink: 0;
 
@@ -240,6 +249,14 @@
       color: var(--primary);
     }
   }
+
+  .secondary-btn {
+    border-radius: 7px;
+    padding: 6px 9px;
+    font-size: 11px;
+    gap: 4px;
+    flex-shrink: 0;
+  }
 }
 
 .content-card-grid {
@@ -1640,26 +1657,9 @@
 }
 
 @media (max-width: 1360px) {
-  .export-top-panel {
-    grid-template-columns: 1fr;
-  }
-
   .global-export-controls {
-    grid-template-columns: 1fr;
+    padding: 10px;
-
+    gap: 8px;
-    .path-inline-row {
-      flex-wrap: wrap;
-    }
-
-    .path-inline-row > .secondary-btn {
-      margin-left: auto;
-    }
-
-    .task-center-inline {
-      flex-wrap: wrap;
-      min-height: auto;
-      padding: 8px 10px;
-    }
   }
 
   .format-grid {
@@ -1675,6 +1675,16 @@
   }
 }
 
+@media (max-width: 760px) {
+  .global-export-controls {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .task-center-control {
+    grid-column: 1 / -1;
+  }
+}
+
 @media (max-width: 720px) {
   .export-dialog-overlay {
     padding: 10px;