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

@@ -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">

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>

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">

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">

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>

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">

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">

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;

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">

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>