From 4eaf5d7f30764dad94545ea9025f43ba68725a24 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sun, 31 May 2026 10:49:55 +0200
Subject: [PATCH] =?UTF-8?q?fix(dashboard):=20L=C3=B6schbutton=20und=20Badg?=
 =?UTF-8?q?e=20auf=20Logbuch-Karten=20trennen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aktions-Spalte im Flex-Layout statt absoluter Positionierung, mit responsivem Stacking auf schmalen Viewports.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/App.css                         | 54 ++++++++++++++++++++--
 client/src/components/LogbookDashboard.tsx | 21 +++++----
 2 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index ce17df6..5380211 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1248,7 +1248,7 @@ html.scheme-dark .themed-select-option.is-selected {
   border-radius: var(--app-radius-card);
   padding: 20px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 16px;
   cursor: pointer;
   position: relative;
@@ -1292,10 +1292,44 @@ html.scheme-dark .themed-select-option.is-selected {
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
+  min-width: 0;
 }
 
 .card-title-row h3 {
   margin: 0;
+  flex: 1 1 8rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.card-title-row .role-badge {
+  flex-shrink: 0;
+}
+
+.logbook-card-actions {
+  flex-shrink: 0;
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  margin-top: -2px;
+}
+
+.logbook-card-actions .btn-delete {
+  position: static;
+  top: auto;
+  right: auto;
+  opacity: 0;
+}
+
+.logbook-card:hover .logbook-card-actions .btn-delete,
+.logbook-card:focus-within .logbook-card-actions .btn-delete {
+  opacity: 1;
+}
+
+@media (hover: none), (pointer: coarse) {
+  .logbook-card-actions .btn-delete {
+    opacity: 1;
+  }
 }
 
 .logbook-title-editable {
@@ -1309,8 +1343,9 @@ html.scheme-dark .themed-select-option.is-selected {
 }
 
 .logbook-title-inline-edit {
-  flex: 1;
+  flex: 1 1 8rem;
   min-width: 0;
+  max-width: 100%;
   margin: 0;
   padding: 2px 8px;
   font-size: 16px;
@@ -2071,15 +2106,28 @@ html.scheme-dark .themed-select-option.is-selected {
   }
 
   .logbook-card {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     padding: 16px;
     gap: 12px;
   }
 
+  .logbook-card-actions {
+    margin-top: 0;
+  }
+
+  .logbook-card-actions .btn-delete {
+    opacity: 1;
+  }
+
   .card-meta {
     flex-wrap: wrap;
   }
 
+  .card-title-row h3,
+  .logbook-title-inline-edit {
+    flex-basis: 100%;
+  }
+
   .card-info h3 {
     white-space: normal;
     word-break: break-word;
diff --git a/client/src/components/LogbookDashboard.tsx b/client/src/components/LogbookDashboard.tsx
index ae1daa5..b3acb49 100644
--- a/client/src/components/LogbookDashboard.tsx
+++ b/client/src/components/LogbookDashboard.tsx
@@ -222,14 +222,19 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
         </div>
       </div>
 
-      <button
-        className="btn-delete"
-        onClick={(e) => handleDelete(lb.id, e)}
-        title={t('dashboard.delete_btn')}
-        style={{ visibility: lb.isShared ? 'hidden' : 'visible' }}
-      >
-        <Trash2 size={18} />
-      </button>
+      {!lb.isShared && (
+        <div className="logbook-card-actions">
+          <button
+            type="button"
+            className="btn-delete"
+            onClick={(e) => handleDelete(lb.id, e)}
+            title={t('dashboard.delete_btn')}
+            aria-label={t('dashboard.delete_btn')}
+          >
+            <Trash2 size={18} />
+          </button>
+        </div>
+      )}
     </div>
     )
   }