From c1e30aeb7f83c85ffe556142078637f73a02dd2f Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Tue, 27 Oct 2026 16:50:47 +0300
Subject: [PATCH] refactor(templates): Bootstrap's components instead of the
 panel's own CSS for capacity, steps and disclosures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fork's own rules in webvirtcloud.css redid what Bootstrap 5.3 has:
- the capacity bars (.cap-*) are Bootstrap progress bars: the memory a
  .progress-stacked of running VMs' memory and shut-off VMs' (at half
  opacity), each segment a progressbar with its amount as its value
  text; the pool bars a thin .progress. The line where the host's
  memory ends goes: the share above the bar says it, red when over;
- the status dot (.compute-dot) is a rounded-circle, the big figures
  (.compute-ratio) fs-4, the Computes table's cell padding py-3;
- the steps of creating a VM (.create-steps) are a breadcrumb with "›"
  as its divider;
- the XML and Advanced disclosures (.disclosure with a turning chevron)
  are Bootstrap accordions;
- the chosen volumes and networks (.row-list) are list-unstyled, their
  names text-break;
- a chart's container is position-relative by utility; its height stays.
Dead rules go too: .netIN, .netOUT, .diskRD, .diskWR, .input-xs and
.bottom-bar-margin had no users.
---
 .../templates/computes/capacity_memory.html   |  19 ++-
 .../templates/computes/capacity_vcpus.html    |   2 +-
 computes/templates/computes/list.html         |  18 +--
 computes/templates/computes/pool_bar.html     |   5 +-
 computes/templates/overview.html              |  14 +--
 computes/views.py                             |  10 +-
 instances/templates/create_instance_w1.html   |  14 +--
 instances/templates/create_instance_w2.html   |  26 ++--
 instances/templates/create_steps.html         |  20 +--
 instances/templates/instances/stats_tab.html  |   8 +-
 static/css/webvirtcloud.css                   | 119 +-----------------
 11 files changed, 75 insertions(+), 180 deletions(-)

diff --git a/computes/templates/computes/capacity_memory.html b/computes/templates/computes/capacity_memory.html
index 263a8aea..03d121fa 100644
--- a/computes/templates/computes/capacity_memory.html
+++ b/computes/templates/computes/capacity_memory.html
@@ -1,11 +1,18 @@
 {% load i18n %}
 {# the memory a host has given its VMs: given, from views.shown_capacity #}
-<div class="compute-ratio {% if given.bar.over %}text-danger{% elif given.memory_percent > 90 %}text-warning-emphasis{% endif %}">{{ given.memory_percent }} %</div>
+<div class="fs-4 lh-sm {% if given.bar.over %}text-danger{% elif given.memory_percent > 90 %}text-warning-emphasis{% endif %}">{{ given.memory_percent }} %</div>
 <div class="small text-body-secondary mb-1">{{ given.assigned.all|filesizeformat }} / {{ given.memory|filesizeformat }}</div>
-<div class="cap-bar" role="img" aria-label="{% blocktrans with percent=given.memory_percent %}{{ percent }}% of the host's memory given{% endblocktrans %}"
-     title="{% trans "Dark: running VMs. Light: shut-off VMs, which take their memory again when they start. Line: the host's memory." %}">
-    <div class="cap-running {% if given.bar.over %}bg-danger{% endif %}" style="width: {{ given.bar.running|stringformat:".1f" }}%"></div>
-    <div class="cap-stopped {% if given.bar.over %}bg-danger{% endif %}" style="width: {{ given.bar.stopped|stringformat:".1f" }}%"></div>
-    <div class="cap-host" style="left: {{ given.bar.host|stringformat:".1f" }}%"></div>
+{# running VMs' memory, then shut-off VMs', on a scale that holds the host's memory or all given, whichever is larger #}
+<div class="progress-stacked" style="--bs-progress-height: 0.6rem;" title="{% trans "Dark: running VMs. Light: shut-off VMs, which take their memory again when they start." %}">
+    <div class="progress" role="progressbar" style="width: {{ given.bar.running|stringformat:".1f" }}%"
+         aria-label="{% trans "Memory of running VMs" %}" aria-valuenow="{{ given.bar.running|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
+         aria-valuetext="{% blocktrans with running=given.assigned.running|filesizeformat memory=given.memory|filesizeformat %}{{ running }} of the host's {{ memory }}{% endblocktrans %}">
+        <div class="progress-bar {% if given.bar.over %}bg-danger{% else %}bg-primary{% endif %}"></div>
+    </div>
+    <div class="progress" role="progressbar" style="width: {{ given.bar.stopped|stringformat:".1f" }}%"
+         aria-label="{% trans "Memory of shut-off VMs" %}" aria-valuenow="{{ given.bar.stopped|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
+         aria-valuetext="{% blocktrans with stopped=given.assigned.stopped|filesizeformat memory=given.memory|filesizeformat %}{{ stopped }} of the host's {{ memory }}{% endblocktrans %}">
+        <div class="progress-bar {% if given.bar.over %}bg-danger{% else %}bg-primary{% endif %} bg-opacity-50"></div>
+    </div>
 </div>
 <div class="small text-body-secondary mt-1">{% blocktrans with running=given.assigned.running|filesizeformat %}{{ running }} running{% endblocktrans %}</div>
diff --git a/computes/templates/computes/capacity_vcpus.html b/computes/templates/computes/capacity_vcpus.html
index 802fe368..11c29843 100644
--- a/computes/templates/computes/capacity_vcpus.html
+++ b/computes/templates/computes/capacity_vcpus.html
@@ -1,5 +1,5 @@
 {% load i18n %}
 {# the vCPUs a host has given its VMs: given, what its list cell and its overview show #}
-<div class="compute-ratio {% if given.ratio > 4 %}text-danger{% elif given.ratio > 2 %}text-warning-emphasis{% endif %}">{{ given.ratio|floatformat:1 }}:1</div>
+<div class="fs-4 lh-sm {% if given.ratio > 4 %}text-danger{% elif given.ratio > 2 %}text-warning-emphasis{% endif %}">{{ given.ratio|floatformat:1 }}:1</div>
 <div class="small text-body-secondary">{% blocktrans count counter=given.vcpus.all %}{{ counter }} vCPU{% plural %}{{ counter }} vCPUs{% endblocktrans %} {% blocktrans count counter=given.cpus %}on {{ counter }} CPU{% plural %}on {{ counter }} CPUs{% endblocktrans %}</div>
 <div class="small text-body-secondary">{% blocktrans with running=given.vcpus.running %}{{ running }} running{% endblocktrans %}</div>
diff --git a/computes/templates/computes/list.html b/computes/templates/computes/list.html
index 95d77942..1d9e43c7 100644
--- a/computes/templates/computes/list.html
+++ b/computes/templates/computes/list.html
@@ -23,7 +23,7 @@
         <div class="col-lg-12">
             {# position-relative: the hidden status texts are positioned within it, not the page #}
             <div class="table-responsive position-relative">
-                <table class="table align-middle compute-list" data-sortable>
+                <table class="table align-middle" data-sortable>
                     <thead>
                         <tr>
                             <th scope="col">{% trans "Host" %}</th>
@@ -37,13 +37,13 @@
                     {% for compute in computes %}
                         {% with given=compute.shown_capacity %}
                         <tr>
-                            <td>
+                            <td class="py-3">
                                 <div class="d-flex align-items-baseline gap-2">
                                     {% if compute.status is True %}
-                                        <span class="compute-dot bg-success" title="{% trans "Connected" %}"></span>
+                                        <span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-success" title="{% trans "Connected" %}" aria-hidden="true"></span>
                                         <span class="visually-hidden">{% trans "Connected" %}</span>
                                     {% else %}
-                                        <span class="compute-dot bg-danger" title="{% trans "Not Connected" %}"></span>
+                                        <span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-danger" title="{% trans "Not Connected" %}" aria-hidden="true"></span>
                                         <span class="visually-hidden">{% trans "Not Connected" %}</span>
                                     {% endif %}
                                     <span class="fw-semibold">{{ compute.name }}</span>
@@ -54,19 +54,19 @@
                                 {% endif %}
                             </td>
                             {% if given %}
-                            <td data-sort="{{ given.ratio|stringformat:".2f" }}">
+                            <td class="py-3" data-sort="{{ given.ratio|stringformat:".2f" }}">
                                 {% include "computes/capacity_vcpus.html" %}
                             </td>
-                            <td data-sort="{{ given.memory_percent }}" class="compute-memory">
+                            <td class="py-3" data-sort="{{ given.memory_percent }}">
                                 {% include "computes/capacity_memory.html" %}
                             </td>
-                            <td class="compute-storage">
+                            <td class="py-3">
                                 {% include "computes/capacity_storage.html" %}
                             </td>
                             {% else %}
-                            <td colspan="3" class="small text-body-secondary">{% if compute.status is True %}{% trans "The capacity could not be read." %}{% else %}{% trans "No capacity while the host cannot be reached." %}{% endif %}</td>
+                            <td colspan="3" class="py-3 small text-body-secondary">{% if compute.status is True %}{% trans "The capacity could not be read." %}{% else %}{% trans "No capacity while the host cannot be reached." %}{% endif %}</td>
                             {% endif %}
-                            <td class="text-end">
+                            <td class="py-3 text-end">
                                 <div class="btn-group">
                                     {# a host the panel cannot reach opens too: its page says why #}
                                     <a class="btn {% if compute.status is True %}btn-success{% else %}btn-light{% endif %}" title="{% trans "Overview" %}" href="{% url 'overview' compute.id %}">{% bs_icon 'eye-fill' %}</a>
diff --git a/computes/templates/computes/pool_bar.html b/computes/templates/computes/pool_bar.html
index 46c2fd3f..ad873d01 100644
--- a/computes/templates/computes/pool_bar.html
+++ b/computes/templates/computes/pool_bar.html
@@ -1,6 +1,7 @@
 {% load i18n %}
 <div class="small">{{ pool.name }}</div>
-<div class="cap-bar cap-thin my-1" role="img" aria-label="{% blocktrans with name=pool.name percent=pool.used_percent|floatformat:0 %}{{ name }} {{ percent }}% used{% endblocktrans %}">
-    <div class="cap-running {% if pool.used_percent > 90 %}bg-danger{% elif pool.used_percent > 75 %}bg-warning{% endif %}" style="width: {{ pool.used_percent|stringformat:".1f" }}%"></div>
+<div class="progress my-1" role="progressbar" style="--bs-progress-height: 0.3rem;"
+     aria-label="{% blocktrans with name=pool.name %}{{ name }} used{% endblocktrans %}" aria-valuenow="{{ pool.used_percent|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar {% if pool.used_percent > 90 %}bg-danger{% elif pool.used_percent > 75 %}bg-warning{% endif %}" style="width: {{ pool.used_percent|stringformat:".1f" }}%"></div>
 </div>
 <div class="small text-body-secondary">{% blocktrans with free=pool.free|filesizeformat size=pool.size|filesizeformat %}{{ free }} free of {{ size }}{% endblocktrans %}</div>
diff --git a/computes/templates/overview.html b/computes/templates/overview.html
index 31b27aff..5588fd3d 100644
--- a/computes/templates/overview.html
+++ b/computes/templates/overview.html
@@ -16,9 +16,9 @@
 <div id="host_status" class="d-flex flex-wrap align-items-baseline column-gap-3 text-body-secondary mb-3">
     <span>
         {% if connected %}
-            <span class="compute-dot bg-success" aria-hidden="true"></span> <span class="text-body">{% trans "Connected" %}</span>
+            <span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-success" aria-hidden="true"></span> <span class="text-body">{% trans "Connected" %}</span>
         {% else %}
-            <span class="compute-dot bg-danger" aria-hidden="true"></span> <span class="text-body">{% trans "Not connected" %}</span>
+            <span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-danger" aria-hidden="true"></span> <span class="text-body">{% trans "Not connected" %}</span>
         {% endif %}
     </span>
     <span class="text-break">{{ compute.hostname }}</span>
@@ -45,7 +45,7 @@
         <div class="card h-100">
             <div class="card-header">{% bs_icon 'server' %} {% trans "VMs" %}</div>
             <div class="card-body">
-            <div class="compute-ratio">{{ given.vm_count }}</div>
+            <div class="fs-4 lh-sm">{{ given.vm_count }}</div>
             <div class="small text-body-secondary">
                 {% blocktrans with running=given.vms.running shutoff=given.vms.shutoff %}{{ running }} running, {{ shutoff }} shut off{% endblocktrans %}{% if given.vms.paused %}, {% blocktrans with paused=given.vms.paused %}{{ paused }} paused{% endblocktrans %}{% endif %}{% if given.vms.other %}, {% blocktrans with other=given.vms.other %}{{ other }} other{% endblocktrans %}{% endif %}
             </div>
@@ -64,7 +64,7 @@
     <div class="col">
         <div class="card h-100">
             <div class="card-header">{% bs_icon 'memory' %} {% trans "Memory" %}</div>
-            <div class="card-body compute-memory">
+            <div class="card-body">
             {% include "computes/capacity_memory.html" %}
             </div>
         </div>
@@ -72,7 +72,7 @@
     <div class="col">
         <div class="card h-100">
             <div class="card-header">{% bs_icon 'device-hdd' %} {% trans "Storage" %}</div>
-            <div class="card-body compute-storage">
+            <div class="card-body">
             {% include "computes/capacity_storage.html" %}
             <a class="small" href="{% url 'storages' compute.id %}">{% trans "Storages" %} &rarr;</a>
             </div>
@@ -91,7 +91,7 @@
                 <span>{% bs_icon 'speedometer2' %} {% trans "CPU in use" %}</span> <span id="cpu_now" class="fw-semibold">&ndash;</span>
             </div>
             <div class="card-body">
-            <div class="chart"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU in use, recent readings" %}"></canvas></div>
+            <div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU in use, recent readings" %}"></canvas></div>
             </div>
         </div>
     </div>
@@ -101,7 +101,7 @@
                 <span>{% bs_icon 'memory' %} {% trans "Memory in use" %}</span> <span id="mem_now" class="fw-semibold">&ndash;</span>
             </div>
             <div class="card-body">
-            <div class="chart"><canvas id="memChart" role="img" aria-label="{% trans "Memory in use, recent readings" %}"></canvas></div>
+            <div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory in use, recent readings" %}"></canvas></div>
             </div>
         </div>
     </div>
diff --git a/computes/views.py b/computes/views.py
index 59508bc6..827e7320 100644
--- a/computes/views.py
+++ b/computes/views.py
@@ -35,13 +35,13 @@ def shown_capacity(compute):
     be read."""
     given = compute.capacity
     if given:
-        # the memory bar: running and shut-off VMs' memory, and a mark at the
-        # host's memory, on a scale that holds whichever is larger
+        # the memory bar: running and shut-off VMs' memory, on a scale that
+        # holds the host's memory or all given, whichever is larger
         assigned, memory = given["assigned"], given["memory"]
+        assigned["stopped"] = assigned["all"] - assigned["running"]
         scale = max(assigned["all"], memory) or 1
-        given["bar"] = {"running": assigned["running"] * 100 / scale,
-                        "stopped": (assigned["all"] - assigned["running"]) * 100 / scale,
-                        "host": memory * 100 / scale, "over": assigned["all"] > memory}
+        given["bar"] = {"running": assigned["running"] * 100 / scale, "stopped": assigned["stopped"] * 100 / scale,
+                        "over": assigned["all"] > memory}
         given["memory_percent"] = round(assigned["all"] * 100 / memory) if memory else 0
         given["vm_count"] = sum(given["vms"].values())
         # the default pool (else the first) shows; the others (a host may
diff --git a/instances/templates/create_instance_w1.html b/instances/templates/create_instance_w1.html
index 5e01a09a..72bc2da0 100644
--- a/instances/templates/create_instance_w1.html
+++ b/instances/templates/create_instance_w1.html
@@ -44,16 +44,16 @@
             <button class="btn btn-primary" type="button" id="next" disabled>{% trans "Next" %}</button>
         </div>
 
-        <section class="card mb-3" aria-labelledby="xml-heading">
-            <div class="card-body">
-                <h2 class="h5 card-title mb-0" id="xml-heading">
-                    <button class="btn p-0 border-0 text-body fw-medium w-100 text-start focus-ring disclosure" type="button" data-bs-toggle="collapse" data-bs-target="#from-xml"
+        <section class="accordion mb-3" aria-labelledby="xml-heading">
+            <div class="accordion-item">
+                <h2 class="accordion-header" id="xml-heading">
+                    <button class="accordion-button{% if not xml_error %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#from-xml"
                             aria-expanded="{% if xml_error %}true{% else %}false{% endif %}" aria-controls="from-xml">
-                        {% bs_icon 'chevron-down' %} {% trans "Or define it from XML" %}
+                        {% trans "Or define it from XML" %}
                     </button>
                 </h2>
-                <div class="collapse{% if xml_error %} show{% endif %}" id="from-xml">
-                    <form method="post" class="pt-3" aria-label="{% trans "Create instance from XML" %}">{% csrf_token %}
+                <div class="accordion-collapse collapse{% if xml_error %} show{% endif %}" id="from-xml">
+                    <form method="post" class="accordion-body" aria-label="{% trans "Create instance from XML" %}">{% csrf_token %}
                         {% if xml_error %}<div class="alert alert-danger form-errors" role="alert">{{ xml_error }}</div>{% endif %}
                         <input type="hidden" name="dom_xml" value="{{ xml }}">
                         <div class="xmlheight mb-3"><textarea id="editor" aria-label="{% trans "Domain XML" %}">{{ xml }}</textarea></div>
diff --git a/instances/templates/create_instance_w2.html b/instances/templates/create_instance_w2.html
index d981103a..399ae454 100644
--- a/instances/templates/create_instance_w2.html
+++ b/instances/templates/create_instance_w2.html
@@ -18,8 +18,6 @@
         /* the chosen card by its border only: the Bootswatch dark themes keep light "subtle" backgrounds */
         .source-option:has(input:checked) { border-color: var(--bs-primary) !important; box-shadow: inset 0 0 0 1px var(--bs-primary); }
         .source-option:has(input:focus-visible) { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
-        .row-list { list-style: none; padding-left: 0; }
-        .row-list li { overflow-wrap: anywhere; }
     </style>
 {% endblock %}
 
@@ -171,7 +169,7 @@
                                 {% field_error vm_form.images "image-control" %}
                             </div>
                         </div>
-                        <ul id="img-list" class="row-list mt-2 mb-0" aria-label="{% trans "Chosen volumes" %}"></ul>
+                        <ul id="img-list" class="list-unstyled mt-2 mb-0" aria-label="{% trans "Chosen volumes" %}"></ul>
                         <template id="disk-row">
                             <li class="d-flex flex-wrap align-items-center gap-2 py-1">
                                 <span class="row-label font-monospace"></span>
@@ -181,7 +179,7 @@
                                 <select class="form-select form-select-sm w-auto disk-bus" aria-label="{% trans "Bus" %}">
                                     {% for bus in disk_buses %}<option value="{{ bus }}"{% if bus == default_bus %} selected{% endif %}>{% trans bus %}</option>{% endfor %}
                                 </select>
-                                <span class="row-item"></span>
+                                <span class="row-item text-break"></span>
                                 <button type="button" class="btn btn-sm btn-link ms-auto row-remove" aria-label="{% trans "Remove" %}">{% bs_icon 'x-lg' %}</button>
                             </li>
                         </template>
@@ -232,11 +230,11 @@
                     {% field_error vm_form.networks "network-control" %}
                     <input id="networks" type="hidden" name="networks" value="">
                     <input id="vm_mac" type="hidden" name="mac" value="">
-                    <ul id="net-list" class="row-list mt-2 mb-0" aria-label="{% trans "Network interfaces" %}"></ul>
+                    <ul id="net-list" class="list-unstyled mt-2 mb-0" aria-label="{% trans "Network interfaces" %}"></ul>
                     <template id="network-row">
                         <li class="d-flex flex-wrap align-items-center gap-2 py-1">
                             <span class="row-label font-monospace"></span>
-                            <span class="row-item"></span>
+                            <span class="row-item text-break"></span>
                             <input type="text" class="form-control form-control-sm w-auto font-monospace" maxlength="17" size="17" required
                                    autocomplete="off" autocapitalize="none" spellcheck="false"
                                    pattern="[a-fA-F0-9:]+" aria-label="{% trans "MAC address" %}">
@@ -247,16 +245,17 @@
                 </div>
             </section>
 
-            <section class="card mb-3" aria-labelledby="advanced-heading">
-                <div class="card-body">
-                    <h2 class="h5 card-title mb-0" id="advanced-heading">
-                        <button class="btn p-0 border-0 text-body fw-medium w-100 text-start focus-ring disclosure" type="button" data-bs-toggle="collapse" data-bs-target="#advanced"
+            <section class="accordion mb-3" aria-labelledby="advanced-heading">
+                <div class="accordion-item">
+                    <h2 class="accordion-header" id="advanced-heading">
+                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#advanced"
                                 aria-expanded="false" aria-controls="advanced">
-                            {% bs_icon 'chevron-down' %} {% trans "Advanced" %}
+                            {% trans "Advanced" %}
                         </button>
                     </h2>
-                    <div class="collapse" id="advanced">
-                        <div class="row g-3 pt-3">
+                    <div class="accordion-collapse collapse" id="advanced">
+                        <div class="accordion-body">
+                        <div class="row g-3">
                             <div class="col-md-6">
                                 <label for="vm_cache_mode" class="form-label">{% trans "Disk cache mode" %}</label>
                                 <select id="vm_cache_mode" class="form-select{{ vm_form.cache_mode|invalid }}" name="cache_mode"{% error_attrs vm_form.cache_mode "vm_cache_mode" %}>
@@ -342,6 +341,7 @@
                                 {% endif %}
                             </div>
                         </div>
+                        </div>
                     </div>
                 </div>
             </section>
diff --git a/instances/templates/create_steps.html b/instances/templates/create_steps.html
index 203c70c0..298d8036 100644
--- a/instances/templates/create_steps.html
+++ b/instances/templates/create_steps.html
@@ -1,19 +1,23 @@
 {% load i18n %}
 {# The steps of creating a VM; step is the current one (1-3), a done step links back to it. #}
-<nav aria-label="{% trans "Create a VM" %}">
-    <ol class="create-steps list-unstyled d-flex flex-wrap gap-2 small mb-3">
+<nav aria-label="{% trans "Create a VM" %}" style="--bs-breadcrumb-divider: '›';">
+    <ol class="breadcrumb small mb-3">
         {% if step == 1 %}
-        <li class="fw-semibold" aria-current="step">1. {% trans "Host" %}</li>
+        <li class="breadcrumb-item fw-semibold" aria-current="step">1. {% trans "Host" %}</li>
         {% else %}
-        <li><a class="text-decoration-underline" href="{% url 'instances:index' %}">1. {% trans "Host" %}</a>: {{ compute.name }}</li>
+        <li class="breadcrumb-item"><a class="text-decoration-underline" href="{% url 'instances:index' %}">1. {% trans "Host" %}</a>: {{ compute.name }}</li>
         {% endif %}
         {% if step == 2 %}
-        <li class="fw-semibold" aria-current="step">2. {% trans "Machine" %}</li>
+        <li class="breadcrumb-item fw-semibold" aria-current="step">2. {% trans "Machine" %}</li>
         {% elif step == 3 %}
-        <li><a class="text-decoration-underline" href="{% url 'instances:create_instance_select_type' compute.id %}">2. {% trans "Machine" %}</a>: {{ arch }}, {{ machine }}</li>
+        <li class="breadcrumb-item"><a class="text-decoration-underline" href="{% url 'instances:create_instance_select_type' compute.id %}">2. {% trans "Machine" %}</a>: {{ arch }}, {{ machine }}</li>
         {% else %}
-        <li class="text-body-secondary">2. {% trans "Machine" %}</li>
+        <li class="breadcrumb-item text-body-secondary">2. {% trans "Machine" %}</li>
+        {% endif %}
+        {% if step == 3 %}
+        <li class="breadcrumb-item fw-semibold" aria-current="step">3. {% trans "Details" %}</li>
+        {% else %}
+        <li class="breadcrumb-item text-body-secondary">3. {% trans "Details" %}</li>
         {% endif %}
-        <li{% if step == 3 %} class="fw-semibold" aria-current="step"{% else %} class="text-body-secondary"{% endif %}>3. {% trans "Details" %}</li>
     </ol>
 </nav>
diff --git a/instances/templates/instances/stats_tab.html b/instances/templates/instances/stats_tab.html
index 291d714d..d02e7e0a 100644
--- a/instances/templates/instances/stats_tab.html
+++ b/instances/templates/instances/stats_tab.html
@@ -24,7 +24,7 @@
                     </h5>
                 </div>
                 <div class="card-body">
-                    <div class="chart"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU Usage" %}"></canvas></div>
+                    <div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU Usage" %}"></canvas></div>
                 </div>
             </div>
             <div class="mb-1 card border-danger">
@@ -34,7 +34,7 @@
                     </h5>
                 </div>
                 <div class="card-body">
-                    <div class="chart"><canvas id="memChart" role="img" aria-label="{% trans "Memory Usage" %}"></canvas></div>
+                    <div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory Usage" %}"></canvas></div>
                 </div>
             </div>
             {% for net in instance.networks %}
@@ -45,7 +45,7 @@
                     </h5>
                 </div>
                 <div class="card-body">
-                    <div class="chart"><canvas id="netEth{{ forloop.counter0 }}Chart" role="img" aria-label="{% trans "Bandwidth Device" %}: eth{{ forloop.counter0 }}"></canvas></div>
+                    <div class="chart position-relative"><canvas id="netEth{{ forloop.counter0 }}Chart" role="img" aria-label="{% trans "Bandwidth Device" %}: eth{{ forloop.counter0 }}"></canvas></div>
                 </div>
             </div>
             {% endfor %}
@@ -57,7 +57,7 @@
                     </h5>
                 </div>
                 <div class="card-body">
-                    <div class="chart"><canvas id="blk{{ disk.dev }}Chart" role="img" aria-label="{% trans "Disk I/O device" %}: {{ disk.dev }}"></canvas></div>
+                    <div class="chart position-relative"><canvas id="blk{{ disk.dev }}Chart" role="img" aria-label="{% trans "Disk I/O device" %}: {{ disk.dev }}"></canvas></div>
                 </div>
             </div>
             {% endfor %}
diff --git a/static/css/webvirtcloud.css b/static/css/webvirtcloud.css
index e3627f96..e0e4fac6 100644
--- a/static/css/webvirtcloud.css
+++ b/static/css/webvirtcloud.css
@@ -33,18 +33,6 @@ body {
   color: inherit;
 }
 
-/* a disclosure's chevron points up while its section is open */
-.disclosure[aria-expanded="true"] .bi-chevron-down {
-  transform: rotate(180deg);
-}
-
-/* the steps of creating a VM: the separator is drawn, not a list item */
-.create-steps li + li::before {
-  content: "›";
-  margin-right: 0.5rem;
-  color: var(--bs-secondary-color);
-}
-
 .xmlheight {
     height: 364px;
 }
@@ -137,43 +125,11 @@ p {
     margin-top: 20px;
 }
 
-/* a live chart (static/js/charts.js) fills the width of its card */
+/* a live chart (static/js/charts.js) fills the width of its card at this height */
 .chart {
-    position: relative;
     height: 160px;
 }
 
-.netIN {
-    border-color: rgb(83, 191, 189);
-    margin: 0.5em;
-    border-style: solid;
-    border-width: 0 0 0 1em;
-    padding: 0 0.3em;
-}
-
-.netOUT {
-    border-color: rgb(151, 187, 205);
-    margin: 0.5em;
-    border-style: solid;
-    border-width: 0 0 0 1em;
-    padding: 0 0.3em;
-}
-
-.diskRD {
-    border-color: rgb(190, 195, 205);
-    margin: 0.5em;
-    border-style: solid;
-    border-width: 0 0 0 1em;
-    padding: 0 0.3em;
-}
-
-.diskWR {
-    border-color: rgb(249, 134, 33);
-    margin: 0.5em;
-    border-style: solid;
-    border-width: 0 0 0 1em;
-    padding: 0 0.3em;
-}
 .keyselect {
     display: inline;
     min-width: 250px;
@@ -197,10 +153,6 @@ p {
     background-color:#000099;
 }
 
-.bottom-bar-margin {
-    margin-top: 65px;
-}
-
 /* make dropdowns show on hover */
 @media only screen and (min-width: 768px) {
   .dropdown:hover .dropdown-menu {
@@ -215,72 +167,3 @@ p {
 a {
     outline: 0;
 }
-
-.input-xs {
-    height: 22px;
-    padding: 2px 5px;
-    font-size: 12px;
-    line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
-    border-radius: 2px;
-  }
-
-/* the Computes list: what each host has given its VMs */
-.compute-list td {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-}
-
-.compute-dot {
-    display: inline-block;
-    width: 0.6rem;
-    height: 0.6rem;
-    border-radius: 50%;
-    flex-shrink: 0;
-}
-
-.compute-ratio {
-    font-size: 1.5rem;
-    line-height: 1.2;
-    font-variant-numeric: tabular-nums;
-}
-
-.compute-memory {
-    min-width: 11rem;
-}
-
-.compute-storage {
-    min-width: 9rem;
-}
-
-/* a bar of given capacity: running VMs solid, shut-off VMs faint, and a
-   mark where the host's own capacity ends */
-.cap-bar {
-    position: relative;
-    display: flex;
-    height: 0.6rem;
-    border-radius: 0.3rem;
-    background: var(--bs-secondary-bg);
-}
-
-.cap-bar.cap-thin {
-    height: 0.3rem;
-}
-
-.cap-running {
-    background: var(--bs-primary);
-    border-radius: 0.3rem 0 0 0.3rem;
-}
-
-.cap-stopped {
-    background: var(--bs-primary);
-    opacity: 0.35;
-}
-
-.cap-host {
-    position: absolute;
-    top: -0.2rem;
-    bottom: -0.2rem;
-    width: 2px;
-    margin-left: -1px;
-    background: var(--bs-body-color);
-}