fix(ui): Disclaimer-Modal Scroll und Schließen-Button
Ein Scrollbereich im Hinweis-Dialog, Body-Lock beim Öffnen, X oben rechts an der Karte. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+20
-7
@@ -567,18 +567,16 @@ html.scheme-dark .themed-select-option.is-selected {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.registration-disclaimer--modal {
|
.registration-disclaimer--modal {
|
||||||
|
position: relative;
|
||||||
width: min(560px, calc(100vw - 32px));
|
width: min(560px, calc(100vw - 32px));
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.registration-disclaimer .auth-header {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.registration-disclaimer__close {
|
.registration-disclaimer__close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 12px;
|
||||||
right: 0;
|
right: 12px;
|
||||||
|
z-index: 1;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -604,6 +602,7 @@ html.scheme-dark .themed-select-option.is-selected {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
overflow: hidden;
|
||||||
background: rgba(2, 6, 23, 0.72);
|
background: rgba(2, 6, 23, 0.72);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -611,7 +610,20 @@ html.scheme-dark .themed-select-option.is-selected {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 560px;
|
max-width: 560px;
|
||||||
max-height: min(90vh, 820px);
|
max-height: min(90vh, 820px);
|
||||||
overflow-y: auto;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disclaimer-modal-panel > .registration-disclaimer {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feedback-modal {
|
.feedback-modal {
|
||||||
@@ -910,6 +922,7 @@ html.scheme-dark .themed-select-option.is-selected {
|
|||||||
|
|
||||||
.registration-disclaimer__sections {
|
.registration-disclaimer__sections {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -13,7 +13,12 @@ export default function DisclaimerModal({ open, onClose }: DisclaimerModalProps)
|
|||||||
if (event.key === 'Escape') onClose()
|
if (event.key === 'Escape') onClose()
|
||||||
}
|
}
|
||||||
window.addEventListener('keydown', onKeyDown)
|
window.addEventListener('keydown', onKeyDown)
|
||||||
return () => window.removeEventListener('keydown', onKeyDown)
|
const prevOverflow = document.body.style.overflow
|
||||||
|
document.body.style.overflow = 'hidden'
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('keydown', onKeyDown)
|
||||||
|
document.body.style.overflow = prevOverflow
|
||||||
|
}
|
||||||
}, [open, onClose])
|
}, [open, onClose])
|
||||||
|
|
||||||
if (!open) return null
|
if (!open) return null
|
||||||
|
|||||||
@@ -28,19 +28,19 @@ export default function RegistrationDisclaimer({
|
|||||||
className={`auth-card glass registration-disclaimer${variant === 'view' ? ' registration-disclaimer--modal' : ''}`}
|
className={`auth-card glass registration-disclaimer${variant === 'view' ? ' registration-disclaimer--modal' : ''}`}
|
||||||
role="document"
|
role="document"
|
||||||
>
|
>
|
||||||
|
{variant === 'view' && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="registration-disclaimer__close"
|
||||||
|
onClick={onDismiss}
|
||||||
|
aria-label={t('disclaimer.close')}
|
||||||
|
>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<div className="auth-header">
|
<div className="auth-header">
|
||||||
<ScrollText className="auth-icon accent" size={48} />
|
<ScrollText className="auth-icon accent" size={48} />
|
||||||
<h2>{t('disclaimer.title')}</h2>
|
<h2>{t('disclaimer.title')}</h2>
|
||||||
{variant === 'view' && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="registration-disclaimer__close"
|
|
||||||
onClick={onDismiss}
|
|
||||||
aria-label={t('disclaimer.close')}
|
|
||||||
>
|
|
||||||
<X size={18} />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="registration-disclaimer__intro">{t('disclaimer.intro')}</p>
|
<p className="registration-disclaimer__intro">{t('disclaimer.intro')}</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user