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

fix(posts): stack the posts index toolbar into full-width rows on mobile

Browse source 
Search, label filter, and New post each take their own full-width row below sm
(inline on desktop). The label filter trigger goes full-width to match.
This commit is contained in:
Paulo Castellano 2026-07-17 21:20:52 -03:00
parent 6ead4eee84
commit 3de62ec2e3
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/js/components/labels/LabelFilter.vue
View file

@ -58,7 +58,7 @@ const clear = () => {
variant="outline"
role="combobox"
:aria-expanded="open"
class="justify-between gap-2 font-normal"
class="w-full justify-between gap-2 font-normal sm:w-auto"
>
<IconTag class="size-4 shrink-0 opacity-60" />

10
resources/js/pages/posts/Index.vue
View file

@ -184,21 +184,21 @@ useWorkspaceEcho(
<!-- Toolbar -->
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="flex w-full items-center gap-3 sm:w-auto">
<div class="relative w-full sm:w-auto">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
<div class="relative w-full sm:w-64">
<IconSearch class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-foreground/60" />
<Input
v-model="searchQuery"
:placeholder="trans('posts.search')"
class="w-full pl-9 sm:w-64"
class="w-full pl-9"
/>
</div>
<LabelFilter v-if="labels.length" v-model="selectedLabelIds" :labels="labels" />
</div>
<Link v-if="canCreatePost" :href="createPost.url()">
<Button>{{ $t('posts.new_post') }}</Button>
<Link v-if="canCreatePost" :href="createPost.url()" class="w-full sm:w-auto">
<Button class="w-full sm:w-auto">{{ $t('posts.new_post') }}</Button>
</Link>
</div>