From 4666e55ad6dd92a3d0496e4d4decae9ca88549c4 Mon Sep 17 00:00:00 2001
From: Pedro Martin <pataruco@gmail.com>
Date: Tue, 10 Dec 2024 14:33:43 +0000
Subject: [PATCH] fix: dropdown in form width

---
 website/src/components/header/locale-selector.tsx    | 1 +
 website/src/components/signup-form/index.module.scss | 2 ++
 website/src/components/signup-form/index.tsx         | 1 +
 3 files changed, 4 insertions(+)

diff --git a/website/src/components/header/locale-selector.tsx b/website/src/components/header/locale-selector.tsx
index d094b8b..92d17c3 100644
--- a/website/src/components/header/locale-selector.tsx
+++ b/website/src/components/header/locale-selector.tsx
@@ -52,6 +52,7 @@ const LocaleSelector: React.FC<LocaleSelectorProps> = ({
       }
       slotProps={{
         popup: {
+          disablePortal: true,
           className: isMobile
             ? `${styles.popup} ${styles['popup--mobile']}`
             : styles.popup,
diff --git a/website/src/components/signup-form/index.module.scss b/website/src/components/signup-form/index.module.scss
index 4468c35..c10395f 100644
--- a/website/src/components/signup-form/index.module.scss
+++ b/website/src/components/signup-form/index.module.scss
@@ -51,6 +51,7 @@
   // It is important because styles are inlined
   top: var(--spacing-1) !important;
   z-index: 10;
+  width: 100%;
 }
 
 .listbox {
@@ -122,6 +123,7 @@
   }
 
   &__field {
+    position: relative;
     & p {
       color: var(--foreground-error);
       margin-top: var(--spacing-1);
diff --git a/website/src/components/signup-form/index.tsx b/website/src/components/signup-form/index.tsx
index 0e2e3da..e57f86b 100644
--- a/website/src/components/signup-form/index.tsx
+++ b/website/src/components/signup-form/index.tsx
@@ -204,6 +204,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ lang }) => {
                     onChange={handleSelectRoleOnChange}
                     slotProps={{
                       popup: {
+                        disablePortal: true,
                         className: styles.popup,
                       },
                       listbox: {