fix(header): fix mobile responsiveness

public/assets/cloud.css

@@ -11,8 +11,8 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
     padding: 1rem;
     position: relative;
 }
@@ -2301,4 +2301,44 @@ main.container {
     box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
 }
 
+@media (max-width: 768px) {
+    header {
+        position: sticky;
+        top: 0;
+        padding: 0.5rem 1rem;
+        font-size: 1.1rem;
+        border-radius: 0;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
+    }
 
+    main.container {
+        margin-top: 0;
+        padding-top: 1rem;
+    }
+}
+
+.header-actions {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+    .header-actions {
+        flex-direction: column;
+        gap: 0.5rem;
+        margin-top: 1rem;
+        width: 100%;
+    }
+
+    .header-actions form {
+        width: 100%;
+    }
+
+    .header-actions .btn {
+        width: 100%;
+        justify-content: center;
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+    }
+}