forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Don't use flex on inputs (#5458)
authored by
Eric Bailey
and committed by
GitHub
e93cbbd5
e1ee95a7
+40
-17
+12
-10
src/components/dialogs/Embed.tsx
+12
-10
src/components/dialogs/Embed.tsx
···
106
106
</View>
107
107
108
108
<View style={[a.flex_row, a.gap_sm]}>
109
-
<TextField.Root>
110
-
<TextField.Icon icon={CodeBrackets} />
111
-
<TextField.Input
112
-
label={_(msg`Embed HTML code`)}
113
-
editable={false}
114
-
selection={{start: 0, end: snippet.length}}
115
-
value={snippet}
116
-
style={{}}
117
-
/>
118
-
</TextField.Root>
109
+
<View style={[a.flex_1]}>
110
+
<TextField.Root>
111
+
<TextField.Icon icon={CodeBrackets} />
112
+
<TextField.Input
113
+
label={_(msg`Embed HTML code`)}
114
+
editable={false}
115
+
selection={{start: 0, end: snippet.length}}
116
+
value={snippet}
117
+
style={{}}
118
+
/>
119
+
</TextField.Root>
120
+
</View>
119
121
<Button
120
122
label={_(msg`Copy code`)}
121
123
color="primary"
+2
-2
src/components/forms/TextField.tsx
+2
-2
src/components/forms/TextField.tsx
···
9
9
ViewStyle,
10
10
} from 'react-native'
11
11
12
+
import {HITSLOP_20} from '#/lib/constants'
12
13
import {mergeRefs} from '#/lib/merge-refs'
13
-
import {HITSLOP_20} from 'lib/constants'
14
14
import {android, atoms as a, useTheme, web} from '#/alf'
15
15
import {useInteractionState} from '#/components/hooks/useInteractionState'
16
16
import {Props as SVGIconProps} from '#/components/icons/common'
···
73
73
return (
74
74
<Context.Provider value={context}>
75
75
<View
76
-
style={[a.flex_row, a.align_center, a.relative, a.flex_1, a.px_md]}
76
+
style={[a.flex_row, a.align_center, a.relative, a.w_full, a.px_md]}
77
77
{...web({
78
78
onClick: () => inputRef.current?.focus(),
79
79
onMouseOver: onHoverIn,
+21
src/view/screens/Storybook/Forms.tsx
+21
src/view/screens/Storybook/Forms.tsx
···
32
32
label="Text field"
33
33
/>
34
34
35
+
<View style={[a.flex_row, a.gap_sm]}>
36
+
<View
37
+
style={[
38
+
{
39
+
width: '50%',
40
+
},
41
+
]}>
42
+
<TextField.Root>
43
+
<TextField.Icon icon={Globe} />
44
+
<TextField.Input
45
+
value={value}
46
+
onChangeText={setValue}
47
+
label="Text field"
48
+
/>
49
+
</TextField.Root>
50
+
</View>
51
+
<Button label="Submit" size="large" variant="solid" color="primary">
52
+
<ButtonText>Submit</ButtonText>
53
+
</Button>
54
+
</View>
55
+
35
56
<TextField.Root>
36
57
<TextField.Icon icon={Globe} />
37
58
<TextField.Input
+5
-5
src/view/screens/Storybook/index.tsx
+5
-5
src/view/screens/Storybook/index.tsx
···
1
1
import React from 'react'
2
2
import {ScrollView, View} from 'react-native'
3
3
4
+
import {isWeb} from '#/platform/detection'
4
5
import {useSetThemePrefs} from '#/state/shell'
5
-
import {isWeb} from 'platform/detection'
6
6
import {CenteredView} from '#/view/com/util/Views'
7
-
import {ListContained} from 'view/screens/Storybook/ListContained'
7
+
import {ListContained} from '#/view/screens/Storybook/ListContained'
8
8
import {atoms as a, ThemeProvider, useTheme} from '#/alf'
9
9
import {Button, ButtonText} from '#/components/Button'
10
10
import {Breakpoints} from './Breakpoints'
···
80
80
</Button>
81
81
</View>
82
82
83
-
<Buttons />
83
+
<Forms />
84
84
85
-
<Dialogs />
86
85
<ThemeProvider theme="light">
87
86
<Theming />
88
87
</ThemeProvider>
···
93
92
<Theming />
94
93
</ThemeProvider>
95
94
95
+
<Buttons />
96
96
<Typography />
97
97
<Spacing />
98
98
<Shadows />
99
99
<Buttons />
100
100
<Icons />
101
101
<Links />
102
-
<Forms />
103
102
<Dialogs />
104
103
<Menus />
105
104
<Breakpoints />
105
+
<Dialogs />
106
106
107
107
<Button
108
108
variant="solid"