From 493fb7ac724d4af2f3e466d20126b973a69a66ef Mon Sep 17 00:00:00 2001
From: Aqib Zaib <chaqib4u@gmail.com>
Date: Fri, 13 Sep 2024 14:49:09 +0500
Subject: [PATCH 1/2] Fix dropdown cutoff issue for long text in mobile view
 (#7035)

---
 apps/site/components/Common/Select/index.tsx | 31 ++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/site/components/Common/Select/index.tsx b/apps/site/components/Common/Select/index.tsx
index 3d12632e7ed20..79567c2289e53 100644
--- a/apps/site/components/Common/Select/index.tsx
+++ b/apps/site/components/Common/Select/index.tsx
@@ -4,7 +4,7 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
-import { useId, useMemo } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { FC } from 'react';
 
 import type { FormattedMessage } from '@/types';
@@ -51,7 +51,9 @@ const Select: FC<SelectProps> = ({
   ariaLabel,
 }) => {
   const id = useId();
-
+  const spanRef = useRef<HTMLSpanElement>(null);
+  const [elementWidth, setElementWidth] = useState(0);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const mappedValues = useMemo(() => {
     let mappedValues = values;
 
@@ -66,6 +68,24 @@ const Select: FC<SelectProps> = ({
     return mappedValues;
   }, [values]);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (spanRef.current) {
+      setElementWidth(spanRef.current.offsetWidth);
+    }
+  }, [windowWidth]);
+
   return (
     <span
       className={classNames(
@@ -73,6 +93,7 @@ const Select: FC<SelectProps> = ({
         { [styles.inline]: inline },
         className
       )}
+      ref={spanRef}
     >
       {label && (
         <label className={styles.label} htmlFor={id}>
@@ -94,10 +115,16 @@ const Select: FC<SelectProps> = ({
           <SelectPrimitive.Content
             position={inline ? 'popper' : 'item-aligned'}
             className={classNames(styles.dropdown, { [styles.inline]: inline })}
+            style={{
+              maxWidth: `${elementWidth}px`,
+            }}
           >
             <ScrollPrimitive.Root type="auto">
               <SelectPrimitive.Viewport>
                 <ScrollPrimitive.Viewport>
+                  <ScrollPrimitive.Scrollbar orientation="horizontal">
+                    <ScrollPrimitive.Thumb />
+                  </ScrollPrimitive.Scrollbar>
                   {mappedValues.map(({ label, items }, key) => (
                     <SelectPrimitive.Group key={label?.toString() ?? key}>
                       {label && (

From 88a9a770175d8429a1a17706092e9077e0d68dfd Mon Sep 17 00:00:00 2001
From: Aqib Zaib <chaqib4u@gmail.com>
Date: Fri, 13 Sep 2024 17:04:22 +0500
Subject: [PATCH 2/2] remove scroll-x and make text wrappable in select box

---
 apps/site/components/Common/Select/index.module.css | 4 ++++
 apps/site/components/Common/Select/index.tsx        | 7 +++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/site/components/Common/Select/index.module.css b/apps/site/components/Common/Select/index.module.css
index aaedbd4355e22..853a5d9afee67 100644
--- a/apps/site/components/Common/Select/index.module.css
+++ b/apps/site/components/Common/Select/index.module.css
@@ -133,6 +133,10 @@
       dark:data-[disabled]:text-neutral-700;
   }
 
+  .textWrap {
+    text-wrap: wrap !important ;
+  }
+
   &.dropdown {
     @apply mt-1
       w-[calc(100%+1.5rem)]
diff --git a/apps/site/components/Common/Select/index.tsx b/apps/site/components/Common/Select/index.tsx
index 79567c2289e53..2040c9e0acf13 100644
--- a/apps/site/components/Common/Select/index.tsx
+++ b/apps/site/components/Common/Select/index.tsx
@@ -122,9 +122,6 @@ const Select: FC<SelectProps> = ({
             <ScrollPrimitive.Root type="auto">
               <SelectPrimitive.Viewport>
                 <ScrollPrimitive.Viewport>
-                  <ScrollPrimitive.Scrollbar orientation="horizontal">
-                    <ScrollPrimitive.Thumb />
-                  </ScrollPrimitive.Scrollbar>
                   {mappedValues.map(({ label, items }, key) => (
                     <SelectPrimitive.Group key={label?.toString() ?? key}>
                       {label && (
@@ -144,7 +141,9 @@ const Select: FC<SelectProps> = ({
                         >
                           <SelectPrimitive.ItemText>
                             {iconImage}
-                            <span>{label}</span>
+                            <span className={classNames(styles.textWrap)}>
+                              {label}
+                            </span>
                           </SelectPrimitive.ItemText>
                         </SelectPrimitive.Item>
                       ))}