Files
fusion/packages/dashboard/app/components/TodoModal.css
Fusion 273ca03052 feat(FN-3702): fix todo mobile layout keyboard handling and modal row heigh
This merge lands a comprehensive testing suite quality overhaul: new browser layout smoke tests, reverse-dependent test coverage, hardened local test infrastructure, and documentation of the agent test workflow, alongside a mobile keyboard-safe TodoView layout fix.

Fusion-Task-Id: FN-3702
2026-05-07 10:27:48 -07:00

77 lines
1.5 KiB
CSS

.modal.todo-modal {
width: 80vw;
max-width: calc(var(--space-xl) * 37.5);
height: 75vh;
min-height: calc(var(--space-xs) * 100);
max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - var(--space-lg));
overflow: hidden;
resize: both;
display: flex;
flex-direction: column;
}
.todo-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
}
.todo-modal-header-title {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.todo-modal-header-title h2 {
margin: 0;
font-size: calc(var(--space-md) + var(--space-xs) * 0.75);
}
.todo-modal-header-title p {
margin: 0;
color: var(--text-muted);
font-size: calc(var(--space-md) - var(--space-xs) * 0.25);
}
.todo-modal-body {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
@media (max-width: 768px) {
.modal-overlay:has(.todo-modal) {
padding-top: 0;
align-items: stretch;
justify-content: stretch;
}
.modal.todo-modal {
width: 100vw;
min-width: 0;
height: 100dvh;
min-height: 0;
max-width: 100vw;
max-height: 100dvh;
margin: 0;
border: none;
border-radius: 0;
resize: none;
}
.modal.todo-modal[style*="--keyboard-overlap"] {
height: var(--vv-height, 100dvh);
max-height: var(--vv-height, 100dvh);
transform: translateY(var(--vv-offset-top, 0px));
will-change: transform;
}
.modal.todo-modal[style*="--keyboard-overlap"] .todo-modal-body {
min-height: 0;
overflow: hidden;
}
}