From c2b2a6fcefde2c8cddedd98bbcb7e6917948fc8a Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Wed, 19 Feb 2025 14:07:42 -0500
Subject: [PATCH] Adds scroll to overflowing dialog

---
 frontend/src/assets/main.css                        | 13 +++++++++----
 frontend/src/views/creators/BannerEditor.vue        |  2 +-
 frontend/src/views/creators/CreateCreator.vue       |  2 +-
 frontend/src/views/creators/CreatorLogoEditor.vue   |  2 +-
 .../src/views/creators/DonationButtonBanner.vue     |  2 +-
 frontend/src/views/profile/account/AliasDialog.vue  |  2 +-
 frontend/src/views/profile/account/EmailDialog.vue  |  2 +-
 .../src/views/profile/account/FullnameDialog.vue    |  4 ++--
 .../views/profile/creators/ChangeStripeIdDialog.vue |  2 +-
 .../views/profile/creators/ChangeTitleDialog.vue    |  2 +-
 .../src/views/profile/creators/SocialsDialog.vue    |  8 ++++----
 11 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 231bcd1..902ad4d 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -46,26 +46,31 @@
     }
 
     div.dialog {
+        @apply max-h-[90vh];
         @apply place-self-center;
     }
 
     div.card {
         @apply w-full max-w-[1024px];
         @apply rounded-xl p-4;
+        @apply flex flex-col gap-4;
         @apply bg-hSurface text-hOnSurface;
     }
 
     div.card-title {
         @apply font-sans font-bold text-2xl;
-        @apply mb-8;
+        @apply p-2;
     }
 
-    div.card-entry {
-        @apply mb-4;
+    div.card-content {
+        @apply flex flex-col gap-4;
+        @apply p-2;
+        @apply overflow-y-auto;
     }
 
     div.card-actions {
-        @apply flex flex-row gap-6 justify-end;
+        @apply p-2;
+        @apply flex flex-row gap-4 justify-end;
     }
 
     div.card-actions > * {
diff --git a/frontend/src/views/creators/BannerEditor.vue b/frontend/src/views/creators/BannerEditor.vue
index 9cad02b..1fdc768 100644
--- a/frontend/src/views/creators/BannerEditor.vue
+++ b/frontend/src/views/creators/BannerEditor.vue
@@ -4,7 +4,7 @@
       Bannière
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
       <img
           :src="fileUrl || fallbackUrl"
           alt="Aperçu de la bannière"
diff --git a/frontend/src/views/creators/CreateCreator.vue b/frontend/src/views/creators/CreateCreator.vue
index dd8b26a..c6fe85e 100644
--- a/frontend/src/views/creators/CreateCreator.vue
+++ b/frontend/src/views/creators/CreateCreator.vue
@@ -55,7 +55,7 @@ async function createAccount() {
         Créez votre Hutopy.
       </div>
 
-      <div class="card-entry">
+      <div class="card-content">
         <name-editor
             v-model:name="creatorName"
             creator-name-reservation-id="creatorNameDirty"
diff --git a/frontend/src/views/creators/CreatorLogoEditor.vue b/frontend/src/views/creators/CreatorLogoEditor.vue
index c19875c..d7858f1 100644
--- a/frontend/src/views/creators/CreatorLogoEditor.vue
+++ b/frontend/src/views/creators/CreatorLogoEditor.vue
@@ -4,7 +4,7 @@
       Logo
     </div>
 
-    <div class="card-entry flex flex-col items-center">
+    <div class="card-content flex flex-col items-center">
       <img
           :src="fileUrl || fallbackUrl"
           alt="Aperçu du logo"
diff --git a/frontend/src/views/creators/DonationButtonBanner.vue b/frontend/src/views/creators/DonationButtonBanner.vue
index 52efa4c..234ed5d 100644
--- a/frontend/src/views/creators/DonationButtonBanner.vue
+++ b/frontend/src/views/creators/DonationButtonBanner.vue
@@ -12,7 +12,7 @@
         {{ $t('isupportbtn.isupport') }}
       </div>
 
-      <div class="card-entry">
+      <div class="card-content">
         <v-text-field
             v-model="tipAmountInDollars"
             type="number"
diff --git a/frontend/src/views/profile/account/AliasDialog.vue b/frontend/src/views/profile/account/AliasDialog.vue
index f152d31..028278e 100644
--- a/frontend/src/views/profile/account/AliasDialog.vue
+++ b/frontend/src/views/profile/account/AliasDialog.vue
@@ -6,7 +6,7 @@
       {{ $t('personnalinformation.alias') }}
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="alias"
diff --git a/frontend/src/views/profile/account/EmailDialog.vue b/frontend/src/views/profile/account/EmailDialog.vue
index d4c920d..5e20da0 100644
--- a/frontend/src/views/profile/account/EmailDialog.vue
+++ b/frontend/src/views/profile/account/EmailDialog.vue
@@ -4,7 +4,7 @@
       Courriel
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
       <v-text-field
           v-model="email"
           label="Votre courriel"
diff --git a/frontend/src/views/profile/account/FullnameDialog.vue b/frontend/src/views/profile/account/FullnameDialog.vue
index 81bd0ae..9bd26ab 100644
--- a/frontend/src/views/profile/account/FullnameDialog.vue
+++ b/frontend/src/views/profile/account/FullnameDialog.vue
@@ -19,7 +19,7 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
       {{ $t('personnalinformation.fullname') }}
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="firstname"
@@ -27,7 +27,7 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
       ></v-text-field>
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="lastname"
diff --git a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
index 7aa5367..07951c2 100644
--- a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
@@ -38,7 +38,7 @@ const cancel = () => {
       Modifier le Stripe ID
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
       <v-text-field
           v-model="stripeId"
           label="Stripe Id"
diff --git a/frontend/src/views/profile/creators/ChangeTitleDialog.vue b/frontend/src/views/profile/creators/ChangeTitleDialog.vue
index 73b739e..d6f8005 100644
--- a/frontend/src/views/profile/creators/ChangeTitleDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeTitleDialog.vue
@@ -42,7 +42,7 @@ const cancel = () => {
       Modifier le Titre
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
       <v-text-field
           v-model="title"
           label="Titre"
diff --git a/frontend/src/views/profile/creators/SocialsDialog.vue b/frontend/src/views/profile/creators/SocialsDialog.vue
index 6ac97ee..6ac0530 100644
--- a/frontend/src/views/profile/creators/SocialsDialog.vue
+++ b/frontend/src/views/profile/creators/SocialsDialog.vue
@@ -72,7 +72,7 @@ const cancel = () => {
       Reseaux Sociaux
     </div>
 
-    <div class="card-entry">
+    <div class="card-content">
 
       <div class="editor-line">
         <facebook class="social-icon"></facebook>
@@ -174,9 +174,8 @@ const cancel = () => {
 <style scoped>
 
 .editor-line {
-  @apply flex flex-row gap-6;
+  @apply flex flex-row gap-4;
   @apply items-center;
-  @apply mb-4;
 }
 
 .social-icon {
@@ -184,10 +183,11 @@ const cancel = () => {
 }
 
 .input-field {
-  @apply w-full p-4;
+  @apply w-full p-[10px];
   @apply rounded-sm;
   @apply transition duration-200;
   @apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary;
+  @apply hover:ring-hutopyPrimary;
   @apply placeholder:text-[#6D6C70]
 }