enhance(client): improve modal menu for mobile

packages/client/src/components/emoji-picker.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
+<div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : null }">
 	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
 	<div ref="emojis" class="emojis">
 		<section class="result">
@@ -92,9 +92,17 @@ export default defineComponent({
 	props: {
 		showPinned: {
 			required: false,
-			default: true
+			default: true,
 		},
 		asReactionPicker: {
+			required: false,
+		},
+		maxHeight: {
+			type: Number,
+			required: false,
+		},
+		asDrawer: {
+			type: Boolean,
 			required: false
 		},
 	},
@@ -353,26 +361,53 @@ export default defineComponent({
 
 	&.w1 {
 		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr;
 	}
 
 	&.w2 {
 		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 	}
 
 	&.w3 {
 		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 	}
 
 	&.h1 {
-		--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
+		height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
 	}
 
 	&.h2 {
-		--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+		height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
 	}
 
 	&.h3 {
-		--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+		height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+	}
+
+	&.asDrawer {
+		width: 100% !important;
+
+		> .emojis {
+			::v-deep(section) {
+				> div {
+					display: grid;
+					grid-template-columns: var(--columns);
+
+					> button {
+						aspect-ratio: 1 / 1;
+						width: auto;
+						height: auto;
+						min-width: 0;
+
+						> * {
+							font-size: 30px;
+						}
+					}
+				}
+			}
+		}
 	}
 
 	> .search {
@@ -409,7 +444,7 @@ export default defineComponent({
 	}
 
 	> .emojis {
-		height: var(--height);
+		height: 100%;
 		overflow-y: auto;
 		overflow-x: hidden;