try to adapt forms and modals

theme/components/Form.ts

@@ -121,6 +121,9 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
         margin: 0,
         transformOrigin: 'top left',
         transitionProperty: 'font-size, line-height, padding, top, background-color',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
       },
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': {
         ...activeLabelStyles,

theme/components/Modal.ts

@@ -59,6 +59,21 @@ const sizes = {
       maxW: '760px',
     },
   },
+  full: {
+    dialog: {
+      borderRadius: 'none',
+      padding: '80px 16px 32px 16px',
+    },
+    closeButton: {
+      top: 4,
+      right: 6,
+      width: 6,
+      height: 6,
+    },
+    header: {
+      mb: 6,
+    },
+  },
 };
 
 const Modal: ComponentMultiStyleConfig = {

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -52,7 +52,7 @@ const placeholders = {
   comment: 'Specify the reason for adding tags and color preference(s).',
 } as Record<Path<Inputs>, string>;
 
-const ADDRESS_INPUT_BUTTONS_WIDTH = 170;
+const ADDRESS_INPUT_BUTTONS_WIDTH = 100;
 
 const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
   const queryClient = useQueryClient();
@@ -152,7 +152,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
     <Box width={ `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` } maxWidth="844px">
       { isAlertVisible && <Box mb={ 4 }><FormSubmitAlert/></Box> }
       <Text size="sm" variant="secondary" paddingBottom={ 5 }>Company info</Text>
-      <Grid templateColumns="1fr 1fr" rowGap={ 4 } columnGap={ 5 }>
+      <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 5 }>
         <GridItem>
           <PublicTagsFormInput<Inputs>
             fieldName="fullName"

ui/shared/FormModal.tsx

@@ -39,7 +39,7 @@ export default function FormModal<TData>({
   }, [ onClose, setAlertVisible ]);
 
   return (
-    <Modal isOpen={ isOpen } onClose={ onModalClose } size="md" >
+    <Modal isOpen={ isOpen } onClose={ onModalClose } size={{ base: 'full', lg: 'md' }} >
       <ModalOverlay/>
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>