Docker server has responsiveness now

docker/views/css/components/navbar.css

@@ -8,7 +8,11 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 3rem;
-    background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
+    background: linear-gradient(
+        to bottom,
+        rgba(9, 9, 11, 0.9) 0%,
+        rgba(9, 9, 11, 0) 100%
+    );
     transition: background 0.3s;
 }
 
@@ -211,7 +215,9 @@
     min-width: 260px;
     display: none;
     flex-direction: column;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
+    box-shadow:
+        0 20px 40px rgba(0, 0, 0, 0.6),
+        0 0 0 1px rgba(139, 92, 246, 0.1);
     z-index: 9999;
     overflow: hidden;
     animation: dropdownSlide 0.2s ease-out;
@@ -415,4 +421,106 @@
 .search-results::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 3px;
-}
+}
+
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0 1rem;
+        height: 60px;
+        gap: 0.5rem;
+
+        z-index: 1002;
+        background: rgba(9, 9, 11, 0.95);
+    }
+
+    .nav-brand {
+        min-width: auto;
+        font-size: 0;
+    }
+
+    .brand-icon {
+        width: 32px;
+        height: 32px;
+    }
+
+    .search-wrapper {
+        flex: 1;
+        width: auto;
+    }
+
+    .search-input {
+        padding: 0.5rem 1rem 0.5rem 2.2rem;
+        font-size: 0.9rem;
+    }
+
+    .search-icon {
+        left: 10px;
+    }
+
+    #nav-avatar {
+        width: 32px;
+        height: 32px;
+    }
+
+    .nav-center {
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+
+        display: flex;
+        background: rgba(9, 9, 11, 0.98);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding: 0.5rem 1rem;
+
+        overflow-x: auto;
+        white-space: nowrap;
+        justify-content: flex-start;
+        gap: 0.5rem;
+
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        z-index: 1001;
+
+        border-radius: 0;
+        border: none;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .nav-center::-webkit-scrollbar {
+        display: none;
+    }
+
+    .nav-button {
+        flex-shrink: 0;
+        padding: 0.4rem 1rem;
+        font-size: 0.85rem;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .nav-button.active {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    .search-results {
+        position: fixed;
+        top: 110px;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        border-radius: 0;
+        max-height: calc(100vh - 120px);
+    }
+
+    .nav-dropdown {
+        position: fixed;
+        top: 70px;
+        right: 1rem;
+        left: 1rem;
+        width: auto;
+        min-width: auto;
+        z-index: 9999;
+    }
+}