src/pages/create/index.tsx

@@ -932,24 +932,25 @@ export const CreatePage = () => {
                   moveSigner={moveSigner}
                 />
               </div>
-              <div className={styles.inputWrapper}>
-                <TextField
-                  placeholder="Add counterpart"
-                  value={userInput}
-                  onChange={(e) => setUserInput(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  error={!!error}
-                  fullWidth
-                  sx={{
-                    fontSize: '16px',
-                    '& .MuiInputBase-input': {
-                      padding: '7px 14px'
-                    },
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      display: 'none'
-                    }
-                  }}
-                />
+              <div className={styles.addCounterpart}>
+                <div className={styles.inputWrapper}>
+                  <TextField
+                    placeholder="Add counterpart"
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    onKeyDown={handleInputKeyDown}
+                    error={!!error}
+                    sx={{
+                      fontSize: '16px',
+                      '& .MuiInputBase-input': {
+                        padding: '7px 14px'
+                      },
+                      '& .MuiOutlinedInput-notchedOutline': {
+                        display: 'none'
+                      }
+                    }}
+                  />
+                </div>
                 <Button
                   onClick={() =>
                     setUserRole(
@@ -962,8 +963,7 @@ export const CreatePage = () => {
                   aria-label="Toggle User Role"
                   sx={{
                     minWidth: '44px',
-                    padding: '11.5px 12px',
-                    borderRadius: 0
+                    padding: '11px 12px'
                   }}
                 >
                   <FontAwesomeIcon
@@ -977,9 +977,7 @@ export const CreatePage = () => {
                   aria-label="Add"
                   sx={{
                     minWidth: '44px',
-                    padding: '11.5px 12px',
-                    borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0
+                    padding: '11px 12px'
                   }}
                 >
                   <FontAwesomeIcon icon={faPlus} />

src/pages/create/style.module.scss

@@ -78,7 +78,7 @@
   align-items: center;
   flex-shrink: 0;
 
-  height: 34px;
+  height: 36px;
   overflow: hidden;
   border-radius: 4px;
   outline: solid 1px #dddddd;
@@ -91,9 +91,28 @@
   }
 }
 
+.addCounterpart {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 10px;
+  background: white;
+  border-radius: 0 0 4px 4px;
+  padding: 15px;
+
+  > .inputWrapper {
+    flex-shrink: 1;
+  }
+}
+
 .users {
   flex-shrink: 0;
   max-height: 33vh;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: '-15px';
 }
 
 .user {