myoperator-mcp 0.2.134 → 0.2.136

package/dist/index.js

@@ -3431,7 +3431,7 @@ export interface PageHeaderProps
   actions?: React.ReactNode;
   /** Show bottom border (default: true) */
   showBorder?: boolean;
-  /** Layout mode: 'horizontal' (single row), 'vertical' (stacked), 'responsive' (auto based on screen size, default) */
+  /** Layout mode: 'horizontal' (row on sm+, stacked on narrow), 'vertical' (stacked), 'responsive' (same as horizontal, default) */
   layout?: "horizontal" | "vertical" | "responsive";
   /** Max actions to show on mobile before overflow (default: 2) */
   mobileOverflowLimit?: number;
@@ -3511,13 +3511,13 @@ const PageHeader = React.forwardRef(
 
     // Layout classes based on prop
     const layoutClasses = {
-      horizontal: "flex-row items-center",
+      horizontal: "flex-col sm:flex-row sm:items-center",
       vertical: "flex-col",
       responsive: "flex-col sm:flex-row sm:items-center",
     };
 
     const heightClasses = {
-      horizontal: "h-[76px]",
+      horizontal: "min-h-[76px] py-4 lg:py-0 lg:h-[76px]",
       vertical: "min-h-[76px] py-4",
       responsive: "min-h-[76px] py-4 lg:py-0 lg:h-[76px]",
     };
@@ -3580,27 +3580,14 @@ const PageHeader = React.forwardRef(
       );
     };
 
-    // For horizontal layout, always show all actions inline
-    const renderHorizontalActions = () => (
-      <div className="flex items-center gap-2 ml-4">
-        {actionsArray.map((action, index) => (
-          <React.Fragment key={index}>{action}</React.Fragment>
-        ))}
-      </div>
-    );
-
     const renderActions = () => {
       if (!actions) return null;
 
-      if (layout === "horizontal") {
-        return renderHorizontalActions();
-      }
-
       if (layout === "vertical") {
         return renderExpandableActions("mt-3");
       }
 
-      // Responsive: render both, CSS handles visibility
+      // horizontal + responsive: stack actions below title on small screens
       return (
         <>
           {renderDesktopActions()}
@@ -3624,7 +3611,12 @@ const PageHeader = React.forwardRef(
         {...props}
       >
         {/* Top Row: Icon/Back + Title + Description */}
-        <div className="flex items-start sm:items-center flex-1 min-w-0">
+        <div
+          className={cn(
+            "flex flex-1 min-w-0",
+            description ? "items-start sm:items-center" : "items-center"
+          )}
+        >
           {/* Left Section: Icon or Back Button */}
           {leftElement && (
             <div className="flex-shrink-0 mr-4">{leftElement}</div>
@@ -3632,8 +3624,8 @@ const PageHeader = React.forwardRef(
 
           {/* Content Section: Title + Description */}
           <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <h1 className="m-0 text-lg font-semibold text-semantic-text-primary truncate">
+            <div className="flex h-auto items-center gap-2 sm:min-h-10">
+              <h1 className="m-0 text-lg font-semibold leading-none text-semantic-text-primary truncate">
                 {title}
               </h1>
               {badge && (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.134",
+  "version": "0.2.136",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",