リアクションポップアップの調整

src/components/emoji_grid/emoji_grid.js

@@ -1,4 +1,5 @@
-const EMOJI_SIZE = 32 + 8
+const EMOJI_SIZE = 64 + 2
+const EMOJI_SIZE_HEIGHT = 48 + 2
 const GROUP_TITLE_HEIGHT = 24
 const BUFFER_SIZE = 3 * EMOJI_SIZE
 
@@ -98,14 +99,15 @@ const EmojiGrid = {
             id: `${group.id}-${emoji.displayText}`,
             emoji
           })
+          //絵文字サイズの二倍を指定
           x += EMOJI_SIZE
-          if (x + EMOJI_SIZE > this.containerWidth) {
-            y += EMOJI_SIZE
+          if (x + (EMOJI_SIZE ) > this.containerWidth) {
+            y += EMOJI_SIZE_HEIGHT
             x = 0
           }
         }
         if (x > 0) {
-          y += EMOJI_SIZE
+          y += EMOJI_SIZE_HEIGHT
           x = 0
         }
       }

src/components/emoji_grid/emoji_grid.scss

@@ -21,7 +21,7 @@
       }
     }
     margin-left: 5px;
-    min-height: 200px;
+    min-height: 400px;
   }
 
   &-group-title {
@@ -40,14 +40,20 @@
 
   &-item {
     position: absolute;
-    width: 32px;
-    height: 32px;
+    width: 64px;
+    height: 48px;
     box-sizing: border-box;
     display: flex;
     font-size: 32px;
     align-items: center;
     justify-content: center;
-    margin: 4px;
+    margin: 0px;
+    padding: 2px;
+
+    border-width: thin;
+    border-color: #fa606091;
+    border-style: solid;
+    border-radius: 5px;
 
     cursor: pointer;
 

src/components/react_button/react_button.vue

@@ -106,7 +106,7 @@
 
   .popover {
     transform: translateX(-64px) translateY(5px);
-    min-width: 70%;
+    min-width: 100%;
   }
 }