Migration complete

resources/css/components/queue.css

@@ -185,3 +185,82 @@
     border: 1px solid var(--border);
 }
 
+@media (max-width: 768px) {
+    .queue-item {
+        padding: 15px;
+        margin-bottom: 15px;
+    }
+
+    .queue-item-header {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .queue-item-title {
+        font-size: 1rem;
+    }
+
+    .queue-item-meta {
+        font-size: 0.8rem;
+    }
+
+    .queue-item-actions-header {
+        gap: 6px;
+        flex-wrap: wrap;
+        width: 100%;
+    }
+
+    .timeline {
+        font-size: 0.85rem;
+    }
+
+    .timeline-container {
+        padding: 12px 15px;
+    }
+
+    .queue-mod-actions {
+        flex-direction: column;
+        gap: 6px;
+    }
+}
+
+@media (max-width: 600px) {
+    .queue-empty {
+        padding: 60px 15px;
+        font-size: 0.9rem;
+    }
+
+    .queue-item {
+        padding: 12px;
+        border-left-width: 3px;
+    }
+
+    .queue-item-title {
+        font-size: 0.95rem;
+    }
+
+    .queue-item-meta {
+        font-size: 0.75rem;
+    }
+
+    .queue-item-actions-header {
+        width: 100%;
+    }
+
+    .timeline {
+        font-size: 0.8rem;
+    }
+
+    .timeline-container {
+        padding: 10px 12px;
+    }
+
+    .queue-mod-actions {
+        flex-direction: column;
+    }
+
+    .queue-mod-actions .btn {
+        width: 100%;
+    }
+}
+