From bfefe5dfa9bdfb04b632bca7c9c49c6d36531fa8 Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Tue, 26 Sep 2023 17:12:24 -0500
Subject: [PATCH] fix(profiles): moar layout fixes

---
 .../src/components/groups/membersModal.vue    | 31 ++++++-------------
 .../client/src/components/header/index.vue    |  1 +
 .../client/src/components/memberDetails.vue   |  1 -
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/website/client/src/components/groups/membersModal.vue b/website/client/src/components/groups/membersModal.vue
index b987af65a5..939925d0ec 100644
--- a/website/client/src/components/groups/membersModal.vue
+++ b/website/client/src/components/groups/membersModal.vue
@@ -84,7 +84,7 @@
         v-if="invites.length > 0"
         class="row"
       >
-        <div class="col-6 offset-3 nav">
+        <div class="col-6 offset-3 nav mt-2 mb-3">
           <div
             class="nav-item"
             :class="{active: selectedPage === 'members'}"
@@ -111,17 +111,18 @@
           :key="member._id"
           class="row"
         >
-          <div class="col-11 no-padding-left">
+          <div class="col-11 pl-0">
             <member-details
               :member="member"
               :class-badge-position="'next-to-name'"
+              class="ml-4"
             />
           </div>
           <div class="col-1 actions">
             <b-dropdown right="right">
               <div
                 slot="button-content"
-                class="svg-icon inline dots"
+                class="svg-icon inline dots pt-1"
                 v-html="icons.dots"
               ></div>
               <b-dropdown-item @click="sendMessage(member)">
@@ -216,7 +217,7 @@
           :key="member._id"
           class="row"
         >
-          <div class="col-11 no-padding-left">
+          <div class="col-11 pl-0">
             <member-details :member="member" />
           </div>
           <div class="col-1 actions">
@@ -259,10 +260,6 @@
       color: #878190;
     }
 
-    .no-padding-left {
-      padding-left: 0;
-    }
-
     .modal-body {
       padding-left: 0;
       padding-right: 0;
@@ -303,21 +300,15 @@
   }
 
   .actions {
-    padding-top: 5em;
-
+    .b-dropdown {
+      position: absolute;
+      right: 24px;
+      top: 8px;
+    }
     .dots {
       height: 16px;
       width: 4px;
     }
-
-    .btn-group {
-      margin-left: -2em;
-      margin-top: -2em;
-    }
-
-    .action-icon {
-      margin-right: 1em;
-    }
   }
 
   #members-modal_modal_body {
@@ -353,8 +344,6 @@
 
   .nav {
     font-weight: bold;
-    margin-bottom: .5em;
-    margin-top: .5em;
   }
 
   .nav-item {
diff --git a/website/client/src/components/header/index.vue b/website/client/src/components/header/index.vue
index 7d95387d9c..a97d5e3205 100644
--- a/website/client/src/components/header/index.vue
+++ b/website/client/src/components/header/index.vue
@@ -16,6 +16,7 @@
         :class-badge-position="'next-to-name'"
         :is-header="true"
         :disable-name-styling="true"
+        class="mr-3"
       />
       <div
         v-if="hasParty"
diff --git a/website/client/src/components/memberDetails.vue b/website/client/src/components/memberDetails.vue
index 7311cb60af..e8f81ef2a1 100644
--- a/website/client/src/components/memberDetails.vue
+++ b/website/client/src/components/memberDetails.vue
@@ -111,7 +111,6 @@
 
   .member-stats {
     padding-left: 12px;
-    padding-right: 24px;
     opacity: 1;
     transition: width 0.15s ease-out;
   }