[style]: style issues fixed

Author: gozle

src/components/Generator/ChooseGender.vue

@@ -39,7 +39,7 @@ const genderSelected = (item: GenderOption): boolean => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-8">
+  <div class="flex flex-col gap-8 px-4 pb-8">
     <div class="columns-3 self-center mt-10">
       <div
         v-for="(item, index) in genders"

src/components/Generator/ElementTypeSidebar.vue

@@ -139,7 +139,7 @@ const exportAsPNG = () => {
       </ul>
     </div>
 
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2 mt-8">
       <p class="text-center">
         Your current session is being saved automatically in URL 👌
       </p>

src/components/Generator/index.vue

@@ -88,7 +88,7 @@ initCharacter();
 </script>
 
 <template>
-  <div>
+  <div class="px-4 py-8">
     <ChooseGender v-if="!gender" @choose="setGender" />
 
     <div v-else class="generator relative">

src/components/Header/index.vue

@@ -20,7 +20,7 @@ const nav = ref<HeaderNavItem[]>([
 
 <template>
   <header class="header__wrapper dark:bg-black">
-    <div class="xl:container mx-auto">
+    <div class="xl:container mx-auto px-2">
       <div class="header flex items-center justify-between py-8">
         <router-link
           to="/"
@@ -53,7 +53,7 @@ const nav = ref<HeaderNavItem[]>([
           <div class="header__panel">
             <router-link
               to="/generate"
-              class="uppercase text-xs bg-violet-700 py-2 px-6 rounded-xl dark:text-white font-bold hover:opacity-50 ease-linear duration-150"
+              class="flex items-center justify-center uppercase text-xs bg-violet-700 py-2 px-6 rounded-xl dark:text-white font-bold hover:opacity-50 ease-linear duration-150"
             >
               Generate
             </router-link>

src/pages/index.vue

@@ -48,6 +48,7 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
+  overflow: hidden;
 
   &__images {
     display: grid;