fix(dashboard): Löschbutton und Badge auf Logbuch-Karten trennen

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-31 10:49:55 +02:00
parent 257bca14d1
commit 4eaf5d7f30
2 changed files with 64 additions and 11 deletions
+51 -3
View File
@@ -1248,7 +1248,7 @@ html.scheme-dark .themed-select-option.is-selected {
border-radius: var(--app-radius-card); border-radius: var(--app-radius-card);
padding: 20px; padding: 20px;
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 16px; gap: 16px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@@ -1292,10 +1292,44 @@ html.scheme-dark .themed-select-option.is-selected {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
min-width: 0;
} }
.card-title-row h3 { .card-title-row h3 {
margin: 0; 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 { .logbook-title-editable {
@@ -1309,8 +1343,9 @@ html.scheme-dark .themed-select-option.is-selected {
} }
.logbook-title-inline-edit { .logbook-title-inline-edit {
flex: 1; flex: 1 1 8rem;
min-width: 0; min-width: 0;
max-width: 100%;
margin: 0; margin: 0;
padding: 2px 8px; padding: 2px 8px;
font-size: 16px; font-size: 16px;
@@ -2071,15 +2106,28 @@ html.scheme-dark .themed-select-option.is-selected {
} }
.logbook-card { .logbook-card {
flex-wrap: wrap; flex-wrap: nowrap;
padding: 16px; padding: 16px;
gap: 12px; gap: 12px;
} }
.logbook-card-actions {
margin-top: 0;
}
.logbook-card-actions .btn-delete {
opacity: 1;
}
.card-meta { .card-meta {
flex-wrap: wrap; flex-wrap: wrap;
} }
.card-title-row h3,
.logbook-title-inline-edit {
flex-basis: 100%;
}
.card-info h3 { .card-info h3 {
white-space: normal; white-space: normal;
word-break: break-word; word-break: break-word;
+6 -1
View File
@@ -222,15 +222,20 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
</div> </div>
</div> </div>
{!lb.isShared && (
<div className="logbook-card-actions">
<button <button
type="button"
className="btn-delete" className="btn-delete"
onClick={(e) => handleDelete(lb.id, e)} onClick={(e) => handleDelete(lb.id, e)}
title={t('dashboard.delete_btn')} title={t('dashboard.delete_btn')}
style={{ visibility: lb.isShared ? 'hidden' : 'visible' }} aria-label={t('dashboard.delete_btn')}
> >
<Trash2 size={18} /> <Trash2 size={18} />
</button> </button>
</div> </div>
)}
</div>
) )
} }