diff --git a/src/App.vue b/src/App.vue index 2f4dcc0..ad12ce2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3546,6 +3546,11 @@ watch(mobileMenuOpen, (open) => {
+ + diff --git a/src/style.css b/src/style.css index 9d8361a..66e0c94 100644 --- a/src/style.css +++ b/src/style.css @@ -3199,13 +3199,28 @@ body.menu-open { } .card-reader-modal { + display: flex; + flex-direction: column; width: min(100%, 42rem); + max-height: min(44rem, calc(100svh - 2rem)); } .card-reader-body { display: grid; gap: 1rem; + overflow-y: auto; padding: 1.25rem; + scrollbar-gutter: stable; +} + +.card-reader-modal .modal-header { + flex: 0 0 auto; +} + +.card-reader-modal .modal-header h2 { + margin: 0.15rem 0 0; + font-size: clamp(1.35rem, 4vw, 2rem); + line-height: 1; } .card-reader-status { @@ -3321,8 +3336,11 @@ body.menu-open { display: grid; gap: 0; overflow: hidden; + max-height: 18rem; + overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; + scrollbar-gutter: stable; } .card-reader-log-row { @@ -3362,6 +3380,16 @@ body.menu-open { white-space: nowrap; } +.card-reader-footer { + display: flex; + flex: 0 0 auto; + justify-content: flex-end; + gap: 0.75rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding: 0.9rem 1.25rem; + background: rgba(8, 8, 8, 0.98); +} + @keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(242, 169, 0, 0.45); } 70% { box-shadow: 0 0 0 0.55rem rgba(242, 169, 0, 0); } @@ -3810,6 +3838,18 @@ body.menu-open { grid-template-columns: 1fr; } + .card-reader-modal { + max-height: calc(100svh - 1rem); + } + + .card-reader-body { + padding: 0.85rem; + } + + .card-reader-log-list { + max-height: 13rem; + } + .card-reader-log-row small { white-space: normal; }