From 43fa574dab7ed58099c8a5425150bddce071c838 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 4 Apr 2026 17:37:47 -0700
Subject: [PATCH] add responsive breakpoint for queue control items

---
 .../play-queue-list-controls.module.css         | 17 +++++++++++++++++
 .../components/play-queue-list-controls.tsx     |  7 +++++--
 2 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/features/now-playing/components/play-queue-list-controls.module.css

diff --git a/src/renderer/features/now-playing/components/play-queue-list-controls.module.css b/src/renderer/features/now-playing/components/play-queue-list-controls.module.css
new file mode 100644
index 000000000..8b4cf35cb
--- /dev/null
+++ b/src/renderer/features/now-playing/components/play-queue-list-controls.module.css
@@ -0,0 +1,17 @@
+.toolbar {
+    width: 100%;
+    min-width: 0;
+    container-type: inline-size;
+}
+
+.restore-section {
+    display: contents;
+}
+
+@container (max-width: 296px) {
+    .restore-section {
+        display: none;
+    }
+}
+
+
diff --git a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
index 5b2c89cf9..05587ac8a 100644
--- a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
+++ b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
@@ -3,6 +3,8 @@ import { t } from 'i18next';
 import { RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import styles from './play-queue-list-controls.module.css';
+
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
@@ -38,6 +40,7 @@ export const PlayQueueListControls = ({
     return (
         <Group
             align="center"
+            className={styles.toolbar}
             gap="sm"
             justify="flex-start"
             px="md"
@@ -141,7 +144,7 @@ const QueueRestoreActions = () => {
     }
 
     return (
-        <>
+        <span className={styles.restoreSection}>
             <ActionIcon
                 disabled={Boolean(isFetching)}
                 icon="upload"
@@ -168,6 +171,6 @@ const QueueRestoreActions = () => {
                 }}
                 variant="subtle"
             />
-        </>
+        </span>
     );
 };