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:
+51
-3
@@ -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;
|
||||||
|
|||||||
@@ -222,14 +222,19 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
{!lb.isShared && (
|
||||||
className="btn-delete"
|
<div className="logbook-card-actions">
|
||||||
onClick={(e) => handleDelete(lb.id, e)}
|
<button
|
||||||
title={t('dashboard.delete_btn')}
|
type="button"
|
||||||
style={{ visibility: lb.isShared ? 'hidden' : 'visible' }}
|
className="btn-delete"
|
||||||
>
|
onClick={(e) => handleDelete(lb.id, e)}
|
||||||
<Trash2 size={18} />
|
title={t('dashboard.delete_btn')}
|
||||||
</button>
|
aria-label={t('dashboard.delete_btn')}
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user