From 706f4bea13f3d83aab453ff7ce424ed91022337e Mon Sep 17 00:00:00 2001
From: Sam Oehlert <sam.oehlert@gmail.com>
Date: Thu, 13 Nov 2025 20:41:08 -0600
Subject: [PATCH 1/3] fix(burger-menu): switch to bootstrap 4 classes

we import 4 via CDN and also the rest of the site is written in bootstrap 4.
---
 scram/templates/navbar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scram/templates/navbar.html b/scram/templates/navbar.html
index bee63472..460454db 100644
--- a/scram/templates/navbar.html
+++ b/scram/templates/navbar.html
@@ -10,7 +10,7 @@
       <input class="form-control pl-2 me-2" name="cidr" type="search" placeholder="cidr">
       <button class="btn btn-info mb-2" style="background-color:#2ba6c8!important;" type="submit">Search</button>
     </form>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">

From e51a652eb136c3d78fd0d87ab429972faa6a694f Mon Sep 17 00:00:00 2001
From: Sam Oehlert <sam.oehlert@gmail.com>
Date: Thu, 13 Nov 2025 21:43:24 -0600
Subject: [PATCH 2/3] style(navbar): fix navbar spacing both in wide and
 hamburger sized for the right side list items

---
 scram/templates/navbar.html | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/scram/templates/navbar.html b/scram/templates/navbar.html
index 460454db..349c47ee 100644
--- a/scram/templates/navbar.html
+++ b/scram/templates/navbar.html
@@ -14,34 +14,35 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav ml-auto text-nowrap">
-        <li class="nav-item d-inline mt-2">
-          <a id="entry-list" class="nav-link" href="{% url 'route_manager:entry-list' %}">{% trans "Entries" %}</a>
+      <ul class="navbar-nav flex-column flex-lg-row justify-content-lg-end align-items-lg-center w-100">
+        <li class="nav-item pl-lg-2">
+          <a id="entry-list" class="nav-link py-1 px-lg-1" href="{% url 'route_manager:entry-list' %}">{% trans "Entries" %}</a>
         </li>
         {% if request.user.is_superuser %}
-          <li class="nav-item d-inline mt-2">
-            <a id="admin-page" class="nav-link" href="{% url 'admin:index' %}">{% trans "Admin" %}</a>
+          <li class="nav-item">
+            <a id="admin-page" class="nav-link py-1 px-lg-1" href="{% url 'admin:index' %}">{% trans "Admin" %}</a>
           </li>
         {% endif %}
         {% if user.is_authenticated %}
-          <li class="nav-item d-inline mt-2">
-            <a id="account-home" class="nav-link" href="{% url 'users:detail' user.username %}">{{ user.name }}</a>
+          <li class="nav-item">
+            <a id="account-home" class="nav-link py-1 px-lg-1" href="{% url 'users:detail' user.username %}">{{ user.name }}</a>
           </li>
-          <li class="nav-item d-inline mt-3">
+          <li class="nav-item py-1">
             <span class="badge badge-info badge-pill" style="background-color:#2ba6c8!important;">Blocks:<br>{{ active_block_entries }}</span>
           </li>
-          <li class="nav-item mt-2 d-inline">
+          <li class="nav-item pl-lg-3 pl-0 pt-lg-0 pt-2">
              <form action="{{ logout }}" method="post">
                {% csrf_token %}
-              <button class="btn btn-outline-info ml-2 mb-2" style="outline-color:#2ba6c8!important;" type="submit">Logout</button>
+              <button class="btn btn-outline-info" style="outline-color:#2ba6c8!important;" type="submit">Logout</button>
              </form>
           </li>
         {% else %}
-            <li class="nav-item d-inline mt-3">
+            <li class="nav-item py-1">
               <span class="badge badge-info badge-pill" style="background-color:#2ba6c8!important;">Blocks:<br>{{ active_block_entries }}</span>
             </li>
-           <li class="nav-item mt-2 d-inline">
-            <a class="btn btn-outline-info ml-2 mb-2" style="color:#2ba6c8!important;" role="button" href="{{ login }}">Login</a>          </li>
+           <li class="nav-item pl-lg-3 pl-0 pt-lg-0 pt-2">
+            <a class="btn btn-outline-info" style="color:#2ba6c8!important;" role="button" href="{{ login }}">Login</a>
+          </li>
         {% endif %}
       </ul>
     </div>

From e2f9ee682b9d204321f01d2a08a16e90ec0b302b Mon Sep 17 00:00:00 2001
From: Sam Oehlert <sam.oehlert@gmail.com>
Date: Thu, 13 Nov 2025 21:52:28 -0600
Subject: [PATCH 3/3] fix(main-container): make the main container reactive so
 it fits widthwise in all size windows

---
 scram/templates/route_manager/home.html | 36 ++++++++++++++++---------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/scram/templates/route_manager/home.html b/scram/templates/route_manager/home.html
index fefffcaa..6e945d74 100644
--- a/scram/templates/route_manager/home.html
+++ b/scram/templates/route_manager/home.html
@@ -12,20 +12,30 @@ <h1 class="display-3 text-center text-white font-weight-bold">SCRAM</h1>
   </div>
   {% if readwrite %}
   <div class="d-flex justify-content-center mt-2">
-    <form class="form-inline" action="{% url 'route_manager:add' %}" method="post">
+    <form class="w-100" action="{% url 'route_manager:add' %}" method="post">
       {% csrf_token %}
-      <div class="form-group inline mb-2">
-        <input class="form-control mb-2 mr-2" name="route" placeholder="cidr" type="text">
-        <select class="form-control mb-2 mr-2" name="actiontype">
-          {% for at in entries.keys %}
-            {% if at.available %}
-              <option>{{ at }}</option>
-            {% endif %}
-          {% endfor %}
-        </select>
-        <input class="form-control mb-2 mr-2" name="comment" placeholder="comment" type="text">
-        <input class="form-control mb-2 mr-2" name="expiration" type="datetime-local">
-        <button class="btn btn-info mb-2 ml-2" style="background-color:#2ba6c8!important;" type="submit">Add Entry</button>
+      <div class="form-row align-items-center justify-content-center">
+        <div class="col-auto mb-2">
+          <input class="form-control" name="route" placeholder="cidr" type="text">
+        </div>
+        <div class="col-auto mb-2">
+          <select class="form-control" name="actiontype">
+            {% for at in entries.keys %}
+              {% if at.available %}
+                <option>{{ at }}</option>
+              {% endif %}
+            {% endfor %}
+          </select>
+        </div>
+        <div class="col-auto mb-2">
+          <input class="form-control" name="comment" placeholder="comment" type="text">
+        </div>
+        <div class="col-auto mb-2">
+          <input class="form-control" name="expiration" type="datetime-local">
+        </div>
+        <div class="col-auto mb-2">
+          <button class="btn btn-info" style="background-color:#2ba6c8!important;" type="submit">Add Entry</button>
+        </div>
       </div>
     </form>
   </div>