further screen size tweaks

This commit is contained in:
Half-Shot 2024-11-15 12:21:32 +00:00
parent a69b5f26c2
commit c7810c123b

View File

@ -5,10 +5,19 @@
.reactionPopupMenu { .reactionPopupMenu {
--reaction-button-padding: 10px; --reaction-button-padding: 10px;
--reaction-button-fontsize: 20px; --reaction-button-fontsize: 20px;
--reaction-button-gap: var(--cpd-separator-spacing);
display: flex; display: flex;
width: fit-content; width: fit-content;
} }
@media (max-width: 420px) {
.reactionPopupMenu {
--reaction-button-padding: 8px;
--reaction-button-fontsize: 16px;
--reaction-button-gap: 6px;
}
}
div.reactionPopupMenuRoot.reactionPopupMenuModal { div.reactionPopupMenuRoot.reactionPopupMenuModal {
--overlay-top: 82vh; --overlay-top: 82vh;
width: fit-content; width: fit-content;
@ -44,7 +53,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex-grow: 1; flex-grow: 1;
gap: var(--cpd-separator-spacing); gap: var(--reaction-button-gap);
/* Height of 3 rows plus padding. */ /* Height of 3 rows plus padding. */
max-height: calc( max-height: calc(
((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3 ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3