fix select icons crop on mobiles

Author: pixelis0x

widget/src/components/ProjectSelector.tsx

@@ -24,16 +24,16 @@ const ProtocolIcon = ({ logoUri }: { logoUri?: string }) => (
   <Box
     borderRadius={"50%"}
     overflow={"hidden"}
-    width={"24px"}
-    height={"24px"}
-    minWidth={"24px"}
+    width={"28px"}
+    height={"28px"}
+    minWidth={"28px"}
     marginRight={"8px"}
     display={"flex"}
     alignItems={"center"}
     justifyContent={"center"}
     backgroundColor={"gray.50"}
   >
-    {logoUri && <img src={logoUri} alt="" width={"24px"} height={"24px"} />}
+    {logoUri && <img src={logoUri} alt="" width={"28px"} height={"28px"} />}
   </Box>
 );
 
@@ -100,7 +100,12 @@ const ProjectSelector = ({
       </Select.Control>
 
       <Select.Positioner>
-        <SelectContent portalled={false} borderWidth={1} borderRadius={"xl"} bg={"bg"}>
+        <SelectContent
+          portalled={false}
+          borderWidth={1}
+          borderRadius={"xl"}
+          bg={"bg"}
+        >
           {projectOptions.items.map((item) => {
             return (
               <SelectItem key={item.slug} item={item}>

widget/src/components/ui/select.tsx

@@ -69,7 +69,7 @@ export const SelectValueText = React.forwardRef<
 >(function SelectValueText(props, ref) {
   const { children, ...rest } = props;
   return (
-    <ChakraSelect.ValueText {...rest} ref={ref}>
+    <ChakraSelect.ValueText {...rest} ref={ref} maxWidth={"100%"} minH={"40px"}>
       <ChakraSelect.Context>
         {(select) => {
           const items = select.selectedItems;