From 1cb1f8ac6a146971c262e826b7174c6cf4bf72db Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Tue, 27 Oct 2026 19:45:47 +0300
Subject: [PATCH] refactor(console): the console pages on Bootstrap classes
 instead of their own style blocks

The console pages carried style blocks for what Bootstrap 5.3 has:
- the page's column (flex, no padding, a #494949 background) is
  d-flex flex-column p-0 bg-dark; its height stays 100dvh inline, as
  vh-100 would run under a phone browser's bar;
- the VNC screen and the serial terminal fill the rest with
  flex-grow-1, the screen overflow-hidden, the terminal bg-black; their
  min-height: 0 stays inline (Bootstrap has no class for it);
- the rule centring the VNC canvas goes: noVNC centres its own canvas
  and draws its own background.
The unused main_container id goes with its style block.
---
 console/templates/console-base.html  | 22 ++--------------------
 console/templates/console-vnc.html   |  5 +----
 console/templates/console-xterm.html |  5 +----
 3 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/console/templates/console-base.html b/console/templates/console-base.html
index 28a27218..1629afae 100644
--- a/console/templates/console-base.html
+++ b/console/templates/console-base.html
@@ -12,32 +12,14 @@
     {% with theme=app_settings.BOOTSTRAP_THEME|default:"zephyr" %}<link rel="stylesheet" href="{% static "css/themes/"|add:theme|add:".min.css" %}" id="wvc_css">{% endwith %}
     <link href="{% static "css/webvirtcloud.css" %}" rel="stylesheet">
 
-    <style>
-        #main_container {
-            padding: 0;
-            width: 100%;
-            max-width: none;
-            height: 100dvh;
-            display: flex;
-            flex-direction: column;
-            background-color: #494949;
-        }
-
-        #main_container canvas {
-            padding-left: 0;
-            padding-right: 0;
-            margin-left: auto;
-            margin-right: auto;
-            display: block;
-        }
-    </style>
 
     {% block head %}{% endblock %}
 
 </head>
 
 <body>
-    <div id="main_container">
+    {# the whole window, 100dvh: vh-100 would run under a phone browser's bar #}
+    <div class="d-flex flex-column p-0 bg-dark" style="height: 100dvh;">
         <nav class="navbar navbar-expand-md navbar-dark bg-primary py-1" aria-label="{% trans "Console" %}">
             <div class="container-fluid">
                 <span class="navbar-brand py-0">{{ instance.name }}</span>
diff --git a/console/templates/console-vnc.html b/console/templates/console-vnc.html
index a8f98898..39fc3ca7 100644
--- a/console/templates/console-vnc.html
+++ b/console/templates/console-vnc.html
@@ -3,9 +3,6 @@
 {% load static %}
 
 {% block head %}
-<style>
-    #screen { flex: 1 1 auto; min-height: 0; overflow: hidden; }
-</style>
 {{ vnc|json_script:"vnc-config" }}
 {{ layouts|json_script:"keyboard-layouts" }}
 <script type="module" src="{% static "js/console_vnc.js" %}"></script>
@@ -66,7 +63,7 @@
 {% endblock %}
 
 {% block content %}
-<div id="screen"></div>
+<div id="screen" class="flex-grow-1 overflow-hidden" style="min-height: 0;"></div>
 <textarea id="keyboard_input" class="visually-hidden" autocapitalize="off" autocomplete="off"
     spellcheck="false" tabindex="-1" aria-label="{% trans "Keyboard" %}"></textarea>
 
diff --git a/console/templates/console-xterm.html b/console/templates/console-xterm.html
index 13476f5e..7a93f754 100644
--- a/console/templates/console-xterm.html
+++ b/console/templates/console-xterm.html
@@ -7,9 +7,6 @@
 <script src="{% static 'js/xterm/xterm.js' %}"></script>
 <script src="{% static 'js/xterm/addon-fit.js' %}"></script>
 <script src="{% static 'js/socket.io.js' %}"></script>
-<style>
-    #terminal { flex: 1 1 auto; min-height: 0; background: #000; }
-</style>
 {{ token|json_script:"serial-token" }}
 <script type="module" src="{% static "js/console_serial.js" %}"></script>
 {% endblock %}
@@ -29,5 +26,5 @@
 {% endblock %}
 
 {% block content %}
-<div id="terminal"></div>
+<div id="terminal" class="flex-grow-1 bg-black" style="min-height: 0;"></div>
 {% endblock %}