From f3ff3656ef412125fa28a92218d0dbccc6a5b307 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 17:47:48 +0600
Subject: [PATCH] web/ProcessingQueue: fix ui on narrow screens

---
 .../components/queue/ProcessingQueue.svelte   | 22 ++++++++++++-------
 .../queue/ProcessingQueueItem.svelte          |  2 +-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index f7967942..5eae4b24 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -63,7 +63,7 @@
     });
 </script>
 
-<div id="processing-manager">
+<div id="processing-queue" class:expanded>
     <ProcessingStatus {indeterminate} expandAction={popover?.showPopover} />
 
     <PopoverContainer
@@ -108,7 +108,8 @@
 </div>
 
 <style>
-    #processing-manager {
+    #processing-queue {
+        --holder-padding: 16px;
         position: absolute;
         right: 0;
         display: flex;
@@ -117,14 +118,17 @@
         justify-content: end;
         z-index: 9;
         pointer-events: none;
-        padding: 16px;
+        padding: var(--holder-padding);
+        width: calc(100% - var(--holder-padding) * 2);
     }
 
-    #processing-manager :global(#processing-popover) {
-        max-width: 425px;
+    #processing-queue :global(#processing-popover) {
         gap: 12px;
         padding: 16px;
         padding-bottom: 0;
+
+        width: calc(100% - 16px * 2);
+        max-width: 425px;
     }
 
     #processing-header {
@@ -166,13 +170,15 @@
         display: flex;
         flex-direction: column;
 
-        max-height: 60vh;
+        max-height: 65vh;
         overflow: scroll;
     }
 
     @media screen and (max-width: 535px) {
-        #processing-manager {
-            top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
+        #processing-queue {
+            --holder-padding: 8px;
+            padding-top: 4px;
+            top: env(safe-area-inset-top);
         }
     }
 </style>
diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
index a9114f7f..6c43a6cf 100644
--- a/web/src/components/queue/ProcessingQueueItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -52,7 +52,7 @@
     }
 
     .processing-item {
-        width: 425px;
+        width: 100%;
         padding: 8px 0;
         gap: 8px;
         border-bottom: 1.5px var(--button-elevated) solid;