diff --git a/css/ucb-tos-acceptance.css b/css/ucb-tos-acceptance.css index 3fd31c57..07a0a732 100644 --- a/css/ucb-tos-acceptance.css +++ b/css/ucb-tos-acceptance.css @@ -36,10 +36,11 @@ .ucb-tos-modal-dialog { position: relative; z-index: 2; - width: 90%; - max-width: 600px; + width: min(94vw, 920px); max-height: 90vh; - overflow-y: auto; + display: flex; + flex-direction: column; + overflow: hidden; background: #fff; border-radius: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); @@ -54,10 +55,13 @@ .ucb-tos-modal-content { display: flex; flex-direction: column; - height: 100%; + flex: 1; + min-height: 0; + max-height: 90vh; } .ucb-tos-modal-header { + flex-shrink: 0; padding: 1.5rem; border-bottom: 1px solid #e0e0e0; } @@ -69,15 +73,36 @@ } .ucb-tos-modal-body { - padding: 1.5rem; flex: 1; + min-height: 0; + padding: 1.5rem; overflow-y: auto; + -webkit-overflow-scrolling: touch; } .ucb-tos-modal-body p { margin-bottom: 1rem; } +.ucb-tos-modal-subheading { + margin: 1.25rem 0 0.75rem; + font-size: 1.125rem; + font-weight: 600; +} + +.ucb-tos-modal-list { + margin: 0 0 1rem; + padding-left: 1.25rem; +} + +.ucb-tos-modal-list li { + margin-bottom: 0.75rem; +} + +.ucb-tos-modal-list li:last-child { + margin-bottom: 0; +} + .ucb-tos-modal-body a { color: #005fcc; text-decoration: underline; @@ -89,6 +114,7 @@ } .ucb-tos-modal-footer { + flex-shrink: 0; padding: 1.5rem; border-top: 1px solid #e0e0e0; display: flex; @@ -117,7 +143,11 @@ /* Responsive adjustments */ @media (max-width: 768px) { .ucb-tos-modal-dialog { - width: 95%; + width: min(96vw, 920px); + max-height: 95vh; + } + + .ucb-tos-modal-content { max-height: 95vh; } diff --git a/js/ucb-tos-acceptance.js b/js/ucb-tos-acceptance.js index 88b16404..bab234a4 100644 --- a/js/ucb-tos-acceptance.js +++ b/js/ucb-tos-acceptance.js @@ -119,13 +119,19 @@