Aligned scrollbar with the theme + reduced btn for mobile

diff --git a/frontend/aliases.html b/frontend/aliases.html
index f957687f9160b42322529274b6dcdefc8334b0d7..da4e7b5f51f3407f8ea4075bebcfd0e8e45c5485 100644 (file)
--- a/frontend/aliases.html
+++ b/frontend/aliases.html
@@ -36,26 +36,51 @@
                 <span>Network Manager</span>
             </a>
 
-            <!-- Spacer -->
-            <div class="col d-none d-md-block"></div>
-
-            <nav class="navbar navbar-expand-md px-3">
-                <!-- Bottone hamburger -->
-                <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
-                    <span class="navbar-toggler-icon"></span>
+            <nav class="navbar">
+                <!-- Hamburger -->
+                <button
+                    class="btn btn-primary d-md-none"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#mobileMenu">
+                    <i class="bi bi-list fs-4"></i>
                 </button>
-                <!-- Menu -->
-                <div class="collapse navbar-collapse" id="menuNav">
-                    <div class="navbar-nav ms-auto gap-2">
-                        <a href="/hosts"   id="hostsBtn"     class="btn btn-primary"        aria-current="page">Hostname</a>
-                        <a href="/aliases" id="aliasesBtn"   class="btn btn-primary active" aria-current="page">Alias</a>
-                        <a href="/leases"  id="leasesBtn"    class="btn btn-primary"        aria-current="page">DHCP Leases</a>
-                        <a href="/devices" id="devicesBtn"   class="btn btn-primary"        aria-current="page">Devices</a>
-                        <a href="/settings" id="settingsBtn" class="btn btn-primary"        aria-current="page">Settings</a>
-                        <button id="logoutBtn" class="btn btn-primary">Logout</button>
-                    </div>
+
+                <!-- Desktop nav -->
+                <div class="d-none d-md-flex gap-2 ms-auto">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary active">Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
                 </div>
             </nav>
+
+            <!-- Mobile offcanvas -->
+            <div class="offcanvas offcanvas-end d-md-none" tabindex="-1" id="mobileMenu">
+
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title">Network Manager</h5>
+
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="offcanvas">
+                    </button>
+                </div>
+
+                <div class="offcanvas-body">
+                    <div class="d-grid gap-2">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary active">Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
+                    </div>
+                </div>
+            </div>
         </div>
     </header>
 
@@ -104,7 +129,7 @@
                     </div>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Add alias -->
                     <button
@@ -113,11 +138,11 @@
                             aria-label="Add Alias"
                             data-bs-toggle="modal" data-bs-target="#addAliasModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label"> Add Alias</span>
+                        <span class="label d-none d-md-block"> Add Alias</span>
                     </button>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Reload DNS -->
                     <button
@@ -126,7 +151,7 @@
                             aria-label="Reload DNS"
                             data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DNS</span>
+                        <span class="label d-none d-md-block"> Reload DNS</span>
                     </button>
 
                     <!-- Reload DNS -->
@@ -135,7 +160,7 @@
                             aria-label="Reload DHCP"
                             data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DHCP</span>
+                        <span class="label d-none d-md-block"> Reload DHCP</span>
                     </button>
                 </div>
             </div>

diff --git a/frontend/css/layout.css b/frontend/css/layout.css
index 83403ba33f07ec0729c8bfa2259d46e4c285a122..3de77e73370fec038ee7230369367858bc13f10b 100644 (file)
--- a/frontend/css/layout.css
+++ b/frontend/css/layout.css
@@ -372,6 +372,8 @@ i.bi {
     background-color: #fff;
     -webkit-overflow-scrolling: touch;
     border: 1px solid var(--border-light);
+    scrollbar-width: thin;
+    scrollbar-color: var(--accent) transparent;
 }
 
 .table {
@@ -682,16 +684,14 @@ td.actions {
     }
 
     .btn {
-        padding-left: 0.6rem;
-        padding-right: 0.6rem;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-    }
-
-    /* Toolbar: su schermi molto stretti mostra solo le icone dei bottoni */
-    .btn .label {
-        display: none;
+        min-width: 34px;
+        min-height: 32px;
+        padding: 0.30rem 0.55rem;
+        font-size: 0.95rem;
+        line-height: 1;
     }
 
     .btn .icon,