changes to mobile styling in modal view, complete reword of backend worker system

app/static/style.css

@@ -369,6 +369,28 @@ header {
   .modal-body {
     flex-direction: column;
     align-items: center;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Mobile landscape: prioritize image, minimize tag editor */
+@media (max-width: 900px) and (orientation: landscape) {
+  .modal-body {
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .modal-image-wrapper {
+    max-width: calc(100% - 200px);
+    max-height: calc(100vh - 2rem);
+    height: calc(100vh - 2rem);
+  }
+  .tag-editor {
+    width: 180px;
+    min-width: 180px;
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
   }
 }
 
@@ -415,12 +437,17 @@ header {
   width: 90vw; height: auto; max-height: none;
 }
 
-/* On smaller screens, full width for image wrapper */
-@media (max-width: 900px) {
+/* On smaller screens (portrait), full width for image wrapper */
+@media (max-width: 900px) and (orientation: portrait) {
   .modal-image-wrapper {
     max-width: 100%;
     height: auto;
-    max-height: 60vh;
+    max-height: 55vh;
+    flex-shrink: 0;
+  }
+  .modal-image-wrapper img,
+  .modal-image-wrapper video {
+    max-height: 55vh;
   }
 }
 
@@ -453,6 +480,17 @@ header {
 .modal-prev { left: 1rem; }
 .modal-next { right: 1rem; }
 
+/* Mobile: always show nav buttons, larger touch targets */
+@media (max-width: 900px) {
+  .modal-button {
+    opacity: 0.8;
+    width: 44px;
+    height: 44px;
+  }
+  .modal-prev { left: 0.5rem; }
+  .modal-next { right: 0.5rem; }
+}
+
 /* Close button */
 .modal-close-btn {
   position: absolute;
@@ -535,13 +573,15 @@ header {
   flex-shrink: 0;
 }
 
-/* On smaller screens, make tag editor full width */
-@media (max-width: 900px) {
+/* On smaller screens (portrait), make tag editor full width and scrollable */
+@media (max-width: 900px) and (orientation: portrait) {
   .tag-editor {
     width: 100%;
     max-width: 500px;
     min-width: unset;
-    max-height: unset;
+    max-height: 35vh;
+    overflow-y: auto;
+    flex-shrink: 0;
   }
 }
 
@@ -594,7 +634,7 @@ header {
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.08);
   color: var(--text);
-  font-size: 0.9rem;
+  font-size: 16px; /* Must be 16px+ to prevent iOS auto-zoom on focus */
 }
 .tag-form input::placeholder {
   color: var(--text-muted);
@@ -714,8 +754,9 @@ header {
 
 .tag-thumb {
   flex: 1;
-  background-size: cover;
-  background-position: center;
+  min-width: 0;
+  height: 100%;
+  object-fit: cover;
   background-color: var(--bg-elevated);
   transition: filter 0.2s ease;
 }