Docker server has responsiveness now

2025-12-17 13:00:15 -05:00
parent 1a01d29f19
commit c11a1eed35
14 changed files with 2465 additions and 747 deletions
--- a/docker/views/css/globals.css
+++ b/docker/views/css/globals.css
@@ -57,7 +57,7 @@ body {
    padding: 0;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: "Inter", system-ui, sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
@@ -288,7 +288,7 @@ body {
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
@@ -298,4 +298,96 @@ body {
 .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
-}
+}
+
+Here is the CSS you need to add to the very bottom of your file.
+
+I have targeted the specific classes you provided (.card, .section, .back-btn) to make them touch-friendly, and I added a specific section to fix the "Who's exploring?" screen from your screenshot.
+1. First: The HTML Tag (Crucial)
+
+Ensure this is in your HTML <head> or the CSS below will not work:
+HTML
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+2. The CSS Update
+
+Copy and paste this entire block to the bottom of your CSS file:
+CSS
+
+@media (max-width: 768px) {
+    :root {
+        --nav-height: 60px;
+        --spacing-2xl: 1.5rem;
+    }
+
+    .section {
+        padding: 1.25rem 1rem;
+    }
+
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .section-title {
+        font-size: 1.5rem;
+    }
+
+    .back-btn {
+        top: 1rem;
+        left: 1rem;
+        padding: 0.6rem 1.2rem;
+        font-size: 0.9rem;
+
+        position: absolute;
+    }
+
+    .scroll-btn {
+        display: none !important;
+    }
+
+    .carousel {
+        padding: 0.5rem 0;
+
+        padding-right: 1.5rem;
+    }
+
+    .card {
+        min-width: 160px;
+        width: 160px;
+        flex: 0 0 160px;
+    }
+
+    .card-content h3 {
+        font-size: 0.9rem;
+    }
+
+    .profile-selection-container,
+    main {
+        width: 90% !important;
+        margin: 0 auto;
+        padding-top: 20vh;
+        text-align: center;
+    }
+
+    h1 {
+        font-size: 2rem !important;
+        line-height: 1.2;
+    }
+
+    .profile-card img,
+    .user-avatar {
+        width: 140px !important;
+        height: 140px !important;
+    }
+
+    .btn-primary,
+    .btn-blur,
+    .add-user-btn {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+}