From 0b81c547c296f4a034a889233eda0006d7bacd4e Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Wed, 19 Nov 2025 15:13:53 +0100
Subject: [PATCH] allow dynamic resizing of width

---
 .../emoji/picker/emoji-picker.stories.tsx        | 16 +++++++++++++++-
 .../components/emoji/picker/styles.module.css    |  9 +++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/javascript/mastodon/components/emoji/picker/emoji-picker.stories.tsx b/app/javascript/mastodon/components/emoji/picker/emoji-picker.stories.tsx
index be27393084c..5c78d83b351 100644
--- a/app/javascript/mastodon/components/emoji/picker/emoji-picker.stories.tsx
+++ b/app/javascript/mastodon/components/emoji/picker/emoji-picker.stories.tsx
@@ -36,7 +36,21 @@ const StoryComponent: FC<{ locale: string }> = ({ locale }) => {
     return null;
   }
   return (
-    <MockEmojiPicker onSelect={onSelect} onSkinToneChange={onSkinToneChange} />
+    <div
+      style={{
+        resize: 'horizontal',
+        padding: '1rem',
+        border: '1px solid gray',
+        overflow: 'auto',
+        width: '400px',
+        minWidth: 'calc(250px + 2rem)',
+      }}
+    >
+      <MockEmojiPicker
+        onSelect={onSelect}
+        onSkinToneChange={onSkinToneChange}
+      />
+    </div>
   );
 };
 
diff --git a/app/javascript/mastodon/components/emoji/picker/styles.module.css b/app/javascript/mastodon/components/emoji/picker/styles.module.css
index c29c52c1403..645f57a2144 100644
--- a/app/javascript/mastodon/components/emoji/picker/styles.module.css
+++ b/app/javascript/mastodon/components/emoji/picker/styles.module.css
@@ -1,18 +1,15 @@
 .wrapper {
-  --max-width: 20rem;
-  --col-count: 6;
-
   display: grid;
   gap: 0.5rem;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 2rem minmax(10rem, calc(var(--max-width) - 4rem));
+  grid-template-columns: 2rem auto;
   background-color: lightgray;
   padding: 0.5rem;
   border-radius: 0.25rem;
   width: 100%;
-  max-width: var(--max-width);
   max-height: 50vh;
   box-sizing: border-box;
+  min-width: 250px;
 
   :global(.emojione) {
     margin: 0;
@@ -97,7 +94,7 @@
 
 .emojiGrid {
   display: grid;
-  grid-template-columns: repeat(var(--col-count), 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
   gap: 0.5rem;
 }