From 170f4d283de0c0a9183a609c2d691e4701d552fe Mon Sep 17 00:00:00 2001
From: Blackwhitebear8 <blackwhitebear8@git@pixelhosting.nl>
Date: Fri, 31 Oct 2025 20:03:29 +0100
Subject: [PATCH] Update templates/bgp.html

---
 templates/bgp.html | 96 ++++++++++++++++++++++++----------------------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/templates/bgp.html b/templates/bgp.html
index e7a0a4c..848910d 100644
--- a/templates/bgp.html
+++ b/templates/bgp.html
@@ -7,7 +7,7 @@
 {% block content %}
     <script src="../static/js/pages/bgp.js"></script>
     <section id="bgp-v4">
-      <p id="ipv4Summary">Loading summary...</p>
+      <h2 id="ipv4Summary">Loading summary...</h2>
           <div class="input-group mb-3">
               <input type="text" id="ipv4Search" class="form-control" placeholder="Search in IPv4 table..." onkeyup="filterTable('ipv4Search', 'ipv4Table')">
               <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshBGPTable()">
@@ -16,32 +16,34 @@
                   Refresh data
               </button>
           </div>
-      <table class="striped" id="ipv4Table">
-        <thead>
-          <tr>
-            <th class="sortable" onclick="sortTable('ipv4Table', 0, this)">Neighbor Address <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv4Table', 1, this)">ASN <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv4Table', 2, this)">Up/Down <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv4Table', 3, this)">State/Prefix Received <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv4Table', 4, this)">Prefix Sent <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv4Table', 5, this)">Description <span class="sort-arrow"></span></th>
-            <th>Actions</th>
-        </thead>
-        <tbody id="ipv4TableBody">
-          <tr>
-            <td colspan="12" class="text-center">
-              <div class="spinner-border text-primary" role="status">
-                <span class="visually-hidden">Loading...</span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <p><a href="/bgp/json">JSON version</a></p>
+      
+      <div class="table-responsive">
+        <table class="striped" id="ipv4Table">
+          <thead>
+            <tr>
+              <th class="sortable" onclick="sortTable('ipv4Table', 0, this)">Neighbor Address <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv4Table', 1, this)">ASN <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv4Table', 2, this)">Up/Down <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv4Table', 3, this)">State/Prefix Received <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv4Table', 4, this)">Prefix Sent <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv4Table', 5, this)">Description <span class="sort-arrow"></span></th>
+              <th>Actions</th>
+          </thead>
+          <tbody id="ipv4TableBody">
+            <tr>
+              <td colspan="12" class="text-center">
+                <div class="spinner-border text-primary" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div> <p><a href="/bgp/json">JSON version</a></p>
     </section>
 
     <section id="bgp-v6">
-      <p id="ipv6Summary">Loading summary...</p>
+      <h2 id="ipv6Summary">Loading summary...</h2>
           <div class="input-group mb-3">
               <input type="text" id="ipv6Search" class="form-control" placeholder="Search in IPv6 table..." onkeyup="filterTable('ipv6Search', 'ipv6Table')">
               <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshBGPTable()">
@@ -50,27 +52,29 @@
                   Refresh data
               </button>
           </div>
-      <table class="striped" id="ipv6Table">
-        <thead>
-          <tr>
-            <th class="sortable" onclick="sortTable('ipv6Table', 0, this)">Neighbor Address <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv6Table', 2, this)">ASN <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv6Table', 8, this)">Up/Down <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv6Table', 9, this)">State/Prefix Received <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv6Table', 10, this)">Prefix Sent <span class="sort-arrow"></span></th>
-            <th class="sortable" onclick="sortTable('ipv6Table', 11, this)">Description <span class="sort-arrow"></span></th>
-            <th>Actions</th>
-        </thead>
-        <tbody id="ipv6TableBody">
-          <tr>
-            <td colspan="12" class="text-center">
-              <div class="spinner-border text-primary" role="status">
-                <span class="visually-hidden">Loading...</span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <p><a href="/bgp/json">JSON version</a></p>
+
+      <div class="table-responsive">
+        <table class="striped" id="ipv6Table">
+          <thead>
+            <tr>
+              <th class="sortable" onclick="sortTable('ipv6Table', 0, this)">Neighbor Address <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv6Table', 2, this)">ASN <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv6Table', 8, this)">Up/Down <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv6Table', 9, this)">State/Prefix Received <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv6Table', 10, this)">Prefix Sent <span class="sort-arrow"></span></th>
+              <th class="sortable" onclick="sortTable('ipv6Table', 11, this)">Description <span class="sort-arrow"></span></th>
+              <th>Actions</th>
+          </thead>
+          <tbody id="ipv6TableBody">
+            <tr>
+              <td colspan="12" class="text-center">
+                <div class="spinner-border text-primary" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div> <p><a href="/bgp/json">JSON version</a></p>
     </section>
 {% endblock %}
\ No newline at end of file