Fix overlaping placeholder

lexicongovernance · Feb 9, 2024 · c68cf2d · c68cf2d
1 parent 71dd852
commit c68cf2d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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"
                     />
                   )}
                 />