Don't use flex on inputs (#5458)

4 files changed, 40 insertions, 17 deletions

diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx
index 73ecf6616..ca75b0139 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -106,16 +106,18 @@ function EmbedDialogInner({
       </View>
 
       <View style={[a.flex_row, a.gap_sm]}>
-        <TextField.Root>
-          <TextField.Icon icon={CodeBrackets} />
-          <TextField.Input
-            label={_(msg`Embed HTML code`)}
-            editable={false}
-            selection={{start: 0, end: snippet.length}}
-            value={snippet}
-            style={{}}
-          />
-        </TextField.Root>
+        <View style={[a.flex_1]}>
+          <TextField.Root>
+            <TextField.Icon icon={CodeBrackets} />
+            <TextField.Input
+              label={_(msg`Embed HTML code`)}
+              editable={false}
+              selection={{start: 0, end: snippet.length}}
+              value={snippet}
+              style={{}}
+            />
+          </TextField.Root>
+        </View>
         <Button
           label={_(msg`Copy code`)}
           color="primary"
diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx
index 23229c8f4..94ee261e3 100644
--- a/src/components/forms/TextField.tsx
+++ b/src/components/forms/TextField.tsx
@@ -9,8 +9,8 @@ import {
   ViewStyle,
 } from 'react-native'
 
+import {HITSLOP_20} from '#/lib/constants'
 import {mergeRefs} from '#/lib/merge-refs'
-import {HITSLOP_20} from 'lib/constants'
 import {android, atoms as a, useTheme, web} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Props as SVGIconProps} from '#/components/icons/common'
@@ -73,7 +73,7 @@ export function Root({children, isInvalid = false}: RootProps) {
   return (
     <Context.Provider value={context}>
       <View
-        style={[a.flex_row, a.align_center, a.relative, a.flex_1, a.px_md]}
+        style={[a.flex_row, a.align_center, a.relative, a.w_full, a.px_md]}
         {...web({
           onClick: () => inputRef.current?.focus(),
           onMouseOver: onHoverIn,
diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx
index 8c888f04d..fc414d31f 100644
--- a/src/view/screens/Storybook/Forms.tsx
+++ b/src/view/screens/Storybook/Forms.tsx
@@ -32,6 +32,27 @@ export function Forms() {
           label="Text field"
         />
 
+        <View style={[a.flex_row, a.gap_sm]}>
+          <View
+            style={[
+              {
+                width: '50%',
+              },
+            ]}>
+            <TextField.Root>
+              <TextField.Icon icon={Globe} />
+              <TextField.Input
+                value={value}
+                onChangeText={setValue}
+                label="Text field"
+              />
+            </TextField.Root>
+          </View>
+          <Button label="Submit" size="large" variant="solid" color="primary">
+            <ButtonText>Submit</ButtonText>
+          </Button>
+        </View>
+
         <TextField.Root>
           <TextField.Icon icon={Globe} />
           <TextField.Input
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index c6beecefe..ec6bab13e 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import {ScrollView, View} from 'react-native'
 
+import {isWeb} from '#/platform/detection'
 import {useSetThemePrefs} from '#/state/shell'
-import {isWeb} from 'platform/detection'
 import {CenteredView} from '#/view/com/util/Views'
-import {ListContained} from 'view/screens/Storybook/ListContained'
+import {ListContained} from '#/view/screens/Storybook/ListContained'
 import {atoms as a, ThemeProvider, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Breakpoints} from './Breakpoints'
@@ -80,9 +80,8 @@ function StorybookInner() {
               </Button>
             </View>
 
-            <Buttons />
+            <Forms />
 
-            <Dialogs />
             <ThemeProvider theme="light">
               <Theming />
             </ThemeProvider>
@@ -93,16 +92,17 @@ function StorybookInner() {
               <Theming />
             </ThemeProvider>
 
+            <Buttons />
             <Typography />
             <Spacing />
             <Shadows />
             <Buttons />
             <Icons />
             <Links />
-            <Forms />
             <Dialogs />
             <Menus />
             <Breakpoints />
+            <Dialogs />
 
             <Button
               variant="solid"