From c7810c123b34f62af5d62b632978c9ca560b9412 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Fri, 15 Nov 2024 12:21:32 +0000
Subject: [PATCH] further screen size tweaks

---
 src/button/ReactionToggleButton.module.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

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