Fix auto-zoom on iOS devices (#1029)

* Remove text-sm from inputs

* Update frontend/components/ui/command/CommandInput.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update frontend/components/ui/tags-input/TagsInputInput.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update frontend/components/ui/select/SelectTrigger.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Respond to coderrabitai

* Another coderrabbit comment

* More coderrabbit responses

* Fix formatting

* Apply suggestion from @coderabbitai[bot]

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update frontend/components/ui/input/Input.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Correct Coderrabbit's messy suggestion that I was too trigger-happy on

* Accessible changes aOnly use accessible font sizing on mobile

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Alan Mooiman
2025-11-18 17:40:21 -05:00
committed by GitHub
parent 6697738342
commit 35a83c29af
5 changed files with 14 additions and 6 deletions

View File

@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
<ComboboxInput <ComboboxInput
v-bind="{ ...forwardedProps, ...$attrs }" v-bind="{ ...forwardedProps, ...$attrs }"
auto-focus auto-focus
:class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)" :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-base md:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
/> />
</div> </div>
</template> </template>

View File

@@ -24,7 +24,7 @@
v-model="modelValue" v-model="modelValue"
:class=" :class="
cn( cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-muted-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-muted-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
props.class props.class
) )
" "

View File

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
<SelectTrigger <SelectTrigger
v-bind="forwardedProps" v-bind="forwardedProps"
:class="cn( :class="cn(
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start', 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
props.class, props.class,
)" )"
> >

View File

@@ -15,5 +15,13 @@ const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)" /> <TagsInputInput
v-bind="forwardedProps"
:class="cn(
'text-base',
'md:text-sm',
'min-h-6 focus:outline-none flex-1 bg-transparent px-1',
props.class
)"
/>
</template> </template>

View File

@@ -23,8 +23,8 @@ const modelValue = useVModel(props, 'modelValue', emits, {
</script> </script>
<template> <template>
<textarea v-if="!props.autosize" v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" /> <textarea v-if="!props.autosize" v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
<div v-else :class="cn('flex w-full rounded-md border border-input', props.class)"> <div v-else :class="cn('flex w-full rounded-md border border-input', props.class)">
<textarea ref="textarea" v-model="modelValue" class="w-full min-h-20 resize-none w-full rounded-md border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" /> <textarea ref="textarea" v-model="modelValue" class="w-full min-h-20 resize-none w-full rounded-md border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" />
</div> </div>
</template> </template>