Modal responsive improvements (#14087)

* stack profile actions on smaller screens

* stack avatar and stats for even smaller screens

* remove unnecessary classes to keep profile nav on the same line

* adjust media query width

* refactor stats removing unnecessary classes and simplifying with less elements and relying more on flexbox

* adjust breakpoints for modal vs pofile page

* more margin for avatar

* handle allocation on middle size more gracefully

Co-authored-by: scoffrin <scoffrin@indeed.com>

website/client/src/components/userMenu/profile.vue

@@ -126,7 +126,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-12 col-md-6 offset-md-3 text-center nav">
+      <div class="text-center nav">
         <div
           class="nav-item"
           :class="{active: selectedPage === 'profile'}"
@@ -470,6 +470,7 @@
   .gift-icon svg {
     height: 14px;
   }
+
 </style>
 
 <style lang="scss" scoped>
@@ -538,6 +539,7 @@
   }
 
   .nav {
+    width: 100%;
     font-weight: bold;
     min-height: 40px;
     justify-content: center;
@@ -710,6 +712,27 @@
       }
     }
   }
+
+  @media (max-width: 990px) {
+    .profile-actions {
+      flex-direction: column;
+    }
+    .profile-actions :not(:last-child) {
+      margin-bottom: 15px;
+    }
+    .profile-actions {
+      margin-right: 0;
+    }
+  }
+
+  @media (max-width: 550px) {
+    .member-details {
+      flex-direction: column;
+    }
+    .member-details .avatar {
+      margin-bottom: 15px;
+    }
+  }
 </style>
 
 <script>