From 3de62ec2e3d94a28f96a0b91711541fd35adb9b5 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 21:20:52 -0300
Subject: [PATCH] fix(posts): stack the posts index toolbar into full-width
 rows on mobile

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.
---
 resources/js/components/labels/LabelFilter.vue |  2 +-
 resources/js/pages/posts/Index.vue             | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/labels/LabelFilter.vue b/resources/js/components/labels/LabelFilter.vue
index b2b44f79..7291e8de 100644
--- a/resources/js/components/labels/LabelFilter.vue
+++ b/resources/js/components/labels/LabelFilter.vue
@@ -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" />
 
diff --git a/resources/js/pages/posts/Index.vue b/resources/js/pages/posts/Index.vue
index 72ca0a72..96b11fbe 100644
--- a/resources/js/pages/posts/Index.vue
+++ b/resources/js/pages/posts/Index.vue
@@ -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>