diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte index 8535f58e1..0d00a5d01 100644 --- a/web/src/components/queue/ProcessingQueue.svelte +++ b/web/src/components/queue/ProcessingQueue.svelte @@ -125,6 +125,8 @@ flex-direction: row; justify-content: space-between; align-items: center; + flex-wrap: wrap; + gap: 6px; } .header-buttons { @@ -157,7 +159,7 @@ flex-direction: column; max-height: 65vh; - overflow: scroll; + overflow-y: scroll; } @media screen and (max-width: 535px) { diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte index d57a004bd..e5b8ee4d3 100644 --- a/web/src/components/queue/ProcessingQueueItem.svelte +++ b/web/src/components/queue/ProcessingQueueItem.svelte @@ -111,9 +111,10 @@ .file-actions { display: flex; flex-direction: row; - justify-content: center; + justify-content: flex-start; align-items: center; position: relative; + overflow: hidden; } .processing-item { @@ -209,6 +210,13 @@ } } + /* TODO: fix this shitty workaround */ + @media(hover: none) { + .processing-info { + width: calc(100% - 80px); + } + } + .action-button { padding: 8px; height: auto;