Migration complete

resources/css/components/drafts.css

@@ -93,7 +93,7 @@
     font-weight: 600;
     color: var(--text);
     margin-bottom: 6px;
-    white-space: nowrap;
+    white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -158,3 +158,103 @@
         white-space: nowrap;
     }
 }
+
+@media (max-width: 768px) {
+    .drafts-count {
+        font-size: 0.8rem;
+        margin-bottom: 12px;
+        padding-bottom: 8px;
+    }
+
+    .drafts-item {
+        gap: 15px;
+        padding: 15px;
+    }
+
+    .drafts-cover {
+        width: 70px;
+        height: 70px;
+    }
+
+    .drafts-top {
+        gap: 12px;
+    }
+
+    .drafts-title {
+        font-size: 0.95rem;
+    }
+
+    .drafts-meta {
+        font-size: 0.8rem;
+    }
+
+    .drafts-actions {
+        gap: 6px;
+    }
+
+    .drafts-actions .btn {
+        padding: 6px 10px;
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .drafts-empty {
+        padding: 60px 15px;
+        gap: 12px;
+    }
+
+    .drafts-empty h3 {
+        font-size: 1rem;
+    }
+
+    .drafts-empty p {
+        font-size: 0.85rem;
+    }
+
+    .drafts-item {
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+    }
+
+    .drafts-cover {
+        width: 100%;
+        height: 150px;
+    }
+
+    .drafts-top {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .drafts-title {
+        font-size: 0.9rem;
+    }
+
+    .drafts-meta {
+        font-size: 0.75rem;
+    }
+
+    .drafts-progress {
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .drafts-progress-bar {
+        width: 100%;
+    }
+
+    .drafts-actions {
+        flex-direction: row;
+        gap: 6px;
+        flex-wrap: wrap;
+    }
+
+    .drafts-actions .btn {
+        flex: 1;
+        min-width: 80px;
+        padding: 5px 8px;
+        font-size: 0.75rem;
+    }
+}