Migration complete

resources/css/components/common.css

@@ -146,6 +146,7 @@
 
 .breadcrumb {
     margin-bottom: 15px;
+    flex-shrink: 0;
 }
 
 /* PAGE */
@@ -155,6 +156,7 @@
     font-weight: 300;
     margin-bottom: 20px;
     color: var(--text);
+    flex-shrink: 0;
 }
 
 /* TEXTS */
@@ -193,3 +195,88 @@
     border: none;
     cursor: pointer;
 }
+
+@media (max-width: 768px) {
+    .btn {
+        padding: 7px 12px;
+        font-size: 0.85rem;
+        gap: 6px;
+    }
+
+    .block {
+        padding: 15px;
+        margin-bottom: 15px;
+    }
+
+    .block-header {
+        font-size: 1.05rem;
+        margin-bottom: 12px;
+        padding-bottom: 8px;
+    }
+
+    .page-title {
+        font-size: 1.5rem;
+        margin-bottom: 15px;
+    }
+
+    .content-title {
+        margin: 20px 0 12px 0;
+        padding-left: 8px;
+    }
+
+    .quote {
+        padding: 12px;
+        margin-top: 20px;
+        font-size: 0.95rem;
+    }
+
+    .whisper {
+        margin-bottom: 12px;
+        font-size: 0.9rem;
+    }
+
+    .breadcrumb {
+        font-size: 0.85rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .btn {
+        padding: 6px 10px;
+        font-size: 0.8rem;
+        gap: 4px;
+        justify-content: center;
+    }
+
+    .btn.primary, .btn.danger, .btn.success {
+        width: 100%;
+    }
+
+    .block {
+        padding: 12px;
+        margin-bottom: 12px;
+    }
+
+    .block-header {
+        font-size: 0.95rem;
+        margin-bottom: 10px;
+        padding-bottom: 6px;
+    }
+
+    .page-title {
+        font-size: 1.2rem;
+        margin-bottom: 12px;
+    }
+
+    .badge {
+        padding: 2px 6px;
+        font-size: 0.7rem;
+    }
+
+    .topbar-badge {
+        min-width: 16px;
+        height: 16px;
+        padding: 0 3px;
+        font-size: 0.6rem;
+    }
+}