feat(game-lobby): all game lobby is responsive (#877)

## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced responsive design adjustments across various components, enhancing usability on different screen sizes. - Added a new constant for styling field set legends, promoting consistency in design. - **Bug Fixes** - Improved layout and visibility of components in the game lobby, ensuring better user experience. - **Style** - Updated CSS classes for responsive behavior in multiple components, including headers, buttons, and cards. - Enhanced visual presentation with margin and padding adjustments for better alignment and spacing.
antoinezanardi · Sep 16, 2024 · aaccf38 · aaccf38
1 parent 4cd09ac
commit aaccf38
Show file tree

Hide file tree

Showing 100 changed files with 92,493 additions and 93,084 deletions.
diff --git a/...Manager/RecipientRoleAdditionalCardsDisclaimer/RecipientRoleAdditionalCardsDisclaimer.vue b/...Manager/RecipientRoleAdditionalCardsDisclaimer/RecipientRoleAdditionalCardsDisclaimer.vue
@@ -6,7 +6,7 @@
     >
       <h4
         :key="recipientRoleAdditionalCardsDisclaimerAndIcon.disclaimer"
-        class="mb-8 text-center"
+        class="mb-4 md:mb-8 text-center"
       >
         <FontAwesomeIcon
           id="recipient-role-additional-cards-disclaimer-icon"

diff --git a/...anagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsManager.vue b/...anagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsManager.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     :id="`role-additional-cards-manager-${recipientRoleName}`"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend :role-name="recipientRoleName"/>
@@ -19,7 +19,7 @@
 
     <div
       id="recipient-role-additional-cards-placement"
-      class="flex font-semibold h-6 items-center justify-center mt-3"
+      class="flex font-semibold items-center justify-center mt-3"
     >
       <span v-if="additionalCardsPlacementText">
         <FontAwesomeIcon
@@ -41,6 +41,7 @@ import type { RecipientRoleAdditionalCardsManagerProps } from "~/components/page
 import RecipientRoleAdditionalCardsDisclaimer from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsDisclaimer/RecipientRoleAdditionalCardsDisclaimer.vue";
 import RecipientRoleAdditionalCardsMultiSelect from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";
 
 const props = defineProps<RecipientRoleAdditionalCardsManagerProps>();

diff --git a/...nager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.vue b/...nager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.vue
@@ -16,8 +16,9 @@
       :options="availableAdditionalCards"
       :placeholder="$t('components.RecipientRoleAdditionalCardsMultiSelect.pickOneToFiveCards')"
       :pt="{
-        'labelContainer': 'flex justify-center items-center h-20',
-        'chipItem': 'flex items-center bg-gray-800 rounded gap-2 px-2 py-1'
+        'labelContainer': 'flex justify-center items-center md:h-20',
+        'chipItem': 'flex items-center bg-gray-800 rounded md:gap-2 md:px-2 md:py-1',
+        'chipIcon': '!p-1 !w-2'
       }"
       reset-filter-on-hide
       :selection-limit="5"
@@ -40,14 +41,17 @@
 
       <template #chip="{ value }">
         <RoleImage
+          definition="small"
           :role-name="value.roleName"
-          size="small"
+          :sizes="roleImageSizes"
         />
 
-        <span>{{ value.label }}</span>
+        <span class="hidden lg:inline">
+          {{ value.label }}
+        </span>
 
         <PrimeVueButton
-          class="p-button-rounded p-button-sm p-button-text remove-additional-card-button"
+          class="!hidden md:!inline p-button-rounded p-button-sm p-button-text remove-additional-card-button"
           :data-testid="`recipient-role-additional-cards-multi-select-remove-${value.roleName}-for-${recipientRoleName}`"
           @click.stop="onClickFromRemoveAdditionalCardButton(value)"
         >
@@ -62,6 +66,7 @@
 
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import type { LabeledCreateGameAdditionalCardDto, RecipientRoleAdditionalCardsMultiSelectProps } from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/recipient-role-additional-cards-multi-select.types";
 import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
@@ -70,9 +75,13 @@ import type { RoleName } from "~/composables/api/role/types/role.types";
 import { useRoleName } from "~/composables/api/role/useRoleName";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";
 import { useRolesStore } from "~/stores/role/useRolesStore";
+import { BreakpointTypes } from "~/utils/enums/breakpoint.enums";
 
 const props = defineProps<RecipientRoleAdditionalCardsMultiSelectProps>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallerThanMd = breakpoints.smaller(BreakpointTypes.MD);
+
 const createGameDtoStore = useCreateGameDtoStore();
 const { getAdditionalCardsForRecipientInCreateGameDto } = createGameDtoStore;
 const { createGameDto } = storeToRefs(createGameDtoStore);
@@ -81,6 +90,8 @@ const rolesStore = useRolesStore();
 const { getRolesForRecipientRoleName } = rolesStore;
 const { getRoleNameLabel } = useRoleName();
 
+const roleImageSizes = computed<string>(() => (isSmallerThanMd.value ? "35px" : "50px"));
+
 const selectedAdditionalCards = computed<CreateGameAdditionalCardDto[]>({
   get: () => getAdditionalCardsForRecipientInCreateGameDto(props.recipientRoleName),
   set: (value: CreateGameAdditionalCardDto[]) => {

diff --git a/...meLobbyHeaderAdditionalCardsManagerButton/GameLobbyHeaderAdditionalCardsManagerButton.vue b/...meLobbyHeaderAdditionalCardsManagerButton/GameLobbyHeaderAdditionalCardsManagerButton.vue
@@ -11,7 +11,10 @@
       icon="clover"
     />
 
-    <span id="game-lobby-header-additional-cards-manager-button-text">
+    <span
+      id="game-lobby-header-additional-cards-manager-button-text"
+      class="hidden md:inline"
+    >
       {{ $t('components.GameLobbyHeaderAdditionalCardsManagerButton.additionalCards') }}
     </span>
 

diff --git a/...GameLobbyHeaderSetupButtons/GameLobbyHeaderOptionsButton/GameLobbyHeaderOptionsButton.vue b/...GameLobbyHeaderSetupButtons/GameLobbyHeaderOptionsButton/GameLobbyHeaderOptionsButton.vue
@@ -10,7 +10,10 @@
       icon="magic-wand-sparkles"
     />
 
-    <span id="button-text">
+    <span
+      id="button-text"
+      class="hidden md:inline"
+    >
       {{ $t("components.GameLobbyHeaderOptionsButton.gameOptions") }}
     </span>
 

diff --git a/...ons/GameLobbyHeaderPositionCoordinatorButton/GameLobbyHeaderPositionCoordinatorButton.vue b/...ons/GameLobbyHeaderPositionCoordinatorButton/GameLobbyHeaderPositionCoordinatorButton.vue
@@ -1,18 +1,21 @@
 <template>
   <PrimeVueButton
     id="game-lobby-header-position-coordinator-button"
-    :label="$t('components.GameLobbyHeaderPositionCoordinatorButton.positionCoordinator')"
     :pt="{ 'root': '!border-sky-600' }"
     severity="info"
     size="small"
     @click.prevent="onClickFromGamePositionCoordinatorButton"
   >
-    <template #icon>
-      <FontAwesomeIcon
-        class="animate__animated animate__heartBeat animate__slow"
-        icon="users"
-      />
-    </template>
+    <FontAwesomeIcon
+      class="animate__animated animate__heartBeat animate__slow"
+      icon="users"
+    />
+
+    <span
+      class="hidden md:inline"
+    >
+      {{ $t("components.GameLobbyHeaderPositionCoordinatorButton.positionCoordinator") }}
+    </span>
   </PrimeVueButton>
 </template>
 

diff --git a/...es/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderSetupButtons.vue b/...es/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderSetupButtons.vue
@@ -1,13 +1,14 @@
 <template>
-  <PrimeVueButtonGroup>
+  <PrimeVueButtonGroup class="text-center w-full">
     <TransitionGroup
       name="fade-list"
+      tag="div"
     >
       <GameLobbyHeaderOptionsButton
         id="game-lobby-header-options-button"
         key="game-options-button"
         ref="gameLobbyHeaderOptionsButton"
-        class="fade-list-item"
+        class="fade-list-item h-10 md:h-auto md:w-auto w-1/4"
         @game-options-button-click="onGameOptionsButtonClickFromGameOptionButton"
       />
 
@@ -16,7 +17,7 @@
         id="game-lobby-header-position-coordinator-button"
         key="game-position-coordinator-button"
         ref="gameLobbyHeaderPositionCoordinatorButton"
-        class="fade-list-item"
+        class="fade-list-item h-10 md:h-auto md:w-auto w-1/4"
         @position-coordinator-button-click="onPositionCoordinatorButtonClickFromGamePositionCoordinatorButton"
       />
 
@@ -25,7 +26,7 @@
         id="game-lobby-header-additional-cards-manager-button"
         key="game-additional-cards-manager-button"
         ref="gameLobbyHeaderAdditionalCardsManagerButton"
-        class="fade-list-item"
+        class="fade-list-item h-10 md:h-auto md:w-auto w-1/4"
         @additional-cards-manager-button-click="onAdditionalCardsManagerButtonClickFromGameAdditionalCardsManagerButton"
       />
     </TransitionGroup>

diff --git a/app/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHub.vue b/app/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHub.vue
@@ -9,7 +9,7 @@
       'root': 'h-9/10',
       'icons': 'pb-2',
       'header': '!py-2',
-      'content': 'w-x-screen-9/10 max-w-x-screen-9/10 h-full !py-0',
+      'content': 'w-x-screen-9/10 max-w-x-screen-9/10 h-full !py-0 !px-0 md:!px-2',
       'footer': '!py-2'
     }"
     :visible="isVisible"

diff --git a/...es/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubFooter/GameLobbyOptionsHubFooter.vue b/...es/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubFooter/GameLobbyOptionsHubFooter.vue
@@ -5,7 +5,7 @@
   >
     <PrimeVueDivider class="!my-2"/>
 
-    <div class="flex justify-between w-full">
+    <div class="flex gap-1 justify-between w-full">
       <Transition
         mode="out-in"
         name="fade"

diff --git a/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabActor/GameLobbyOptionsHubRolesTabActor.vue b/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabActor/GameLobbyOptionsHubRolesTabActor.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-actor"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="actor"/>
@@ -28,6 +28,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...HubRolesTab/GameLobbyOptionsHubRolesTabBearTamer/GameLobbyOptionsHubRolesTabBearTamer.vue b/...HubRolesTab/GameLobbyOptionsHubRolesTabBearTamer/GameLobbyOptionsHubRolesTabBearTamer.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-bear-tamer"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="bear-tamer"/>
@@ -28,6 +28,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...bRolesTab/GameLobbyOptionsHubRolesTabBigBadWolf/GameLobbyOptionsHubRolesTabBigBadWolf.vue b/...bRolesTab/GameLobbyOptionsHubRolesTabBigBadWolf/GameLobbyOptionsHubRolesTabBigBadWolf.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-big-bad-wolf"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="big-bad-wolf"/>
@@ -28,6 +28,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabCupid/GameLobbyOptionsHubRolesTabCupid.vue b/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabCupid/GameLobbyOptionsHubRolesTabCupid.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-cupid"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="cupid"/>
@@ -43,6 +43,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...nsHubRolesTab/GameLobbyOptionsHubRolesTabDefender/GameLobbyOptionsHubRolesTabDefender.vue b/...nsHubRolesTab/GameLobbyOptionsHubRolesTabDefender/GameLobbyOptionsHubRolesTabDefender.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-defender"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="defender"/>
@@ -28,6 +28,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabElder/GameLobbyOptionsHubRolesTabElder.vue b/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabElder/GameLobbyOptionsHubRolesTabElder.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-elder"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="elder"/>
@@ -15,7 +15,7 @@
       option-icon-class="text-red-500"
       :option-label="$t('components.GameLobbyOptionsHubRolesTabElder.options.livesCountAgainstWerewolves.label')"
     >
-      <PrimeVueFloatLabel>
+      <PrimeVueFloatLabel class="!mt-4 md:!mt-0">
         <label
           id="game-lobby-options-hub-roles-tab-elder-lives-count-against-werewolves-label"
           for="game-lobby-options-hub-roles-tab-elder-lives-count-against-werewolves-input"
@@ -63,6 +63,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...LobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabFox/GameLobbyOptionsHubRolesTabFox.vue b/...LobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabFox/GameLobbyOptionsHubRolesTabFox.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-fox"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="fox"/>
@@ -28,6 +28,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...ionsHubRolesTab/GameLobbyOptionsHubRolesTabGeneral/GameLobbyOptionsHubRolesTabGeneral.vue b/...ionsHubRolesTab/GameLobbyOptionsHubRolesTabGeneral/GameLobbyOptionsHubRolesTabGeneral.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-general"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <div class="flex gap-4 items-center">
@@ -48,6 +48,7 @@
 import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";

diff --git a/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabIdiot/GameLobbyOptionsHubRolesTabIdiot.vue b/...yOptionsHubRolesTab/GameLobbyOptionsHubRolesTabIdiot/GameLobbyOptionsHubRolesTabIdiot.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-idiot"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="idiot"/>
@@ -28,6 +28,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";

diff --git a/...bRolesTab/GameLobbyOptionsHubRolesTabLittleGirl/GameLobbyOptionsHubRolesTabLittleGirl.vue b/...bRolesTab/GameLobbyOptionsHubRolesTabLittleGirl/GameLobbyOptionsHubRolesTabLittleGirl.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     id="game-lobby-options-hub-roles-tab-little-girl"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend role-name="little-girl"/>
@@ -28,6 +28,7 @@ import { storeToRefs } from "pinia";
 import AffirmativeToggleButton from "~/components/shared/buttons/AffirmativeToggleButton/AffirmativeToggleButton.vue";
 import GameOptionInputGroup from "~/components/shared/game/game-options/GameOptionInputGroup/GameOptionInputGroup.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { CreateGameDto } from "~/composables/api/game/dto/create-game/create-game.dto";
 import { useGameOptionsTexts } from "~/composables/api/game/game-options/useGameOptionsTexts";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";