feat: Enhance header actions with responsive design and improved button layout for better usability on small screens

2025-08-12 23:46:49 +07:00
parent 9c0fe54402
commit 8982c9ae10
2 changed files with 62 additions and 49 deletions
@@ -241,6 +241,23 @@
 .header-actions .btn {
  display: inline-flex;
  align-items: center;
+  white-space: nowrap;
+}
+.header-actions .btn svg { width: 18px; height: 18px; }
+
+/* Responsive sizing for small screens */
+@media (max-width: 992px) {
+  .header-actions { gap: 0.4rem; }
+  .header-actions .btn {
+    padding: 0.35rem 0.6rem;
+    font-size: 0.875rem;
+  }
+  .header-actions .btn .me-1 { margin-right: 0.4rem !important; }
+}
+
+@media (max-width: 576px) {
+  .page-header .col-auto.ms-auto { width: 100%; }
+  .header-actions { width: 100%; }
 }

 /* Custom responsive adjustments */