From 64f1f73b454709afd0379674a0adc76a6476cf6e Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 3 Aug 2024 16:30:56 +0200
Subject: [PATCH] Improved responsive styling character select screen

---
 src/screens/Characters.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 0e8e2fa..881480d 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="bg-gray-300 relative">
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
-    <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-20">
+    <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
       <div class="filler"></div>
-      <div class="flex justify-center flex-wrap gap-14 w-full max-h-[650px] overflow-auto" v-if="!isLoading">
-        <div v-for="character in characters" :key="character.id" class="group m-4 w-[170px] h-[275px] flex flex-col rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
+      <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
+        <div v-for="character in characters" :key="character.id" class="group first:ml-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
           <!-- @TODO : Add a confirmation dialog -->
@@ -19,7 +19,7 @@
           <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-4/6 h-[3px] bg-white rounded-[3px] left-1/2 -bottom-4 -translate-x-1/2 transition-all ease-in-out duration-300"></div>
         </div>
 
-        <div class="character new-character m-4 w-[170px] h-[275px] flex flex-col rounded-2xl relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
+        <div class="character new-character mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
           <button class="h-full w-full py-10 flex flex-col justify-between" @click="isModalOpen = true">
             <div class="filler"></div>
             <img class="w-24 h-24 m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
@@ -46,7 +46,7 @@
 
   <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0">Create your character</h3>
+      <h3 class="m-0 font-medium">Create your character</h3>
     </template>
 
     <template #modalBody>