From 5813d200dc98c3bf01803c01684928673467339f Mon Sep 17 00:00:00 2001
From: Johannes Erwerle <jo@swagspace.org>
Date: Wed, 21 Oct 2026 21:53:23 +0200
Subject: [PATCH] Moved inline styling to the stylesheet.

---
 community_backup/static/webui/css/webui.css     | 10 ++++++++++
 community_backup/webui/templates/base.html      |  2 +-
 community_backup/webui/templates/borg_list.html |  8 ++++----
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/community_backup/static/webui/css/webui.css b/community_backup/static/webui/css/webui.css
index e465940..514ae45 100644
--- a/community_backup/static/webui/css/webui.css
+++ b/community_backup/static/webui/css/webui.css
@@ -1,3 +1,9 @@
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
 .pixelart {
   image-rendering: crisp-edges;
 }
@@ -6,3 +12,7 @@
   min-width: 32px;
   min-height: 32px;
 }
+
+.word-break-break-all {
+  word-break: break-all;
+}
diff --git a/community_backup/webui/templates/base.html b/community_backup/webui/templates/base.html
index c2415fa..cefcd55 100644
--- a/community_backup/webui/templates/base.html
+++ b/community_backup/webui/templates/base.html
@@ -32,7 +32,7 @@
         });
         </script>
   </head>
-  <body style="display: flex; flex-direction: column; height: 100vh">
+  <body>
     <nav class="navbar" role="navigation" aria-label="main navigation" >
         <div class="navbar-brand">
                 <a class="navbar-item" href="/"><img id="logo" class="pixelart" src="{% static 'webui/logo.png' %}" alt="The logo if Community Backup, a pixelated hard disk platter and head."/> Community Backup</a>
diff --git a/community_backup/webui/templates/borg_list.html b/community_backup/webui/templates/borg_list.html
index ae42f38..896881e 100644
--- a/community_backup/webui/templates/borg_list.html
+++ b/community_backup/webui/templates/borg_list.html
@@ -28,8 +28,8 @@
 {% for repo in object_list %}
     <tr>
       <td>{{ repo.name }}</td>
-      <td style="word-break: break-all"><code>{{ repo.truncated_key }}</code></td>
-      <td style="word-break: break-all"><code>{{ repo.repo_url }}</code></td>
+      <td class="word-break-break-all"><code>{{ repo.truncated_key }}</code></td>
+      <td class="word-break-break-all"><code>{{ repo.repo_url }}</code></td>
       <td>{% if repo.used_quota < 0 %}not initialized{% else %}{{ repo.used_quota }}/{{ repo.quota }} GB{% endif %}</td>
       <td>
           <div class="field is-grouped">
@@ -51,8 +51,8 @@
   </header>
   <div class="card-content">
   {% for key, fingerprint in BORG_SERVER_PUBKEYS %}
-      <span style="word-break: break-all"><code>{{ key }}</code></span><br>
-      <span style="word-break: break-all"><code>{{ fingerprint }}</code></span>
+      <span class="word-break-break-all"><code>{{ key }}</code></span><br>
+      <span class="word-break-break-all"><code>{{ fingerprint }}</code></span>
       {% if not forloop.last %}
       <hr>
       {% endif %}