fixes to top bar to have all icons in the same raw

diff --git a/frontend/aliases.html b/frontend/aliases.html
index da4e7b5f51f3407f8ea4075bebcfd0e8e45c5485..708ad14ae0abb51e9ff094147fcbddd79fdcf327 100644 (file)
--- 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 2826b2c83e2eaa2d966382113b381696b641960a..1d4c19a4eb4bd60b68007f5a0b8feed546c85024 100644 (file)
--- 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 d637dd4a48208ae88ceb7a0012bc7578649d6c48..2a3e81b4d063d265a13faeb3a2e92dc1eee36eac 100644 (file)
--- 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 7616bcba21432c6e0d1a50f796dc100ee51e1f5b..30a1ea56588b5e67b0e68129dd941beb2faede51 100644 (file)
--- 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 5a809f40da6ff38ddd97f49207a4b26b0bc1c980..e1f27a788330fe1d2bbae80c4224dc692c2b598f 100644 (file)
--- 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 b34c911da8292b2730231048ee4284613009e3ea..33b0e138a33b726e74d48d0891d4b9ed4f1d490b 100644 (file)
--- 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>