rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Modal-Scroll nur im Body — Header/Footer bleiben fest

Browse source
This commit is contained in:
rene 2026-04-13 20:56:04 +02:00
parent 1ad77b4366
commit e5492841ec
2 changed files with 26 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

44
backend/static/css/components.css
View file

@ -460,25 +460,18 @@ textarea.form-control {
}
.modal {
background: var(--c-surface);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
border: 2px solid var(--c-primary);
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
animation: modal-in var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
scrollbar-width: thin;
scrollbar-color: var(--c-primary) var(--c-surface);
background: var(--c-surface);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
border: 2px solid var(--c-primary);
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow: hidden; /* Modal selbst scrollt NICHT */
display: flex;
flex-direction: column;
box-shadow: var(--shadow-xl);
animation: modal-in var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: var(--c-surface); }
.modal::-webkit-scrollbar-thumb {
background: var(--c-primary);
border-radius: var(--radius-full);
}
.modal::-webkit-scrollbar-thumb:hover { background: var(--c-primary-dark); }
@media (min-width: 768px) {
.modal {
border-radius: var(--radius-xl);
@ -506,7 +499,20 @@ textarea.form-control {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
}
.modal-body { padding: var(--space-6); }
.modal-body {
padding: var(--space-6);
overflow-y: auto;
flex: 1; /* füllt den Raum zwischen Header und Footer */
scrollbar-width: thin;
scrollbar-color: var(--c-primary) var(--c-surface);
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: var(--c-surface); }
.modal-body::-webkit-scrollbar-thumb {
background: var(--c-primary);
border-radius: var(--radius-full);
}
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--c-primary-dark); }
.modal-footer {
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--c-border-light);