make upload and metadata UI responsive on mobile.

Improve narrow-viewport layout for upload, About, and shell overflow; keep modal scroll without extra dismiss or a11y markup changes.
This commit is contained in:
2026-10-30 16:23:09 +01:00
parent 938229eeea
commit bb08bb389f
20 changed files with 96 additions and 67 deletions
@@ -52,12 +52,12 @@
</div>
</fieldset>
<div class="grid gap-4 sm:grid-cols-2">
<label class="flex flex-col gap-1.5 text-sm">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<label class="flex min-w-0 flex-col gap-1.5 text-sm">
<span class="font-medium">Expiry</span>
<select
v-model="settings.expiryPreset"
class="rounded-md border border-input bg-background px-3 py-2 text-sm"
class="w-full rounded-md border border-input bg-background px-3 py-2 text-base"
>
<option v-for="option in expiryOptions" :key="option.value" :value="option.value">
{{ option.label }}
@@ -65,11 +65,11 @@
</select>
</label>
<label class="flex flex-col gap-1.5 text-sm">
<label class="flex min-w-0 flex-col gap-1.5 text-sm">
<span class="font-medium">Max views</span>
<select
v-model="settings.maxViewsPreset"
class="rounded-md border border-input bg-background px-3 py-2 text-sm"
class="w-full rounded-md border border-input bg-background px-3 py-2 text-base"
>
<option v-for="option in maxViewsOptions" :key="option.value" :value="option.value">
{{ option.label }}
@@ -92,7 +92,7 @@
v-model="settings.password"
type="password"
autocomplete="new-password"
class="rounded-md border border-input bg-background px-3 py-2 text-sm"
class="rounded-md border border-input bg-background px-3 py-2 text-base"
/>
</label>
</template>