clean up + add btn-group css class

src/App.scss

@@ -283,6 +283,31 @@ i[class*=icon-] {
   color: var(--icon, $fallback--icon)
 }
 
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+.btn-group {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  button {
+    position: relative;
+    flex: 1 1 auto;
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
 
 .container {
   display: flex;

src/components/moderation_tools/moderation_tools.vue

@@ -61,7 +61,7 @@
         </span>
       </div>
     </div>
-    <button slot="reference" class="btn btn-default moderation-toggle-btn" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
+    <button slot="reference" class="btn btn-default btn-block" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
       {{ $t('user_card.admin_menu.moderation') }}
     </button>
   </Popper>
@@ -107,11 +107,4 @@
   }
 }
 
-.moderation-toggle-btn {
-  &#{&} {
-    margin: 0;
-    width: 100%;
-  }
-}
-
 </style>

src/components/user_card/user_card.vue

@@ -46,7 +46,7 @@
         </div>
       </div>
       <div v-if="loggedIn && isOtherUser" class="user-interactions">
-        <div>
+        <div class="btn-group">
           <button @click="unfollowUser" class="btn btn-default pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')" v-if="user.following">
             <template v-if="followRequestInProgress">
               {{ $t('user_card.follow_progress') }}
@@ -66,9 +66,6 @@
               {{ $t('user_card.follow') }}
             </template>
           </button>
-        </div>
-
-        <div>
           <ProgressButton class="btn btn-default" :click="subscribeUser" v-if="!user.subscribed">
             {{ $t('user_card.subscribe') }}
           </ProgressButton>
@@ -78,19 +75,19 @@
         </div>
 
         <div>
-          <button @click="unmuteUser" class="btn btn-default pressed" v-if="user.muted">
+          <button @click="unmuteUser" class="btn btn-default btn-block pressed" v-if="user.muted">
             {{ $t('user_card.muted') }}
           </button>
-          <button @click="muteUser" class="btn btn-default" v-else>
+          <button @click="muteUser" class="btn btn-default btn-block" v-else>
             {{ $t('user_card.mute') }}
           </button>
         </div>
 
         <div>
-          <button @click="unblockUser" class="btn btn-default pressed" v-if="user.statusnet_blocking">
+          <button @click="unblockUser" class="btn btn-default btn-block pressed" v-if="user.statusnet_blocking">
             {{ $t('user_card.blocked') }}
           </button>
-          <button @click="blockUser" class="btn btn-default" v-else>
+          <button @click="blockUser" class="btn btn-default btn-block" v-else>
             {{ $t('user_card.block') }}
           </button>
         </div>
@@ -365,23 +362,17 @@
       flex: 1 0 0;
       margin: 0 .75em .6em 0;
       white-space: nowrap;
+    }
 
-      > button {
+    button {
       margin: 0;
-        width: 100%;
-      }
-    }
 
-    .remote-button {
+      &.pressed {
-      height: 28px;
-      margin: 0;
-    }
-
-    button.pressed {
         border-bottom-color: rgba(255, 255, 255, 0.2);
         border-top-color: rgba(0, 0, 0, 0.2);
       }
     }
+  }
 }
 
 .user-counts {