From 05ff2544b9543bf13fac21b2438352364a6368a8 Mon Sep 17 00:00:00 2001
From: Giorgio Ravera <giorgio.ravera@gmail.com>
Date: Wed, 10 Jun 2026 14:35:45 +0200
Subject: [PATCH] fixes to top bar to have all icons in the same raw

---
 frontend/aliases.html  | 45 +++++++++++++++++++++---------------------
 frontend/devices.html  |  8 ++++----
 frontend/hosts.html    | 45 +++++++++++++++++++++---------------------
 frontend/index.html    |  2 +-
 frontend/leases.html   | 45 +++++++++++++++++++++---------------------
 frontend/settings.html | 43 +++++++++++++++++++++-------------------
 6 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/frontend/aliases.html b/frontend/aliases.html
index da4e7b5..708ad14 100644
--- a/frontend/aliases.html
+++ b/frontend/aliases.html
@@ -93,7 +93,7 @@
             <div class="row g-2 align-items-center">
 
                 <!-- Title -->
-                <div class="col-12 col-md-auto">
+                <div class="col-auto col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
                         <span class="title-icon"><i class="bi bi-diagram-2"></i></span>
                         <span class="section-title">Aliases List</span>
@@ -101,10 +101,10 @@
                 </div>
 
                 <!-- Spacer -->
-                <div class="col d-none d-md-block"></div>
+                <div class="col"></div>
 
                 <!-- Search Desktop -->
-                <div class="col-12 col-md-auto d-none d-md-block">
+                <div class="col-auto col-md-auto d-none d-md-block">
                     <div class="search-wrapper">
                         <input
                             type="text"
@@ -116,14 +116,14 @@
                 </div>
 
                 <!-- Bottoni -->
-                <div class="col-12 col-md-auto d-flex align-items-center gap-2 flex-wrap">
+                <div class="col-auto col-md-auto d-flex align-items-center gap-2 flex-nowrap">
 
                     <!-- 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>
@@ -133,12 +133,12 @@
 
                     <!-- Add alias -->
                     <button
-                            class="btn btn-primary d-flex align-items-center gap-2 px-3"
-                            title="Add Alias"
-                            aria-label="Add Alias"
-                            data-bs-toggle="modal" data-bs-target="#addAliasModal">
+                        class="btn btn-primary d-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 d-none d-md-block">Add Alias</span>
                     </button>
 
                     <!-- Separator -->
@@ -146,21 +146,22 @@
 
                     <!-- Reload DNS -->
                     <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-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 d-none d-md-block">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">
+                    <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">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block"> Reload DHCP</span>
+                        <span class="label d-none d-md-block">Reload DHCP</span>
                     </button>
                 </div>
             </div>
diff --git a/frontend/devices.html b/frontend/devices.html
index 2826b2c..1d4c19a 100644
--- a/frontend/devices.html
+++ b/frontend/devices.html
@@ -93,7 +93,7 @@
             <div class="row g-2 align-items-center">
 
                 <!-- Title -->
-                <div class="col-12 col-md-auto">
+                <div class="col-auto col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
                         <span class="title-icon"><i class="bi bi-diagram-3-fill"></i></span>
                         <span class="section-title">Devices List</span>
@@ -101,10 +101,10 @@
                 </div>
 
                 <!-- Spacer -->
-                <div class="col d-none d-md-block"></div>
+                <div class="col"></div>
 
                 <!-- Search Desktop -->
-                <div class="col-12 col-md-auto d-none d-md-block">
+                <div class="col-auto col-md-auto d-none d-md-block">
                     <div class="search-wrapper">
                         <input
                             type="text"
@@ -116,7 +116,7 @@
                 </div>
 
                 <!-- Bottoni -->
-                <div class="col-12 col-md-auto d-flex align-items-center gap-2 flex-wrap">
+                <div class="col-auto col-md-auto d-flex align-items-center gap-2 flex-nowrap">
 
                     <!-- Search Mobile -->
                     <div class="col-auto d-md-none">
diff --git a/frontend/hosts.html b/frontend/hosts.html
index d637dd4..2a3e81b 100644
--- a/frontend/hosts.html
+++ b/frontend/hosts.html
@@ -93,7 +93,7 @@
             <div class="row g-2 align-items-center">
 
                 <!-- Title -->
-                <div class="col-12 col-md-auto">
+                <div class="col-auto col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
                         <span class="title-icon"><i class="bi bi-hdd-network"></i></span>
                         <span class="section-title">Hosts List</span>
@@ -101,10 +101,10 @@
                 </div>
 
                 <!-- Spacer -->
-                <div class="col d-none d-md-block"></div>
+                <div class="col"></div>
 
                 <!-- Search Desktop -->
-                <div class="col-12 col-md-auto d-none d-md-block">
+                <div class="col-auto col-md-auto d-none d-md-block">
                     <div class="search-wrapper">
                         <input
                             type="text"
@@ -116,14 +116,14 @@
                 </div>
 
                 <!-- Bottoni -->
-                <div class="col-12 col-md-auto d-flex align-items-center gap-2 flex-wrap">
+                <div class="col-auto col-md-auto d-flex align-items-center gap-2 flex-nowrap">
 
                     <!-- 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>
@@ -133,12 +133,12 @@
 
                     <!-- Add host -->
                     <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-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 d-none d-md-block">Add Host</span>
                     </button>
 
                     <!-- Separator -->
@@ -146,21 +146,22 @@
 
                     <!-- Reload DNS -->
                     <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-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 d-none d-md-block">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">
+                    <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">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block"> Reload DHCP</span>
+                        <span class="label d-none d-md-block">Reload DHCP</span>
                     </button>
                 </div>
             </div>
diff --git a/frontend/index.html b/frontend/index.html
index 7616bcb..30a1ea5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -85,7 +85,7 @@
             <div class="row g-2 align-items-center">
 
                 <!-- Title -->
-                <div class="col-12 col-md-auto">
+                <div class="col-auto col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
                         <span class="title-icon"><i class="bi bi-grid me-2"></i></span>
                         <span class="section-title">Dashboard</span>
diff --git a/frontend/leases.html b/frontend/leases.html
index 5a809f4..e1f27a7 100644
--- a/frontend/leases.html
+++ b/frontend/leases.html
@@ -93,7 +93,7 @@
             <div class="row g-2 align-items-center">
 
                 <!-- Title -->
-                <div class="col-12 col-md-auto">
+                <div class="col-auto col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
                         <span class="title-icon"><i class="bi bi-broadcast"></i></span>
                         <span class="section-title">DHCP Leases</span>
@@ -101,10 +101,10 @@
                 </div>
 
                 <!-- Spacer -->
-                <div class="col d-none d-md-block"></div>
+                <div class="col"></div>
 
                 <!-- Search Desktop -->
-                <div class="col-12 col-md-auto d-none d-md-block">
+                <div class="col-auto col-md-auto d-none d-md-block">
                     <div class="search-wrapper">
                         <input
                             type="text"
@@ -116,14 +116,14 @@
                 </div>
 
                 <!-- Bottoni -->
-                <div class="col-12 col-md-auto d-flex align-items-center gap-2 flex-wrap">
+                <div class="col-auto col-md-auto d-flex align-items-center gap-2 flex-nowrap">
 
                     <!-- 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>
@@ -133,12 +133,12 @@
 
                     <!-- Add host -->
                     <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-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 d-none d-md-block">Add Host</span>
                     </button>
 
                     <!-- Separator -->
@@ -146,21 +146,22 @@
 
                     <!-- Reload DNS -->
                     <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-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 d-none d-md-block">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">
+                    <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">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label d-none d-md-block"> Reload DHCP</span>
+                        <span class="label d-none d-md-block">Reload DHCP</span>
                     </button>
                 </div>
             </div>
diff --git a/frontend/settings.html b/frontend/settings.html
index b34c911..33b0e13 100644
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -93,18 +93,18 @@
             <div class="row g-2 align-items-center">
 
                 <!-- Title -->
-                <div class="col-12 col-md-auto">
+                <div class="col-auto col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
                         <span class="title-icon"><i class="bi bi-gear"></i></span>
-                        <span class="section-title">Configuration Parameter List</span>
+                        <span class="section-title">Settings</span>
                     </h2>
                 </div>
 
                 <!-- Spacer -->
-                <div class="col d-none d-md-block"></div>
+                <div class="col"></div>
 
                 <!-- Search Desktop -->
-                <div class="col-12 col-md-auto d-none d-md-block">
+                <div class="col-auto col-md-auto d-none d-md-block">
                     <div class="search-wrapper">
                         <input
                             type="text"
@@ -116,14 +116,14 @@
                 </div>
 
                 <!-- Bottoni -->
-                <div class="col-12 col-md-auto d-flex align-items-center gap-2 flex-wrap">
+                <div class="col-auto col-md-auto d-flex align-items-center gap-2 flex-nowrap">
 
                     <!-- 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>
@@ -132,19 +132,21 @@
                     <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Expand -->
-                    <button id="expandAllBtn"
-                            class="btn btn-sm btn-primary d-flex align-items-center gap-2 px-3"
-                            title="Expand all groups"
-                            aria-label="Expand all groups">
+                    <button
+                        id="expandAllBtn"
+                        class="btn btn-sm btn-primary d-flex align-items-center gap-2 px-3"
+                        title="Expand all groups"
+                        aria-label="Expand all groups">
                         <i class="bi bi-arrows-expand"></i>
                         <span class="label d-none d-md-block">Expand</span>
                     </button>
 
                     <!-- Collapse -->
-                    <button id="collapseAllBtn"
-                            class="btn btn-sm btn-primary d-flex align-items-center gap-2 px-3"
-                            title="Collapse all groups"
-                            aria-label="Collapse all groups">
+                    <button 
+                        id="collapseAllBtn"
+                        class="btn btn-sm btn-primary d-flex align-items-center gap-2 px-3"
+                        title="Collapse all groups"
+                        aria-label="Collapse all groups">
                         <i class="bi bi-arrows-collapse"></i>
                         <span class="label d-none d-md-block">Collapse</span>
                     </button>
@@ -153,10 +155,11 @@
                     <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Restart -->
-                    <button class="btn btn-danger d-flex align-items-center gap-2 px-3"
-                            title="Restart system"
-                            aria-label="Restart system"
-                            data-action="restartApp">
+                    <button
+                        class="btn btn-danger d-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>
                     </button>
-- 
2.47.3