vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(posts): tidy the post-view header on mobile

Browse source 
Stack it into a clean back-button row and a date + status row (date left, badge
right) instead of cramming everything into one line where the date wrapped and
the badge floated.
This commit is contained in:
Paulo Castellano 2026-07-18 09:06:56 -03:00
parent fd557fe559
commit b7351667e2
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/js/pages/posts/Show.vue
View file

@ -122,8 +122,8 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
</div>
<div v-else class="flex flex-col flex-1 min-h-0">
<header class="flex shrink-0 items-center justify-between gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:px-6">
<div class="flex items-center gap-2 pl-12 md:pl-0">
<header class="flex shrink-0 flex-col gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:flex-row md:items-center md:justify-between md:px-6">
<div class="pl-12 md:pl-0">
<Link :href="postsIndex.url()">
<Button variant="outline">
<IconArrowLeft class="size-4" />
@ -131,9 +131,9 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
</Button>
</Link>
</div>
<div class="flex flex-wrap items-center justify-end gap-3">
<span class="flex items-center gap-1.5 text-sm font-medium text-foreground/70">
<IconCalendar class="size-4 text-foreground/60" />
<div class="flex items-start justify-between gap-3 md:items-center md:justify-end">
<span class="flex items-start gap-1.5 text-sm font-medium text-foreground/70">
<IconCalendar class="mt-0.5 size-4 shrink-0 text-foreground/60" />
<span v-if="post.published_at">
{{ $t('posts.show.published_on', { date: formatDateTime(post.published_at) }) }}
</span>
@ -142,7 +142,7 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
</span>
<span v-else>{{ $t('posts.show.draft') }}</span>
</span>
<Badge :variant="postStatus.variant">
<Badge :variant="postStatus.variant" class="shrink-0">
<component :is="postStatus.icon" class="size-3" />
{{ postStatus.label }}
</Badge>