fix: improve batch export dialog mobile responsiveness

- Hide updated column on mobile (header + data cells)
- Wrap action bar buttons to second line on mobile
- Hide batch selection controls (Last 100, offset, → 100) on mobile
- Fix Select dropdown right padding to prevent arrow overlapping text
- Prevent "Test API" button text from wrapping
- Expand dialog to 90vh on mobile
- Move Cancel button inline next to progress counter

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/style.css

@@ -11,7 +11,7 @@ body[data-time-format="24"] span[data-time-format="24"] {
 }
 
 .Select {
-    padding: 0 0 0 0.5rem;
+    padding: 0 2.5rem 0 0.5rem;
     width: 7.5rem;
     border-radius: 4px;
     box-shadow: 0 0 0 1px #6f6e77;
@@ -25,7 +25,7 @@ body[data-time-format="24"] span[data-time-format="24"] {
 
 html {
     --ce-text-primary: var(--text-primary, #0d0d0d);
-    --ce-menu-primary: var(--sidebar-surface-primary, #f9f9f9);
+    --ce-menu-primary: #ffffff;
     --ce-menu-secondary: var(--sidebar-surface-secondary, #ececec);
     --ce-border-light: var(--border-light, rgba(0, 0, 0, .1));
 }
@@ -37,8 +37,8 @@ html {
     --ce-border-light: var(--border-default, rgba(0, 0, 0, .05));
 }
 
-.bg-menu {
-    background-color: var(--ce-menu-secondary);
+.dark.bg-menu {
+    background-color: var(--ce-menu-primary);
 }
 
 .border-menu {

src/ui/Dialog.css

@@ -312,6 +312,17 @@
 }
 
 
+@media (max-width: 480px) {
+    .DialogContent { max-height: 90vh; }
+    .SelectListHeaderCell:last-child { display: none; }
+    .SelectItemMeta:last-child { display: none; }
+    .SelectToolbar .Button.neutral,
+    .SelectToolbar input[type="number"] { display: none; }
+    .ActionBar { justify-content: flex-end; }
+    .ActionBar > .Select { width: 100%; }
+    .ActionBar > .flex-grow { display: none; }
+}
+
 @keyframes contentShow {
     from {
         opacity: 0;

src/ui/ExportDialog.tsx

@@ -693,7 +693,7 @@ const DialogContent: FC<DialogContentProps> = ({ format }) => {
                     {exportSource === 'API' && (
                         <button
                             className="Button neutral"
-                            style={{ fontSize: '0.72rem', padding: '2px 8px' }}
+                            style={{ fontSize: '0.72rem', padding: '2px 8px', whiteSpace: 'nowrap' }}
                             disabled={probeStatus === 'testing' || processing}
                             title={Object.keys(probeHeaders).length > 0
                                 ? `Rate-limit headers: ${JSON.stringify(probeHeaders)}`
@@ -758,7 +758,7 @@ const DialogContent: FC<DialogContentProps> = ({ format }) => {
                 </div>
             )}
 
-            <div className="flex mt-3 items-center gap-2">
+            <div className="ActionBar flex flex-wrap mt-3 items-center gap-2">
                 <select
                     className="Select shrink-0"
                     disabled={processing}
@@ -798,6 +798,14 @@ const DialogContent: FC<DialogContentProps> = ({ format }) => {
                                 ? `${t('Batch progress').replace('{{current}}', String(progress.batchIndex + 1)).replace('{{total}}', String(progress.totalBatches))} \u00B7 ${progress.completed}/${progress.total}`
                                 : `${progress.completed}/${progress.total}`}
                         </span>
+                        <button
+                            className="Button red"
+                            style={{ fontSize: '0.75rem', padding: '3px 10px', height: 'auto' }}
+                            title="Stop the export — any batches already downloaded are kept"
+                            onClick={cancelExport}
+                        >
+                            Cancel
+                        </button>
                     </div>
                     <div className="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
                         <div
@@ -809,36 +817,14 @@ const DialogContent: FC<DialogContentProps> = ({ format }) => {
             )}
             {processing
                 ? (
-                    <>
-                        <button
-                            className="Button"
-                            style={{
-                                position: 'absolute',
-                                top: '12px',
-                                right: '40px',
-                                fontSize: '0.75rem',
-                                padding: '3px 10px',
-                                background: '#ef4444',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '4px',
-                                cursor: 'pointer',
-                                fontWeight: 600,
-                            }}
-                            title="Stop the export — any batches already downloaded are kept"
-                            onClick={cancelExport}
-                        >
-                            Cancel
-                        </button>
-                        <button
-                            className="IconButton CloseButton"
-                            aria-label="Export in progress"
-                            title="Click Cancel to stop the export"
-                            style={{ cursor: 'not-allowed', opacity: 0.25 }}
-                        >
-                            <IconCross />
-                        </button>
-                    </>
+                    <button
+                        className="IconButton CloseButton"
+                        aria-label="Export in progress"
+                        title="Click Cancel to stop the export"
+                        style={{ cursor: 'not-allowed', opacity: 0.25 }}
+                    >
+                        <IconCross />
+                    </button>
                     )
                 : (
                     <Dialog.Close asChild>