Remove party banner when below tablet size (fixes 10827) (#12289)

* Remove party banner when below tablet size
- Use Bootstrap breakpoints to remove party banner @ 768px
- Remove old media query that removed party button on small screens

* Make progress bars smaller @ 992px
- Makes room for party piece

website/client/src/components/header/index.vue

@@ -19,10 +19,10 @@
       />
       <div
         v-if="hasParty"
-        class="view-party d-flex align-items-center"
+        class="view-party d-none d-md-flex align-items-center"
       >
         <button
-          class="btn btn-primary view-party-button"
+          class="btn btn-primary"
           @click="showPartyMembers()"
         >
           {{ $t('viewParty') }}
@@ -32,7 +32,7 @@
         v-if="hasParty"
         ref="partyMembersDiv"
         v-resize="1500"
-        class="party-members d-flex"
+        class="party-members d-none d-md-flex "
         @resized="setPartyMembersWidth($event)"
       >
         <!-- eslint-disable vue/no-use-v-if-with-v-for -->
@@ -51,7 +51,7 @@
       </div>
       <div
         v-else
-        class="no-party d-flex justify-content-center text-center"
+        class="no-party d-none d-md-flex  justify-content-center text-center mr-4"
       >
         <div class="align-self-center">
           <h3>{{ $t('battleWithFriends') }}</h3>
@@ -119,12 +119,6 @@
       margin-top: 16px;
     }
   }
-
-  @media only screen and (max-width: 768px) {
-    .view-party-button {
-      display: none;
-    }
-  }
 </style>
 
 <script>

website/client/src/components/ui/statsbar.vue

@@ -60,6 +60,9 @@
     border-radius: 1px;
     height: 12px;
     background-color: $header-dark-background;
+    @media (max-width: 992px) {
+      min-width: 160px;
+    }
   }
 
   .progress-container > .progress > .progress-bar {