remove design components change

Author: Davy-c

src/design/components/molecules/Form/atoms/FormColorSelect.tsx

@@ -15,7 +15,7 @@ const FormColorSelect = ({
 }: FormColorSelectProps) => {
   const [open, setOpen] = useState(false)
   return (
-    <Container>
+    <Container className='form__color__select'>
       <FormInput
         {...rest}
         readOnly={true}
@@ -34,7 +34,6 @@ const FormColorSelect = ({
 const Container = styled.div`
   display: inline-block;
   position: relative;
-  width: 100%;
 
   & > .form__color__selector {
     position: absolute;

src/design/components/molecules/Form/atoms/FormInput.tsx

@@ -118,7 +118,6 @@ const StyledInput = styled.input`
   background: none;
   border: 1px solid ${({ theme }) => theme.colors.border.main};
   color: ${({ theme }) => theme.colors.text.primary};
-  width: 100%;
 
   &:read-only {
     background: ${({ theme }) => theme.colors.background.secondary};

src/design/components/molecules/LabelManager.tsx

@@ -237,7 +237,7 @@ export const StatusEditor = <T extends LabelLike>({
   }, [])
 
   return (
-    <MetadataContainer>
+    <StyledStatusEditor>
       <MetadataContainerRow
         row={{ type: 'header', content: `${type.toUpperCase()} TITLE` }}
       />
@@ -271,10 +271,21 @@ export const StatusEditor = <T extends LabelLike>({
           }}
         />
       )}
-    </MetadataContainer>
+    </StyledStatusEditor>
   )
 }
 
+const StyledStatusEditor = styled(MetadataContainer)`
+  .form__input,
+  .form__color__select {
+    width: 100% !important;
+  }
+
+  .metadata__item__header {
+    margin-left: 0 !important;
+  }
+`
+
 const Container = styled.div`
   .autocomplete__input {
     line-height: inherit !important;

src/design/components/organisms/MetadataContainer/molecules/MetadataContainerRow.tsx

@@ -191,6 +191,7 @@ const Container = styled.div`
   .metadata__item__header {
     text-transform: uppercase;
     color: ${({ theme }) => theme.colors.text.subtle} !important;
+    margin-left: ${({ theme }) => theme.sizes.spaces.df}px;
   }
 `