From 965cf0080cc0cf7a7a7e3d9bd0949abf60eb245c Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Tue, 27 Oct 2026 17:58:59 +0300
Subject: [PATCH] refactor(templates): the page width, headings and paragraphs
 as Bootstrap sets them

Three upstream rules in webvirtcloud.css set every page's layout
against Bootstrap 5.3:
- .container { max-width: 900px } held each page to 900px at any
  screen width, below Bootstrap's own widths. Pages now take
  Bootstrap's container widths up to its lg one, 960px, and stop
  there on wider screens: its xl and xxl widths (1140px, 1320px) leave
  the panel's forms and lists too wide;
- .page-header (margins of 5px 5px 20px 20px) put headings 20px right
  of the content under them; its 14 uses are mb-3, flush with the
  content (one carried Bootstrap 4's mr-auto, now me-auto);
- p { margin: 10px } indented every paragraph 10px from the content
  beside it; paragraphs take Bootstrap's own bottom margin.
webvirtcloud.css keeps only what Bootstrap has no utility for: the
page width cap, the XML editor's place and height, the Tom Select
colour fix, the sortable table headers' arrows, the grouped VM list's
collapsed hosts and the charts' height.
---
 admin/templates/admin/group_list.html       |  2 +-
 admin/templates/admin/tombstone_list.html   |  2 +-
 computes/templates/computes/form.html       |  2 +-
 computes/templates/computes/list.html       |  2 +-
 instances/templates/instances/info_tab.html |  2 +-
 networks/templates/network.html             | 10 +++++-----
 nwfilters/templates/nwfilter.html           |  4 ++--
 static/css/webvirtcloud.css                 | 19 ++++++-------------
 storages/templates/storage.html             |  2 +-
 templates/base.html                         |  2 +-
 10 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/admin/templates/admin/group_list.html b/admin/templates/admin/group_list.html
index a4a0bda6..151ed739 100644
--- a/admin/templates/admin/group_list.html
+++ b/admin/templates/admin/group_list.html
@@ -10,7 +10,7 @@
             {% bs_icon 'plus-circle-fill' %}
         </a>
         {% include 'search_block.html' %}
-        <h1 class="page-header">{% trans "Groups" %}</h1>
+        <h1 class="mb-3">{% trans "Groups" %}</h1>
     </div>
 </div>
 <div class="row">
diff --git a/admin/templates/admin/tombstone_list.html b/admin/templates/admin/tombstone_list.html
index 83c13c5a..46e4e097 100644
--- a/admin/templates/admin/tombstone_list.html
+++ b/admin/templates/admin/tombstone_list.html
@@ -7,7 +7,7 @@
 <div class="row">
     <div class="col-lg-12">
         {% include 'search_block.html' %}
-        <h1 class="page-header">{% trans "Removed VMs" %}</h1>
+        <h1 class="mb-3">{% trans "Removed VMs" %}</h1>
         <p class="text-muted">{% trans "VMs that vanished from their compute. Their owners come back if the same UUID shows up again before the record expires." %}</p>
     </div>
 </div>
diff --git a/computes/templates/computes/form.html b/computes/templates/computes/form.html
index b6375c95..24e8dd67 100644
--- a/computes/templates/computes/form.html
+++ b/computes/templates/computes/form.html
@@ -8,7 +8,7 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-12">
-        <h2 class="page-header">{% if form.instance.pk %}{% trans "Edit Compute" %}{% else %}{% trans "Add Compute" %}{% endif %}</h2>
+        <h2 class="mb-3">{% if form.instance.pk %}{% trans "Edit Compute" %}{% else %}{% trans "Add Compute" %}{% endif %}</h2>
     </div>
 </div>
 <div class="row">
diff --git a/computes/templates/computes/list.html b/computes/templates/computes/list.html
index 1d9e43c7..1009cd12 100644
--- a/computes/templates/computes/list.html
+++ b/computes/templates/computes/list.html
@@ -9,7 +9,7 @@
     <div class="col-lg-12">
         {% include 'create_comp_block.html' %}
         {% include 'search_block.html' %}
-        <h3 class="page-header">{% trans "Computes" %}</h3>
+        <h3 class="mb-3">{% trans "Computes" %}</h3>
     </div>
 </div>
 <div class="row">
diff --git a/instances/templates/instances/info_tab.html b/instances/templates/instances/info_tab.html
index 399a4d78..9f6eac4f 100644
--- a/instances/templates/instances/info_tab.html
+++ b/instances/templates/instances/info_tab.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="tab-pane border border-top-0 p-3" id="osinfo" role="tabpanel">
-    <h3 class="page-header">{% trans "Guest Info" %}</h3>
+    <h3 class="mb-3">{% trans "Guest Info" %}</h3>
     <div id="osinfo-error" class="alert alert-warning d-none" role="alert"></div>
     <dl class="mx-3 row">
         <dt class="col-3">{% trans "Hostname" %}</dt>
diff --git a/networks/templates/network.html b/networks/templates/network.html
index 44c6d4fa..64e1b95f 100644
--- a/networks/templates/network.html
+++ b/networks/templates/network.html
@@ -67,7 +67,7 @@
         </div>
     </div>
     
-    <h5 class="page-header">{% trans "IPv4 Configuration" %}</h5>
+    <h5 class="mb-3">{% trans "IPv4 Configuration" %}</h5>
     
     <dl class="ms-3 row">
         <dt class="col-6">{% trans "IPv4 Forwarding" %}</dt>
@@ -127,7 +127,7 @@
             {% include 'modify_ipv4_fixed_address.html' %}
         {% endif %}
 
-        <h5 class="page-header">{% trans "IPv4 Fixed Addresses" %}</h5>
+        <h5 class="mb-3">{% trans "IPv4 Fixed Addresses" %}</h5>
 
     {% endif %}
     
@@ -189,7 +189,7 @@
         </div>
     {% endif %}
    
-    <h5 class="page-header">{% trans "IPv6 Configuration" %}</h5>
+    <h5 class="mb-3">{% trans "IPv6 Configuration" %}</h5>
 
     <dl class="ms-3 row">
         <dt class="col-6">{% trans "IPv6 Forwarding" %}</dt>
@@ -243,7 +243,7 @@
         {% if state %}
             {% include 'modify_ipv6_fixed_address.html' %}
         {% endif %}
-        <h5 class="page-header">{% trans "IPv6 Fixed Addresses" %}</h5>
+        <h5 class="mb-3">{% trans "IPv6 Fixed Addresses" %}</h5>
     {% endif %}
 
     {% if ipv6_fixed_address %}
@@ -308,7 +308,7 @@
                 {% include 'add_network_qos.html' %}
             </form>
         {% endif %}
-        <h5 class="page-header">{% trans "QoS Configuration" %}</h5>
+        <h5 class="mb-3">{% trans "QoS Configuration" %}</h5>
 
         <div class="col-sm-12">
             <div class="table-responsive">
diff --git a/nwfilters/templates/nwfilter.html b/nwfilters/templates/nwfilter.html
index 713cc30f..f2fed219 100644
--- a/nwfilters/templates/nwfilter.html
+++ b/nwfilters/templates/nwfilter.html
@@ -44,7 +44,7 @@
     </div>
     <div class="row">
         <div class="col-lg-12">
-        <h5 class="page-header mr-auto">{% trans "Filter References" %}
+        <h5 class="mb-3 me-auto">{% trans "Filter References" %}
             <form class="float-end" method="post" role="form" aria-label="Add NWFilter form">{% csrf_token %}
                 <div class="input-group">
                     <label class="input-group-text" for="nwfilter_select">{% trans "Filter" %}</label>
@@ -97,7 +97,7 @@
 
 
     {% include 'add_nwf_rule.html' %}
-    <h5 class="page-header">{% trans "Rules" %}</h5>
+    <h5 class="mb-3">{% trans "Rules" %}</h5>
 
         <div class="table-responsive">
             <table class="table table-hover align-middle">
diff --git a/static/css/webvirtcloud.css b/static/css/webvirtcloud.css
index bd3f7eb1..07d76056 100644
--- a/static/css/webvirtcloud.css
+++ b/static/css/webvirtcloud.css
@@ -4,14 +4,12 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-/* Global Styles */
-
-.container {
-    max-width: 900px;
-}
-
-.page-header {
-    margin: 5px 5px 20px 20px;
+/* pages stop at Bootstrap's lg container width (960px): its xl and xxl
+   widths (1140px, 1320px) leave the panel's forms and lists too wide */
+@media (min-width: 1200px) {
+    .container {
+        max-width: 960px;
+    }
 }
 
 #editor {
@@ -62,11 +60,6 @@ th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
     display: none;
 }
 
-p {
-    display: block;
-    margin: 10px 10px 10px 10px;
-}
-
 /* a live chart (static/js/charts.js) fills the width of its card at this height */
 .chart {
     height: 160px;
diff --git a/storages/templates/storage.html b/storages/templates/storage.html
index 47d9f70d..de7d4c65 100644
--- a/storages/templates/storage.html
+++ b/storages/templates/storage.html
@@ -66,7 +66,7 @@
     {% if state %}
         <div class="clearfix">
             {% include 'search_block.html' %}
-            <h5 class="page-header">{% trans "Volumes" %}</h5>
+            <h5 class="mb-3">{% trans "Volumes" %}</h5>
         </div>
         {% if volumes  %}
             <div class="table-responsive">
diff --git a/templates/base.html b/templates/base.html
index e580349c..1c5ac447 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -47,7 +47,7 @@
             {% block page_heading_extra %}
             {% endblock page_heading_extra %}
           </div>
-          <h3 class="ms-0 page-header">
+          <h3 class="mb-3">
             {% block page_heading %}
             {% endblock page_heading %}
           </h3>