gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-29 10:53:39 +00:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

allow dynamic resizing of width

Browse Source
This commit is contained in:
ChaosExAnima 2025-11-19 15:13:53 +01:00
parent bf2b501347
commit 0b81c547c2
No known key found for this signature in database
GPG Key ID: 8F2B333100FB6117
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/mastodon/components/emoji/picker/emoji-picker.stories.tsx
View File

@ -36,7 +36,21 @@ const StoryComponent: FC<{ locale: string }> = ({ locale }) => {
return null; return null;
} }
return ( 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>
); );
}; };

9
app/javascript/mastodon/components/emoji/picker/styles.module.css
View File

@ -1,18 +1,15 @@
.wrapper { .wrapper {
--max-width: 20rem;
--col-count: 6;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-columns: 2rem minmax(10rem, calc(var(--max-width) - 4rem)); grid-template-columns: 2rem auto;
background-color: lightgray; background-color: lightgray;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
width: 100%; width: 100%;
max-width: var(--max-width);
max-height: 50vh; max-height: 50vh;
box-sizing: border-box; box-sizing: border-box;
min-width: 250px;
:global(.emojione) { :global(.emojione) {
margin: 0; margin: 0;
@ -97,7 +94,7 @@
.emojiGrid { .emojiGrid {
display: grid; display: grid;
grid-template-columns: repeat(var(--col-count), 1fr); grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
gap: 0.5rem; gap: 0.5rem;
} }