Moved inline styling to the stylesheet.

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;
+}

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>

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 class="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.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 class="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>{{ fingerprint }}</code></span>
       {% if not forloop.last %}
       <hr>
       {% endif %}