Revert "revert emoji picker changes"

This reverts commit 38d5303ccd.

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

@@ -1,16 +1,17 @@
 <template>
+<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <section>
 	<header class="_acrylic" @click="shown = !shown">
 		<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
 	</header>
-	<div v-if="shown">
+	<div v-if="shown" class="body">
 		<button
 			v-for="emoji in emojis"
 			:key="emoji"
-			class="_button"
+			class="_button item"
 			@click="emit('chosen', emoji, $event)"
 		>
-			<MkEmoji :emoji="emoji" :normal="true"/>
+			<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
 		</button>
 	</div>
 </section>

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

@@ -3,67 +3,67 @@
 	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
 	<div ref="emojis" class="emojis">
 		<section class="result">
-			<div v-if="searchResultCustom.length > 0">
+			<div v-if="searchResultCustom.length > 0" class="body">
 				<button
 					v-for="emoji in searchResultCustom"
 					:key="emoji.id"
-					class="_button"
+					class="_button item"
 					:title="emoji.name"
 					tabindex="0"
 					@click="chosen(emoji, $event)"
 				>
 					<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
-					<img :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+					<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
 				</button>
 			</div>
-			<div v-if="searchResultUnicode.length > 0">
+			<div v-if="searchResultUnicode.length > 0" class="body">
 				<button
 					v-for="emoji in searchResultUnicode"
 					:key="emoji.name"
-					class="_button"
+					class="_button item"
 					:title="emoji.name"
 					tabindex="0"
 					@click="chosen(emoji, $event)"
 				>
-					<MkEmoji :emoji="emoji.char"/>
+					<MkEmoji class="emoji" :emoji="emoji.char"/>
 				</button>
 			</div>
 		</section>
 
-		<div v-if="tab === 'index'" class="index">
+		<div v-if="tab === 'index'" class="group index">
 			<section v-if="showPinned">
-				<div>
+				<div class="body">
 					<button
 						v-for="emoji in pinned"
 						:key="emoji"
-						class="_button"
+						class="_button item"
 						tabindex="0"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji :emoji="emoji" :normal="true"/>
+						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
 					</button>
 				</div>
 			</section>
 
 			<section>
 				<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
-				<div>
+				<div class="body">
 					<button
 						v-for="emoji in recentlyUsedEmojis"
 						:key="emoji"
-						class="_button"
+						class="_button item"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji :emoji="emoji" :normal="true"/>
+						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
 					</button>
 				</div>
 			</section>
 		</div>
-		<div>
+		<div class="group">
 			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
 			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
 		</div>
-		<div>
+		<div class="group">
 			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
 			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
 		</div>
@@ -419,19 +419,16 @@ defineExpose({
 					font-size: 15px;
 				}
 
-				> div {
+				> .body {
 					display: grid;
 					grid-template-columns: var(--columns);
+					font-size: 30px;
 
-					> button {
+					> .item {
 						aspect-ratio: 1 / 1;
 						width: auto;
 						height: auto;
 						min-width: 0;
-
-						> * {
-							font-size: 30px;
-						}
 					}
 				}
 			}
@@ -482,7 +479,7 @@ defineExpose({
 			display: none;
 		}
 
-		> div {
+		> .group {
 			&:not(.index) {
 				padding: 4px 0 8px 0;
 				border-top: solid 0.5px var(--divider);
@@ -517,16 +514,18 @@ defineExpose({
 				}
 			}
 
-			> div {
+			> .body {
 				position: relative;
 				padding: $pad;
 
-				> button {
+				> .item {
 					position: relative;
 					padding: 0;
 					width: var(--eachSize);
 					height: var(--eachSize);
+					contain: strict;
 					border-radius: 4px;
+					font-size: 24px;
 
 					&:focus-visible {
 						outline: solid 2px var(--focus);
@@ -542,8 +541,7 @@ defineExpose({
 						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
 					}
 
-					> * {
+					> .emoji {
-						font-size: 24px;
 						height: 1.25em;
 						vertical-align: -.25em;
 						pointer-events: none;