From 16e48aaf3f36b8e156599c6f205d8963ba7ddfbb Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Tue, 11 Nov 2025 17:18:16 +0100
Subject: [PATCH] improved table view

---
 admin/src/components/APIKeyTable.tsx | 28 +++++++++-----
 admin/src/components/UserTable.tsx   | 58 +++++++++++++++-------------
 2 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/admin/src/components/APIKeyTable.tsx b/admin/src/components/APIKeyTable.tsx
index b6c73d9..076882e 100644
--- a/admin/src/components/APIKeyTable.tsx
+++ b/admin/src/components/APIKeyTable.tsx
@@ -150,10 +150,16 @@ const APIKeyTable: React.FC = () => {
         />
       )}
 
-      <Table.Root size="sm" striped>
+      <Table.Root
+        size="sm"
+        striped
+        w="100%"
+        // table-layout: auto => Spaltenbreite nach Content; volle Breite nutzen
+        style={{ tableLayout: "auto" }}
+      >
         <Table.Header>
           <Table.Row>
-            <Table.ColumnHeader>
+            <Table.ColumnHeader width="1%" whiteSpace="nowrap">
               <strong>#</strong>
             </Table.ColumnHeader>
             <Table.ColumnHeader>
@@ -162,13 +168,13 @@ const APIKeyTable: React.FC = () => {
             <Table.ColumnHeader>
               <strong>Name</strong>
             </Table.ColumnHeader>
-            <Table.ColumnHeader>
+            <Table.ColumnHeader whiteSpace="nowrap">
               <strong>Eintrag erstellt am</strong>
             </Table.ColumnHeader>
-            <Table.ColumnHeader>
+            <Table.ColumnHeader whiteSpace="nowrap">
               <strong>Zuletzt benutzt am</strong>
             </Table.ColumnHeader>
-            <Table.ColumnHeader>
+            <Table.ColumnHeader width="1%" whiteSpace="nowrap">
               <strong>Aktionen</strong>
             </Table.ColumnHeader>
           </Table.Row>
@@ -176,16 +182,18 @@ const APIKeyTable: React.FC = () => {
         <Table.Body>
           {items.map((item) => (
             <Table.Row key={item.id}>
-              <Table.Cell>{item.id}</Table.Cell>
-              <Table.Cell>{item.api_key}</Table.Cell>
+              <Table.Cell whiteSpace="nowrap">{item.id}</Table.Cell>
+              <Table.Cell fontFamily="mono">{item.api_key}</Table.Cell>
               <Table.Cell>{item.entry_name}</Table.Cell>
-              <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
-              <Table.Cell>
+              <Table.Cell whiteSpace="nowrap">
+                {formatDateTime(item.entry_created_at)}
+              </Table.Cell>
+              <Table.Cell whiteSpace="nowrap">
                 {!item.last_used_at
                   ? "Nie benutzt"
                   : formatDateTime(item.last_used_at)}
               </Table.Cell>
-              <Table.Cell>
+              <Table.Cell whiteSpace="nowrap">
                 <Button
                   onClick={() =>
                     deleteAPKey(item.id).then((response) => {
diff --git a/admin/src/components/UserTable.tsx b/admin/src/components/UserTable.tsx
index 07add65..4b72910 100644
--- a/admin/src/components/UserTable.tsx
+++ b/admin/src/components/UserTable.tsx
@@ -195,10 +195,15 @@ const UserTable: React.FC = () => {
         </VStack>
       )}
       {!isLoading && (
-        <Table.Root size="sm" striped>
+        <Table.Root
+          size="sm"
+          striped
+          w="100%"
+          style={{ tableLayout: "auto" }} // Spalten nach Content
+        >
           <Table.Header>
             <Table.Row>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>#</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
@@ -213,22 +218,22 @@ const UserTable: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>E-Mail</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>Admin</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader whiteSpace="nowrap">
                 <strong>Passwort ändern</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>Rolle</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader whiteSpace="nowrap">
                 <strong>Eintrag erstellt am</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader whiteSpace="nowrap">
                 <strong>Eintrag aktualisiert am</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>Aktionen</strong>
               </Table.ColumnHeader>
             </Table.Row>
@@ -236,10 +241,8 @@ const UserTable: React.FC = () => {
           <Table.Body>
             {users.map((user) => (
               <Table.Row key={user.id}>
-                <Table.Cell>{user.id}</Table.Cell>
+                <Table.Cell whiteSpace="nowrap">{user.id}</Table.Cell>
                 <Table.Cell>{user.username}</Table.Cell>
-
-                {/* Vorname */}
                 <Table.Cell>
                   <Input
                     size="sm"
@@ -249,8 +252,6 @@ const UserTable: React.FC = () => {
                     }
                   />
                 </Table.Cell>
-
-                {/* Nachname */}
                 <Table.Cell>
                   <Input
                     size="sm"
@@ -260,8 +261,6 @@ const UserTable: React.FC = () => {
                     }
                   />
                 </Table.Cell>
-
-                {/* E-Mail */}
                 <Table.Cell>
                   <Input
                     type="email"
@@ -272,14 +271,12 @@ const UserTable: React.FC = () => {
                     }
                   />
                 </Table.Cell>
-
-                {/* Admin */}
-                <Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
                   <Switch.Root
                     size="sm"
                     checked={!!user.is_admin}
-                    onCheckedChange={(details) =>
-                      handleInputChange(user.id, "is_admin", details.checked)
+                    onCheckedChange={(d) =>
+                      handleInputChange(user.id, "is_admin", d.checked)
                     }
                     aria-label="Adminrechte umschalten"
                   >
@@ -289,23 +286,32 @@ const UserTable: React.FC = () => {
                     <Switch.HiddenInput />
                   </Switch.Root>
                 </Table.Cell>
-                <Table.Cell>
-                  <Button onClick={() => handlePasswordChange(user.username)}>
+                <Table.Cell whiteSpace="nowrap">
+                  <Button
+                    size="sm"
+                    onClick={() => handlePasswordChange(user.username)}
+                  >
                     Passwort ändern
                   </Button>
                 </Table.Cell>
-                <Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
                   <Input
                     type="number"
+                    size="sm"
                     onChange={(e) =>
                       handleInputChange(user.id, "role", e.target.value)
                     }
                     value={user.role}
+                    width="70px"
                   />
                 </Table.Cell>
-                <Table.Cell>{formatDateTime(user.entry_created_at)}</Table.Cell>
-                <Table.Cell>{formatDateTime(user.entry_updated_at)}</Table.Cell>
-                <Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
+                  {formatDateTime(user.entry_created_at)}
+                </Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
+                  {formatDateTime(user.entry_updated_at)}
+                </Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
                   <Button
                     onClick={() =>
                       handleEdit(