esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix header actions layout on mobile

Browse source
This commit is contained in:
Esdras Renan 2025-10-08 00:10:52 -03:00
parent b880aa3ea6
commit 51b38eb608
1 changed files with 50 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/site-header.tsx
View file

@ -3,6 +3,7 @@ import type { ReactNode } from "react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar" import { SidebarTrigger } from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"
interface SiteHeaderProps { interface SiteHeaderProps {
title: string title: string
@ -18,14 +19,14 @@ export function SiteHeader({
secondaryAction, secondaryAction,
}: SiteHeaderProps) { }: SiteHeaderProps) {
return ( 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"> <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" /> <SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mx-3 hidden h-6 sm:block" /> <Separator orientation="vertical" className="mx-3 hidden h-6 sm:block" />
<div className="flex flex-1 flex-col gap-1"> <div className="flex flex-1 flex-col gap-1">
{lead ? <span className="text-sm text-muted-foreground">{lead}</span> : null} {lead ? <span className="text-sm text-muted-foreground">{lead}</span> : null}
<h1 className="text-lg font-semibold">{title}</h1> <h1 className="text-lg font-semibold">{title}</h1>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex w-full flex-col items-stretch gap-2 sm:w-auto sm:flex-row sm:items-center">
{secondaryAction} {secondaryAction}
{primaryAction} {primaryAction}
</div> </div>
@ -35,10 +36,11 @@ export function SiteHeader({
SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({ SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({
children, children,
className,
...props ...props
}: React.ComponentProps<typeof Button>) { }: React.ComponentProps<typeof Button>) {
return ( return (
<Button size="sm" {...props}> <Button size="sm" className={cn("w-full sm:w-auto", className)} {...props}>
{children} {children}
</Button> </Button>
) )
@ -46,10 +48,11 @@ SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({
SiteHeader.SecondaryButton = function SiteHeaderSecondaryButton({ SiteHeader.SecondaryButton = function SiteHeaderSecondaryButton({
children, children,
className,
...props ...props
}: React.ComponentProps<typeof Button>) { }: React.ComponentProps<typeof Button>) {
return ( return (
<Button size="sm" variant="outline" {...props}> <Button size="sm" variant="outline" className={cn("w-full sm:w-auto", className)} {...props}>
{children} {children}
</Button> </Button>
) )