myoperator-ui 0.0.227 → 0.0.229

package/dist/index.js

@@ -7968,7 +7968,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;
@@ -8048,13 +8048,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]",
     };
@@ -8117,27 +8117,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()}
@@ -8161,7 +8148,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>
@@ -8169,8 +8161,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 && (
@@ -14633,7 +14625,8 @@ export const CreateBotModal = React.forwardRef(
           ref={ref}
           size="sm"
           className={cn(
-            "mx-3 max-h-[90vh] overflow-y-auto w-[calc(100%-1.5rem)] sm:mx-auto sm:w-full",
+            // Do not use horizontal margin here \u2014 it breaks left-1/2 + -translate-x-1/2 centering on DialogContent.
+            "max-h-[90vh] overflow-y-auto w-[min(100%,calc(100vw-1.5rem))]",
             className
           )}
         >
@@ -15568,14 +15561,6 @@ function useFakeProgress() {
   return { start, cancel, cancelAll };
 }
 
-function getTimeRemaining(progress: number) {
-  const steps = Math.ceil((100 - progress) / 15);
-  const secs = steps * 3;
-  return secs > 60
-    ? \`\${Math.ceil(secs / 60)} minutes remaining\`
-    : \`\${secs} seconds remaining\`;
-}
-
 const FileUploadModal = React.forwardRef(
   (
     {
@@ -15821,8 +15806,7 @@ const FileUploadModal = React.forwardRef(
                         </p>
                         {item.status === "uploading" && (
                           <p className="m-0 text-xs text-semantic-text-muted tracking-[0.048px]">
-                            {item.progress}%&nbsp;&bull;&nbsp;
-                            {getTimeRemaining(item.progress)}
+                            {item.progress}%
                           </p>
                         )}
                         {item.status === "error" && (
@@ -20461,6 +20445,7 @@ const BotIdentityCard = React.forwardRef(
 
             <Field
               label="Primary Role"
+              helperText="Defines what the bot does. Choose from the list or type a custom role."
               characterCount={{
                 current: (data.primaryRole ?? "").length,
                 max: PRIMARY_ROLE_MAX_LENGTH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.227",
+  "version": "0.0.229",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",