From d7854f38098109a9679c48cced4ecb7326c594fb Mon Sep 17 00:00:00 2001
From: jacobguinther <jacobgguinther@gmail.com>
Date: Tue, 16 Jun 2020 13:31:32 -0600
Subject: [PATCH] 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 | 14 ++++----------
 website/client/src/components/ui/statsbar.vue  |  3 +++
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/website/client/src/components/header/index.vue b/website/client/src/components/header/index.vue
index 8531737395..5cc76ba717 100644
--- a/website/client/src/components/header/index.vue
+++ b/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>
diff --git a/website/client/src/components/ui/statsbar.vue b/website/client/src/components/ui/statsbar.vue
index 667e4e3cbb..9e7c30c628 100644
--- a/website/client/src/components/ui/statsbar.vue
+++ b/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 {