From c68cf2deee8e4884420c36910e72e5af611bce30 Mon Sep 17 00:00:00 2001
From: camilovegag <camilovegag@unisabana.edu.co>
Date: Fri, 9 Feb 2024 08:23:17 -0500
Subject: [PATCH] Fix overlaping placeholder

---
 packages/berlin/src/components/select/Select.styled.tsx | 3 ++-
 packages/berlin/src/components/select/Select.tsx        | 6 ++++--
 packages/berlin/src/pages/Account.tsx                   | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/berlin/src/components/select/Select.styled.tsx b/packages/berlin/src/components/select/Select.styled.tsx
index 8c854391..b0d4c05c 100644
--- a/packages/berlin/src/components/select/Select.styled.tsx
+++ b/packages/berlin/src/components/select/Select.styled.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { FlexColumn } from '../containers/FlexColum.styled';
 
-export const SelectContainer = styled.div`
+export const SelectContainer = styled.div<{ $minWidth?: string }>`
   position: relative;
   width: 100%;
+  min-width: ${(props) => props.$minWidth && props.$minWidth};
 `;
 
 export const SearchInput = styled.input<{ $theme?: 'light' | 'dark' }>`
diff --git a/packages/berlin/src/components/select/Select.tsx b/packages/berlin/src/components/select/Select.tsx
index 618d912c..f02fd77b 100644
--- a/packages/berlin/src/components/select/Select.tsx
+++ b/packages/berlin/src/components/select/Select.tsx
@@ -21,6 +21,7 @@ type SelectProps = {
   onBlur?: () => void;
   onOptionCreate?: (option: string) => void;
   value?: string;
+  $minWidth?: string;
 };
 
 function Select({
@@ -33,12 +34,13 @@ function Select({
   onOptionCreate,
   value,
   onBlur,
+  $minWidth,
 }: SelectProps) {
   const theme = useAppStore((state) => state.theme);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState(options.find((o) => o.name === value)?.name ?? '');
   const [selectedOption, setSelectedOption] = useState<string | undefined>(
-    options.find((o) => o.id === value)?.name
+    options.find((o) => o.id === value)?.name,
   );
   const [creatableOption, setCreatableOption] = useState<string>('');
 
@@ -82,7 +84,7 @@ function Select({
   };
 
   return (
-    <SelectContainer>
+    <SelectContainer $minWidth={$minWidth}>
       {label && (
         <LabelContainer>
           <Label $required={required}>{label}</Label>{' '}
diff --git a/packages/berlin/src/pages/Account.tsx b/packages/berlin/src/pages/Account.tsx
index 3330e3c5..c17695bc 100644
--- a/packages/berlin/src/pages/Account.tsx
+++ b/packages/berlin/src/pages/Account.tsx
@@ -297,10 +297,11 @@ function AccountForm({
                       onBlur={field.onBlur}
                       value={field.value}
                       onOptionCreate={field.onChange}
-                      placeholder="Select or create your credential"
+                      placeholder="Select or create credential"
                       errors={[
                         errors.userAttributes?.credentialsGroup?.[i]?.credential?.message ?? '',
                       ]}
+                      $minWidth="208px"
                     />
                   )}
                 />