fix emotions buttons markup

webapp/components/Emotions/Emotions.vue

@@ -1,15 +1,17 @@
 <template>
   <ds-flex :gutter="{ lg: 'large' }" class="emotions-flex">
-    <div v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)" :key="emotion">
-      <ds-flex-item :width="{ lg: '100%' }">
-        <hc-emotions-button
-          @toggleEmotion="toggleEmotion"
-          :PostsEmotionsCountByEmotion="PostsEmotionsCountByEmotion"
-          :iconPath="iconPath(emotion)"
-          :emotion="emotion"
-        />
-      </ds-flex-item>
-    </div>
+    <ds-flex-item
+      v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)"
+      :key="emotion"
+      :width="{ lg: '100%' }"
+    >
+      <hc-emotions-button
+        @toggleEmotion="toggleEmotion"
+        :PostsEmotionsCountByEmotion="PostsEmotionsCountByEmotion"
+        :iconPath="iconPath(emotion)"
+        :emotion="emotion"
+      />
+    </ds-flex-item>
   </ds-flex>
 </template>
 <script>

webapp/components/EmotionsButton/EmotionsButton.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <ds-button size="large" ghost @click="toggleEmotion(emotion)" class="emotions-buttons">
-      <img :src="iconPath" width="40" />
-    </ds-button>
+  <div class="emotions-button">
+    <base-button circle ghost @click="toggleEmotion(emotion)">
+      <img :src="iconPath" />
+    </base-button>
     <ds-space margin-bottom="xx-small" />
     <div class="emotions-mobile-space">
       <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
@@ -27,7 +27,18 @@ export default {
 }
 </script>
 <style lang="scss">
+.emotions-button {
+  > .base-button {
+    padding: 0;
+
+    &:hover {
+      padding: 2px;
+    }
+  }
+}
+
 .emotions-flex {
+  width: 100%;
   justify-content: space-evenly;
   text-align: center;
 }
@@ -36,11 +47,6 @@ export default {
   font-size: $font-size-small;
 }
 
-.emotions-buttons {
-  &:hover {
-    background-color: $background-color-base;
-  }
-}
 @media only screen and (max-width: 960px) {
   .emotions-mobile-space {
     margin-bottom: 32px;

webapp/pages/post/_id/_slug/index.vue

@@ -48,7 +48,7 @@
       <ds-space margin-top="x-large">
         <ds-flex :gutter="{ lg: 'small' }">
           <ds-flex-item
-            :width="{ lg: '75%', md: '75%', sm: '75%' }"
+            :width="{ lg: '75%', md: '75%', sm: '75%', base: '100%' }"
             class="emotions-buttons-mobile"
           >
             <hc-emotions :post="post" />