From 51b38eb608749106a410f73d4a2d3afebc68d4ff Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Wed, 8 Oct 2025 00:10:52 -0300
Subject: [PATCH] Fix header actions layout on mobile

---
 src/components/site-header.tsx | 97 ++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 47 deletions(-)

diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 7bc088c..f48b205 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -1,8 +1,9 @@
-import type { ReactNode } from "react"
-
-import { Button } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
-import { SidebarTrigger } from "@/components/ui/sidebar"
+import type { ReactNode } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+import { cn } from "@/lib/utils"
 
 interface SiteHeaderProps {
   title: string
@@ -11,46 +12,48 @@ interface SiteHeaderProps {
   secondaryAction?: ReactNode
 }
 
-export function SiteHeader({
-  title,
-  lead,
-  primaryAction,
-  secondaryAction,
-}: SiteHeaderProps) {
-  return (
-    <header className="flex h-(--header-height) shrink-0 items-center gap-3 border-b bg-background/80 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height) lg:px-8">
-      <SidebarTrigger className="-ml-1" />
-      <Separator orientation="vertical" className="mx-3 hidden h-6 sm:block" />
-      <div className="flex flex-1 flex-col gap-1">
-        {lead ? <span className="text-sm text-muted-foreground">{lead}</span> : null}
-        <h1 className="text-lg font-semibold">{title}</h1>
-      </div>
-      <div className="flex items-center gap-2">
-        {secondaryAction}
-        {primaryAction}
-      </div>
-    </header>
-  )
-}
+export function SiteHeader({
+  title,
+  lead,
+  primaryAction,
+  secondaryAction,
+}: SiteHeaderProps) {
+  return (
+    <header className="flex h-auto shrink-0 flex-wrap items-start gap-3 border-b bg-background/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-[width,height] ease-linear sm:h-(--header-height) sm:flex-nowrap sm:items-center sm:px-6 lg:px-8 sm:group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+      <SidebarTrigger className="-ml-1" />
+      <Separator orientation="vertical" className="mx-3 hidden h-6 sm:block" />
+      <div className="flex flex-1 flex-col gap-1">
+        {lead ? <span className="text-sm text-muted-foreground">{lead}</span> : null}
+        <h1 className="text-lg font-semibold">{title}</h1>
+      </div>
+      <div className="flex w-full flex-col items-stretch gap-2 sm:w-auto sm:flex-row sm:items-center">
+        {secondaryAction}
+        {primaryAction}
+      </div>
+    </header>
+  )
+}
 
-SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({
-  children,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button size="sm" {...props}>
-      {children}
-    </Button>
-  )
-}
-
-SiteHeader.SecondaryButton = function SiteHeaderSecondaryButton({
-  children,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button size="sm" variant="outline" {...props}>
-      {children}
-    </Button>
-  )
-}
+SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button size="sm" className={cn("w-full sm:w-auto", className)} {...props}>
+      {children}
+    </Button>
+  )
+}
+
+SiteHeader.SecondaryButton = function SiteHeaderSecondaryButton({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button size="sm" variant="outline" className={cn("w-full sm:w-auto", className)} {...props}>
+      {children}
+    </Button>
+  )
+}