From 58068c9303fe485c37062909d445851c9dc2dfa6 Mon Sep 17 00:00:00 2001
From: Giorgio Ravera <giorgio.ravera@gmail.com>
Date: Mon, 15 Jun 2026 15:12:48 +0200
Subject: [PATCH] reviewed mobile layout

---
 frontend/aliases.html   | 70 +++++++++++++++++++++++++-----
 frontend/css/layout.css | 10 +++--
 frontend/devices.html   | 95 +++++++++++++++++++++++++++++++----------
 frontend/hosts.html     | 68 +++++++++++++++++++++++++----
 frontend/leases.html    | 70 +++++++++++++++++++++++++-----
 frontend/settings.html  | 74 ++++++++++++++++++++++++++------
 6 files changed, 321 insertions(+), 66 deletions(-)

diff --git a/frontend/aliases.html b/frontend/aliases.html
index 708ad14..a4e11aa 100644
--- a/frontend/aliases.html
+++ b/frontend/aliases.html
@@ -131,38 +131,88 @@
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Add alias -->
+                    <!-- Add host Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Add Alias"
                         aria-label="Add Alias"
                         data-bs-toggle="modal" data-bs-target="#addAliasModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label d-none d-md-block">Add Alias</span>
+                        <span class="label">Add Alias</span>
                     </button>
 
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Reload DNS -->
+                    <!-- Reload DNS Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Reload DNS (BIND)"
                         aria-label="Reload DNS"
                         data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block">Reload DNS</span>
+                        <span class="label">Reload DNS</span>
                     </button>
 
-                    <!-- Reload DNS -->
+                    <!-- Reload DHCP Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Reload DHCP (Kea)"
                         aria-label="Reload DHCP"
                         data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block">Reload DHCP</span>
+                        <span class="label">Reload DHCP</span>
                     </button>
+
+                    <!-- Mobile Dropdown -->
+                    <div class="dropdown d-md-none">
+                        <button
+                            class="btn btn-primary d-flex align-items-center px-3"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                            <i class="bi bi-three-dots-vertical"></i>
+                        </button>
+
+                        <ul class="dropdown-menu dropdown-menu-end shadow">
+
+                            <!-- Add Host Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Add Alias"
+                                    aria-label="Add Alias"
+                                    data-bs-toggle="modal" data-bs-target="#addAliasModal">
+                                    <i class="bi bi-plus-lg"></i>
+                                    <span>Add Alias</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DNS Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DNS (BIND)"
+                                    aria-label="Reload DNS"
+                                    data-action="reloadDns">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DNS</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DHCP Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DHCP (Kea)"
+                                    aria-label="Reload DHCP"
+                                    data-action="reloadDhcp">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DHCP</span>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
 
@@ -200,7 +250,7 @@
                     </th>
 
                     <th data-type="string" data-sortable="false" class="text-center text-nowrap">
-                        Actions <span class="sort-arrow invisible" aria-hidden="true"></span>
+                        Actions
                     </th>
                 </tr>
             </thead>
diff --git a/frontend/css/layout.css b/frontend/css/layout.css
index 3de77e7..53d1726 100644
--- a/frontend/css/layout.css
+++ b/frontend/css/layout.css
@@ -648,7 +648,7 @@ td.actions {
 /* ================================
    Responsive
    ================================ */
-@media (max-width: 640px) {
+@media (max-width: 768px) {
 
     .topbar-inner {
         flex-wrap: nowrap;
@@ -660,7 +660,7 @@ td.actions {
     }
 
     .logo span {
-        font-size: 1.1rem;
+        font-size: 1.3rem;
         white-space: nowrap;
     }
 
@@ -668,10 +668,14 @@ td.actions {
         margin: 10px 10px 15px 10px;
     }
 
+    .section-title {
+        font-size: 1.1rem;
+    }
+
     .table-responsive {
         margin: 10px;
         width: calc(100% - 20px);
-        max-height: calc(100dvh - 11.5rem);
+        max-height: calc(100dvh - 9rem);
     }
 
     .table {
diff --git a/frontend/devices.html b/frontend/devices.html
index 1d4c19a..247d97e 100644
--- a/frontend/devices.html
+++ b/frontend/devices.html
@@ -121,9 +121,9 @@
                     <!-- Search Mobile -->
                     <div class="col-auto d-md-none">
                         <button
-                                class="btn btn-primary d-flex align-items-center gap-2 px-3"
-                                data-bs-toggle="collapse" data-bs-target="#mobileSearch"
-                                aria-expanded="false" aria-controls="mobileSearch">
+                            class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                            data-bs-toggle="collapse" data-bs-target="#mobileSearch"
+                            aria-expanded="false" aria-controls="mobileSearch">
                             <i class="bi bi-search"></i>
                         </button>
                     </div>
@@ -131,37 +131,88 @@
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Add host -->
+                    <!-- Add host Desktop -->
                     <button
-                            class="btn btn-primary d-flex align-items-center gap-2 px-3"
-                            title="Add Host"
-                            aria-label="Add Host"
-                            data-bs-toggle="modal" data-bs-target="#addHostModal">
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
+                        title="Add Host"
+                        aria-label="Add Host"
+                        data-bs-toggle="modal" data-bs-target="#addHostModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label d-none d-md-block"> Add Host</span>
+                        <span class="label">Add Host</span>
                     </button>
 
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Reload DNS -->
+                    <!-- Reload DNS Desktop -->
                     <button
-                            class="btn btn-primary d-flex align-items-center gap-2 px-3"
-                            title="Reload DNS (BIND)"
-                            aria-label="Reload DNS"
-                            data-action="reloadDns">
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
+                        title="Reload DNS (BIND)"
+                        aria-label="Reload DNS"
+                        data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block"> Reload DNS</span>
+                        <span class="label">Reload DNS</span>
                     </button>
 
-                    <!-- Reload DNS -->
-                    <button class="btn btn-primary d-flex align-items-center gap-2 px-3"
-                            title="Reload DHCP (Kea)"
-                            aria-label="Reload DHCP"
-                            data-action="reloadDhcp">
+                    <!-- Reload DHCP Desktop -->
+                    <button
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
+                        title="Reload DHCP (Kea)"
+                        aria-label="Reload DHCP"
+                        data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block"> Reload DHCP</span>
+                        <span class="label">Reload DHCP</span>
                     </button>
+
+                    <!-- Mobile Dropdown -->
+                    <div class="dropdown d-md-none">
+                        <button
+                            class="btn btn-primary d-flex align-items-center px-3"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                            <i class="bi bi-three-dots-vertical"></i>
+                        </button>
+
+                        <ul class="dropdown-menu dropdown-menu-end shadow">
+
+                            <!-- Add Host Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Add Host"
+                                    aria-label="Add Host"
+                                    data-bs-toggle="modal" data-bs-target="#addHostModal">
+                                    <i class="bi bi-plus-lg"></i>
+                                    <span>Add Host</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DNS Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DNS (BIND)"
+                                    aria-label="Reload DNS"
+                                    data-action="reloadDns">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DNS</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DHCP Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DHCP (Kea)"
+                                    aria-label="Reload DHCP"
+                                    data-action="reloadDhcp">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DHCP</span>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
 
@@ -207,7 +258,7 @@
                     </th>
 
                     <th data-type="string" data-sortable="false" class="text-center text-nowrap">
-                        Actions <span class="sort-arrow invisible" aria-hidden="true"></span>
+                        Actions
                     </th>
                 </tr>
             </thead>
diff --git a/frontend/hosts.html b/frontend/hosts.html
index 2a3e81b..cbd2103 100644
--- a/frontend/hosts.html
+++ b/frontend/hosts.html
@@ -131,38 +131,88 @@
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Add host -->
+                    <!-- Add host Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Add Host"
                         aria-label="Add Host"
                         data-bs-toggle="modal" data-bs-target="#addHostModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label d-none d-md-block">Add Host</span>
+                        <span class="label">Add Host</span>
                     </button>
 
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Reload DNS -->
+                    <!-- Reload DNS Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Reload DNS (BIND)"
                         aria-label="Reload DNS"
                         data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block">Reload DNS</span>
+                        <span class="label">Reload DNS</span>
                     </button>
 
-                    <!-- Reload DNS -->
+                    <!-- Reload DHCP Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Reload DHCP (Kea)"
                         aria-label="Reload DHCP"
                         data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block">Reload DHCP</span>
+                        <span class="label">Reload DHCP</span>
                     </button>
+
+                    <!-- Mobile Dropdown -->
+                    <div class="dropdown d-md-none">
+                        <button
+                            class="btn btn-primary d-flex align-items-center px-3"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                            <i class="bi bi-three-dots-vertical"></i>
+                        </button>
+
+                        <ul class="dropdown-menu dropdown-menu-end shadow">
+
+                            <!-- Add Host Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Add Host"
+                                    aria-label="Add Host"
+                                    data-bs-toggle="modal" data-bs-target="#addHostModal">
+                                    <i class="bi bi-plus-lg"></i>
+                                    <span>Add Host</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DNS Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DNS (BIND)"
+                                    aria-label="Reload DNS"
+                                    data-action="reloadDns">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DNS</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DHCP Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DHCP (Kea)"
+                                    aria-label="Reload DHCP"
+                                    data-action="reloadDhcp">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DHCP</span>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
 
diff --git a/frontend/leases.html b/frontend/leases.html
index e1f27a7..85fa018 100644
--- a/frontend/leases.html
+++ b/frontend/leases.html
@@ -131,38 +131,88 @@
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Add host -->
+                    <!-- Add host Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Add Host"
                         aria-label="Add Host"
                         data-bs-toggle="modal" data-bs-target="#addHostModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label d-none d-md-block">Add Host</span>
+                        <span class="label">Add Host</span>
                     </button>
 
                     <!-- Separator -->
                     <div class="vr mx-2 d-none d-md-block"></div>
 
-                    <!-- Reload DNS -->
+                    <!-- Reload DNS Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Reload DNS (BIND)"
                         aria-label="Reload DNS"
                         data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block">Reload DNS</span>
+                        <span class="label">Reload DNS</span>
                     </button>
 
-                    <!-- Reload DNS -->
+                    <!-- Reload DHCP Desktop -->
                     <button
-                        class="btn btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Reload DHCP (Kea)"
                         aria-label="Reload DHCP"
                         data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block">Reload DHCP</span>
+                        <span class="label">Reload DHCP</span>
                     </button>
+
+                    <!-- Mobile Dropdown -->
+                    <div class="dropdown d-md-none">
+                        <button
+                            class="btn btn-primary d-flex align-items-center px-3"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                            <i class="bi bi-three-dots-vertical"></i>
+                        </button>
+
+                        <ul class="dropdown-menu dropdown-menu-end shadow">
+
+                            <!-- Add Host Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Add Host"
+                                    aria-label="Add Host"
+                                    data-bs-toggle="modal" data-bs-target="#addHostModal">
+                                    <i class="bi bi-plus-lg"></i>
+                                    <span>Add Host</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DNS Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DNS (BIND)"
+                                    aria-label="Reload DNS"
+                                    data-action="reloadDns">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DNS</span>
+                                </button>
+                            </li>
+
+                            <!-- Reload DHCP Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Reload DHCP (Kea)"
+                                    aria-label="Reload DHCP"
+                                    data-action="reloadDhcp">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span>Reload DHCP</span>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
 
@@ -208,7 +258,7 @@
                     </th>
 
                     <th data-type="string" data-sortable="false" class="text-center text-nowrap">
-                        Actions <span class="sort-arrow invisible" aria-hidden="true"></span>
+                        Actions
                     </th>
                 </tr>
             </thead>
diff --git a/frontend/settings.html b/frontend/settings.html
index 33b0e13..dbf0e75 100644
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -133,22 +133,22 @@
 
                     <!-- Expand -->
                     <button
-                        id="expandAllBtn"
-                        class="btn btn-sm btn-primary d-flex align-items-center gap-2 px-3"
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Expand all groups"
-                        aria-label="Expand all groups">
+                        aria-label="Expand all groups"
+                        id="expandAllBtn">
                         <i class="bi bi-arrows-expand"></i>
-                        <span class="label d-none d-md-block">Expand</span>
+                        <span class="label">Expand</span>
                     </button>
 
                     <!-- Collapse -->
-                    <button 
-                        id="collapseAllBtn"
-                        class="btn btn-sm btn-primary d-flex align-items-center gap-2 px-3"
+                    <button
+                        class="btn btn-primary d-none d-md-flex align-items-center gap-2 px-3"
                         title="Collapse all groups"
-                        aria-label="Collapse all groups">
+                        aria-label="Collapse all groups"
+                        id="collapseAllBtn">
                         <i class="bi bi-arrows-collapse"></i>
-                        <span class="label d-none d-md-block">Collapse</span>
+                        <span class="label">Collapse</span>
                     </button>
 
                     <!-- Separator -->
@@ -156,13 +156,63 @@
 
                     <!-- Restart -->
                     <button
-                        class="btn btn-danger d-flex align-items-center gap-2 px-3"
+                        class="btn btn-danger d-none d-md-flex align-items-center gap-2 px-3"
                         title="Restart system"
                         aria-label="Restart system"
                         data-action="restartApp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block">Restart</span>
+                        <span class="label">Restart</span>
                     </button>
+
+                    <!-- Mobile Dropdown -->
+                    <div class="dropdown d-md-none">
+                        <button
+                            class="btn btn-primary d-flex align-items-center px-3"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                            <i class="bi bi-three-dots-vertical"></i>
+                        </button>
+
+                        <ul class="dropdown-menu dropdown-menu-end shadow">
+
+                            <!-- Expand Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Expand all groups"
+                                    aria-label="Expand all groups"
+                                    id="expandAllBtn">
+                                    <i class="bi bi-arrows-expand"></i>
+                                    <span class="label">Expand</span>
+                                </button>
+                            </li>
+
+                            <!-- Collapse Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-primary w-100 d-flex align-items-center gap-2"
+                                    title="Collapse all groups"
+                                    aria-label="Collapse all groups"
+                                    id="collapseAllBtn">
+                                    <i class="bi bi-arrows-collapse"></i>
+                                    <span class="label">Collapse</span>
+                                </button>
+                            </li>
+
+                            <!-- Restart Mobile -->
+                            <li class="px-2 py-1">
+                                <button
+                                    class="btn btn-danger w-100 d-flex align-items-center gap-2"
+                                    title="Restart system"
+                                    aria-label="Restart system"
+                                    data-action="restartApp">
+                                    <i class="bi bi-arrow-repeat"></i>
+                                    <span class="label">Restart</span>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
 
@@ -196,7 +246,7 @@
                     </th>
 
                     <th data-type="string" data-sortable="false" class="text-center text-nowrap">
-                        Actions <span class="sort-arrow invisible" aria-hidden="true"></span>
+                        Actions
                     </th>
                 </tr>
             </thead>
-- 
2.47.3