fix(posts): mobile editor — taller switcher tabs and a wider Post now button

Match the switcher tab height to the sidebar trigger (h-10), and let the primary
publish button fill the footer (flex-1) on mobile while staying auto-width on desktop.
This commit is contained in:
Paulo Castellano 2026-07-18 09:28:07 -03:00
parent da5066e43e
commit 119edef5b9
2 changed files with 5 additions and 4 deletions

View file

@ -50,8 +50,8 @@ const scheduledAtError = computed(() => errors.value.scheduled_at);
{{ $t('posts.edit.unschedule_cta') }}
</Button>
<div v-else-if="!isReadOnly && canEdit" class="flex flex-col items-end gap-1">
<div class="flex items-center gap-2">
<div v-else-if="!isReadOnly && canEdit" class="flex w-full flex-col gap-1 lg:w-auto lg:items-end">
<div class="flex w-full items-center gap-2 lg:w-auto">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
@ -95,9 +95,10 @@ const scheduledAtError = computed(() => errors.value.scheduled_at);
<Tooltip>
<TooltipTrigger as-child>
<span tabindex="0">
<span tabindex="0" class="flex-1 lg:flex-none">
<Button
type="button"
class="w-full lg:w-auto"
:disabled="isPostActionDisabled"
@click="emit('submit', hasPickedTime ? PostStatus.Scheduled : PostStatus.Publishing)"
>

View file

@ -42,7 +42,7 @@ const headerHidden = computed(() => props.status !== PostStatus.Scheduled);
:key="item.key"
type="button"
:data-testid="`editor-nav-${item.key}`"
class="shrink-0 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-colors"
class="inline-flex h-10 shrink-0 items-center rounded-lg border-2 px-3 text-sm font-semibold transition-colors"
:class="activeView === item.key
? 'border-foreground bg-violet-100 text-foreground'
: 'border-transparent text-foreground/60 hover:text-foreground'"