diff --git a/src/Modal.module.css b/src/Modal.module.css index fae3a6fb..fc4cf366 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details. */ .modal { + --inset-inline: 520px; display: flex; flex-direction: column; } @@ -35,7 +36,7 @@ Please see LICENSE in the repository root for full details. .drawer { background: var(--cpd-color-bg-canvas-default); inset-block-end: 0; - inset-inline: max(0px, calc((100% - 520px) / 2)); + inset-inline: max(0px, calc((100% - var(--inset-inline)) / 2)); max-block-size: 90%; border-start-start-radius: var(--border-radius); border-start-end-radius: var(--border-radius); diff --git a/src/Overlay.module.css b/src/Overlay.module.css index 7f24e7f1..6253bcb0 100644 --- a/src/Overlay.module.css +++ b/src/Overlay.module.css @@ -42,8 +42,9 @@ Please see LICENSE in the repository root for full details. } .overlay.animate { + --overlay-top: 50%; left: 50%; - top: 50%; + top: var(--overlay-top); transform: translate(-50%, -50%); } diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css index c19c6e36..d7f742bc 100644 --- a/src/button/ReactionToggleButton.module.css +++ b/src/button/ReactionToggleButton.module.css @@ -7,21 +7,24 @@ width: fit-content; } -.reactionPopupMenuModal { - top: 82vh !important; +div.reactionPopupMenuRoot.reactionPopupMenuModal { + --overlay-top: 82vh; } -.reactionPopupMenuRoot { - width: fit-content !important; +div.reactionPopupMenuRoot { + /* Center the drawer */ + --inset-inline: 30em; + width: fit-content; } .reactionPopupMenuRoot > div { width: fit-content; + max-width: 100%; } -.reactionPopupMenuModal > div > div { - padding-inline: var(--cpd-space-6x) !important; - padding-block: var(--cpd-space-6x) !important; +div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div { + padding-inline: var(--cpd-space-6x); + padding-block: var(--cpd-space-6x); } .reactionPopupMenu section { @@ -89,12 +92,6 @@ border: none; } -@media (max-width: 660px) { - :root { - --reaction-button-size: 1em; - --reaction-button-fontsize: 1em; - } -} .verticalSeperator { background-color: var(--cpd-color-gray-800); width: 1px;