enhance(client): リアクションピッカーの幅、高さ制限を緩和

CHANGELOG.md

@@ -14,6 +14,7 @@ You should also include the user name that made the change.
 
 ### Improvements
 - クライアント: リアクションピッカーのサイズを設定できるように @syuilo
+- クライアント: リアクションピッカーの幅、高さ制限を緩和 @syuilo
 
 ### Bugfixes
 - 

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

@@ -377,6 +377,16 @@ defineExpose({
 		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 	}
 
+	&.w4 {
+		width: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	&.w5 {
+		width: calc((var(--eachSize) * 9) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
 	&.h1 {
 		height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
 	}
@@ -389,6 +399,10 @@ defineExpose({
 		height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
 	}
 
+	&.h4 {
+		height: calc((var(--eachSize) * 10) + (#{$pad} * 2));
+	}
+
 	&.asDrawer {
 		width: 100% !important;
 

packages/client/src/pages/settings/reaction.vue

@@ -28,12 +28,15 @@
 		<option :value="1">5</option>
 		<option :value="2">6</option>
 		<option :value="3">7</option>
+		<option :value="4">8</option>
+		<option :value="5">9</option>
 	</FormRadios>
 	<FormRadios v-model="reactionPickerHeight" class="_formBlock">
 		<template #label>{{ $ts.height }}</template>
 		<option :value="1">{{ $ts.small }}</option>
 		<option :value="2">{{ $ts.medium }}</option>
 		<option :value="3">{{ $ts.large }}</option>
+		<option :value="4">{{ $ts.large }}+</option>
 	</FormRadios>
 
 	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">