style: fixed first column width

src/main/resources/static/style.css

@@ -257,6 +257,10 @@ form.samplecode-input input:focus-visible {
     display: block;
 }
 
+.userrole-form {
+    display: inline-block;
+}
+
 .userrole-form form {
     margin: 0;
     padding: 0;
@@ -321,6 +325,15 @@ table {
     font-family: sans-serif;
 }
 
+table.config-table td:first-child {
+    width: 24em;
+    min-width: fit-content;
+}
+
+table.config-table td > button:last-of-type {
+    float: right;
+}
+
 .border > table {
     padding: 0;
     border: none;

src/main/resources/templates/configs.html

@@ -12,7 +12,7 @@
 
         <section>
             <h2>🔧 Allgemeine Konfiguration</h2>
-            <table>
+            <table class="config-table">
                 <thead>
                 <tr>
                     <th>Name</th>
@@ -69,7 +69,7 @@
                 Hier sehen Sie eine Übersicht der konfigurierten Transformationen.
             </p>
 
-            <table>
+            <table class="config-table">
                 <thead>
                 <tr>
                     <th>JSON-Path</th>

src/main/resources/templates/configs/tokens.html

@@ -7,19 +7,20 @@
     <h2><span>✅</span> Tokens</h2>
     <div class="border">
         <div th:if="${tokens.isEmpty()}">Noch keine Tokens vorhanden.</div>
-        <table th:if="${not tokens.isEmpty()}">
+        <table th:if="${not tokens.isEmpty()}" class="config-table">
             <thead>
                 <tr>
                     <th>Name</th>
                     <th>Erstellt</th>
-                    <th></th>
                 </tr>
             </thead>
             <tbody>
                 <tr th:each="token : ${tokens}">
                     <td>[[ ${token.name} ]]</td>
-                    <td><time th:datetime="${token.createdAt}">[[ ${token.createdAt} ]]</time></td>
-                    <td><button class="btn btn-red" th:hx-delete="@{/configs/tokens/{id}(id=${token.id})}" hx-target="#tokens">Löschen</button></td>
+                    <td>
+                        <time th:datetime="${token.createdAt}">[[ ${token.createdAt} ]]</time>
+                        <button class="btn btn-red" th:hx-delete="@{/configs/tokens/{id}(id=${token.id})}" hx-target="#tokens">Löschen</button>
+                    </td>
                 </tr>
             </tbody>
         </table>

src/main/resources/templates/configs/userroles.html

@@ -7,12 +7,11 @@
     <h2><span>✅</span> Benutzerberechtigungen</h2>
     <div class="border">
         <div th:if="${userRoles.isEmpty()}">Noch keine Benutzerberechtigungen vorhanden.</div>
-        <table th:if="${not userRoles.isEmpty()}">
+        <table th:if="${not userRoles.isEmpty()}" class="config-table">
             <thead>
                 <tr>
                     <th>Benutzername</th>
                     <th>Rolle</th>
-                    <th></th>
                 </tr>
             </thead>
             <tbody>
@@ -29,8 +28,6 @@
                                 <button class="btn btn-blue" th:disabled="${#authorization.authentication.getName() == userRole.username}">Übernehmen</button>
                             </form>
                         </div>
-                    </td>
-                    <td>
                         <button class="btn btn-red" th:hx-delete="@{/configs/userroles/{id}(id=${userRole.id})}" hx-target="#userroles" th:disabled="${#authorization.authentication.getName() == userRole.username}">Löschen</button>
                     </td>
                 </tr>