moving button group to the bototm of the modal, as it is not priority information, swapped out the active CSS for the existing .townsfolt class took the button group out of the UL and surounded in a div.

src/components/modals/RoleModal.vue

@@ -8,21 +8,6 @@
           : "bluffing"
       }}
     </h3>
-    <ul>
-      <li class="button-group" v-if="isBluffs()">
-        <span
-          class="button"
-          :class="{ active: tab === 'editionRoles' }"
-          @click="tab = 'editionRoles'"
-          >Edtition Roles</span
-        >
-        <span
-          class="button"
-          :class="{ active: tab === 'otherTravellers' }"
-          @click="tab = 'otherTravellers'"
-          >Other Travellers</span
-        >
-      </li>
     <ul class="tokens" v-if="tab === 'editionRoles'">
       <li
         v-for="role in availableRoles"
@@ -43,7 +28,20 @@
         <Token :role="role" />
       </li>
     </ul>
-    </ul>
+    <div class="button-group" v-if="isBluffs()">
+      <span
+        class="button"
+        :class="{ townsfolk: tab === 'editionRoles' }"
+        @click="tab = 'editionRoles'"
+        >Edtition Roles</span
+      >
+      <span
+        class="button"
+        :class="{ townsfolk: tab === 'otherTravellers' }"
+        @click="tab = 'otherTravellers'"
+        >Other Travellers</span
+      >
+    </div>
   </Modal>
 </template>
 
@@ -145,14 +143,6 @@ ul.tokens li {
   }
 }
 
-.button.active {
-  background: linear-gradient(
-    to bottom,
-    $townsfolk 0%,
-    rgba(0, 0, 0, 0.7) 100%
-  );
-}
-
 #townsquare.spectator ul.tokens li.traveler {
   display: none;
 }