From c18ce47057aa81579ecfe0d6f6420edef27047ca Mon Sep 17 00:00:00 2001
From: drjaska <drjaska83@gmail.com>
Date: Mon, 31 Aug 2026 00:48:28 +0300
Subject: [PATCH] Improve web UI CSS on mobile or similar devices

"add folder" button in path picker only appears on :hover but some
mobile browsers never hover at all. It's now always dimly visible and
fully visible on hover/tap.

Folder picker is now a single column layout on mobile, it was too narrow
to be readable otherwise.

Modals use more viewport width/height variables over pixels to avoid
having too small intractable elements on smaller screens. Some elements
were resized to be more finger tapping friendly.

Hid overflowing horizontal content (unbreakable text of file paths,
error messages, and so on).

These changes may still need further improvements.
---
 public/styles.css | 108 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 105 insertions(+), 3 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index b584c34..685be1d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -22,6 +22,7 @@ body {
   background: var(--background);
   color: var(--text);
   line-height: 1.5;
+  overflow-x: hidden;
 }
 
 .container {
@@ -566,11 +567,12 @@ td {
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
-  opacity: 0;
+  opacity: 0.55;
   transition: opacity 0.15s;
 }
 
-.tree-row:hover .tree-add {
+.tree-row:hover .tree-add,
+.tree-row:focus-within .tree-add {
   opacity: 1;
 }
 
@@ -901,4 +903,104 @@ td {
     padding: 8px;
     font-size: 13px;
   }
-}
\ No newline at end of file
+
+  /* Modals: use most of the viewport instead of a fixed desktop width */
+  .modal {
+    padding: 12px;
+    align-items: flex-start;
+  }
+
+  .modal-content {
+    width: 100%;
+    max-width: none;
+    padding: 16px;
+    margin-top: 8px;
+  }
+
+  .modal-content.picker-modal,
+  .modal-content.logs-modal,
+  .modal-content.file-list-modal {
+    max-height: calc(100vh - 24px);
+  }
+
+  /* Folder picker: stack tree above selected-paths instead of side-by-side */
+  .picker-body {
+    flex-direction: column;
+    max-height: none;
+    min-height: 0;
+  }
+
+  .picker-tree {
+    max-height: 38vh;
+  }
+
+  .picker-selected {
+    max-height: 26vh;
+  }
+
+  /* Bigger touch targets */
+  .tree-add {
+    width: 32px;
+    height: 32px;
+    font-size: 20px;
+    opacity: 0.85;
+  }
+
+  .selected-path-remove {
+    font-size: 24px;
+    padding: 4px 8px;
+  }
+
+  .btn-close {
+    width: 40px;
+    height: 40px;
+    font-size: 28px;
+  }
+
+  .btn-skip,
+  .btn-view-logs {
+    padding: 8px 14px;
+    font-size: 13px;
+  }
+
+  /* Stack modal action buttons full-width so they're easy to tap */
+  .modal-actions {
+    flex-wrap: wrap;
+  }
+
+  .modal-actions .btn {
+    flex: 1 1 auto;
+    min-width: 45%;
+  }
+
+  /* Let file cards wrap instead of squeezing the skip button */
+  .file-header {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .engine-status {
+    font-size: 13px;
+  }
+}
+
+/* Small phones: tighten further and force single-column modal actions */
+@media (max-width: 420px) {
+  h1 {
+    font-size: 19px;
+  }
+
+  .status-label,
+  .status-paths {
+    font-size: 12px;
+  }
+
+  .modal-actions .btn {
+    min-width: 100%;
+  }
+
+  .tree-name,
+  .selected-path-text {
+    font-size: 12px;
+  }
+}