fix mobile responsiveness across all pages

- Stack section header filters/sort controls vertically on mobile
- Make bulk action bar, checkbox rows, and option rows stack on mobile
- Collapse settings form rows to single column with reduced nested indents
- Add mobile styles for modal/dialog buttons (full-width, stacked)
- Make download form save dialog and flag labels wrap properly
- Show category doc links on touch (no hover-only)

Author: willuhmjs

src/lib/components/download/DownloadForm.svelte

@@ -1883,5 +1883,31 @@
     .btn-clear-flags {
       flex: 1;
     }
+
+    .save-dialog {
+      flex-wrap: wrap;
+    }
+
+    .save-dialog input {
+      width: 100%;
+    }
+
+    .save-dialog .btn-sm {
+      flex: 1;
+    }
+
+    .flag-toggle {
+      flex-wrap: wrap;
+    }
+
+    .flag-code {
+      order: 3;
+      width: 100%;
+      margin-top: 2px;
+    }
+
+    .category-docs {
+      opacity: 1;
+    }
   }
 </style>

src/lib/components/ui/Modal.svelte

@@ -141,4 +141,24 @@
 	.btn-secondary:hover {
 		background: var(--bg-hover);
 	}
+
+	@media (max-width: 768px) {
+		.modal {
+			width: 95%;
+		}
+
+		.modal-header,
+		.modal-body,
+		.modal-footer {
+			padding: var(--spacing-md);
+		}
+
+		.modal-footer {
+			flex-direction: column-reverse;
+		}
+
+		.modal-footer button {
+			width: 100%;
+		}
+	}
 </style>

src/routes/+page.svelte

@@ -2268,6 +2268,11 @@
 			flex-wrap: wrap;
 		}
 
+		.actions .btn {
+			flex: 1;
+			min-width: 0;
+		}
+
 		.backfill-menu {
 			padding: var(--spacing-md);
 		}
@@ -2285,5 +2290,79 @@
 		.download-card .content {
 			padding: var(--spacing-md);
 		}
+
+		.section-header {
+			flex-direction: column;
+			align-items: stretch;
+		}
+
+		.section-header-left {
+			justify-content: space-between;
+		}
+
+		.section-header-right {
+			flex-wrap: wrap;
+		}
+
+		.completed-filter {
+			width: 100%;
+		}
+
+		.completed-filter .tab {
+			flex: 1;
+			text-align: center;
+		}
+
+		.channel-dropdown,
+		.sort-dropdown {
+			flex: 1;
+			min-width: 0;
+		}
+
+		.channel-dropdown-trigger {
+			width: 100%;
+			justify-content: center;
+		}
+
+		.channel-dropdown-label {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.channel-dropdown-menu {
+			left: 0;
+			right: 0;
+			min-width: unset;
+		}
+
+		.bulk-bar {
+			flex-direction: column;
+			gap: var(--spacing-sm);
+			padding: var(--spacing-md);
+		}
+
+		.bulk-actions {
+			width: 100%;
+			flex-wrap: wrap;
+		}
+
+		.bulk-actions .btn {
+			flex: 1;
+			min-width: 0;
+		}
+
+		.checkbox-row {
+			flex-direction: column;
+			gap: var(--spacing-sm);
+		}
+
+		.options-row {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.meta {
+			gap: var(--spacing-sm);
+		}
 	}
 </style>

src/routes/settings/+page.svelte

@@ -1226,6 +1226,10 @@
 			font-size: 1.25rem;
 		}
 
+		.form-row {
+			grid-template-columns: 1fr;
+		}
+
 		.form-group input[type='text'],
 		.form-group input[type='number'],
 		.form-group input[type='email'],
@@ -1243,6 +1247,15 @@
 			width: 100%;
 		}
 
+		.nested-field {
+			margin-left: var(--spacing-sm);
+			padding-left: var(--spacing-md);
+		}
+
+		.jellyfin-test {
+			flex-wrap: wrap;
+		}
+
 		.create-user-form {
 			padding: var(--spacing-md);
 		}
@@ -1275,5 +1288,13 @@
 		.modal-body {
 			padding: var(--spacing-md);
 		}
+
+		.modal-actions {
+			flex-direction: column;
+		}
+
+		.modal-actions button {
+			width: 100%;
+		}
 	}
 </style>