diff --git a/resources/js/components/layout/page-header.tsx b/resources/js/components/layout/page-header.tsx
index 3e8c425..9168480 100644
--- a/resources/js/components/layout/page-header.tsx
+++ b/resources/js/components/layout/page-header.tsx
@@ -8,14 +8,14 @@ type PageHeaderProps = {
 
 export function PageHeader({ title, description, actions }: PageHeaderProps) {
     return (
-        <div className="flex items-center justify-between">
-            <div>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="min-w-0">
                 <h2 className="text-2xl font-semibold tracking-tight">
                     {title}
                 </h2>
                 {description}
             </div>
-            {actions}
+            {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
         </div>
     );
 }