Merge pull request #1001 from objectstack-ai/copilot/clean-up-action-buttons-layout

Author: hotlong

packages/components/src/renderers/action/action-bar.tsx

@@ -36,6 +36,7 @@ import { ComponentRegistry } from '@object-ui/core';
 import type { ActionSchema, ActionLocation, ActionComponent } from '@object-ui/types';
 import { useCondition } from '@object-ui/react';
 import { cn } from '../../lib/utils';
+import { useIsMobile } from '../../hooks/use-mobile';
 
 export interface ActionBarSchema {
   type: 'action:bar';
@@ -45,6 +46,8 @@ export interface ActionBarSchema {
   location?: ActionLocation;
   /** Maximum visible inline actions before overflow into "More" menu (default: 3) */
   maxVisible?: number;
+  /** Maximum visible inline actions on mobile devices (default: 1). Desktop uses maxVisible instead. */
+  mobileMaxVisible?: number;
   /** Visibility condition expression */
   visible?: string;
   /** Layout direction */
@@ -71,6 +74,7 @@ const ActionBarRenderer = forwardRef<HTMLDivElement, { schema: ActionBarSchema;
     } = props;
 
     const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
+    const isMobile = useIsMobile();
 
     // Filter actions by location
     const filteredActions = useMemo(() => {
@@ -82,7 +86,10 @@ const ActionBarRenderer = forwardRef<HTMLDivElement, { schema: ActionBarSchema;
     }, [schema.actions, schema.location]);
 
     // Split into visible inline actions and overflow
-    const maxVisible = schema.maxVisible ?? 3;
+    // On mobile, show fewer actions inline (default: 1)
+    const maxVisible = isMobile
+      ? (schema.mobileMaxVisible ?? 1)
+      : (schema.maxVisible ?? 3);
     const { inlineActions, overflowActions } = useMemo(() => {
       if (filteredActions.length <= maxVisible) {
         return { inlineActions: filteredActions, overflowActions: [] as ActionSchema[] };

packages/layout/src/AppShell.tsx

@@ -136,8 +136,8 @@ export function AppShell({
       {sidebar}
       <SidebarInset>
         <header className="flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4">
-          <SidebarTrigger className="-ml-1" />
-          <div className="w-px h-4 bg-border mx-1 sm:mx-2" />
+          <SidebarTrigger className="-ml-1 hidden md:inline-flex" />
+          <div className="w-px h-4 bg-border mx-1 sm:mx-2 hidden md:block" />
           {navbar}
         </header>
         <main className={cn("flex-1 min-w-0 overflow-auto p-3 sm:p-4 md:p-6", className)}>

packages/plugin-detail/src/DetailSection.tsx

@@ -195,9 +195,9 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
       className={cn(
         "grid gap-3 sm:gap-4",
         effectiveColumns === 1 ? "grid-cols-1" :
-        effectiveColumns === 2 ? "grid-cols-1 md:grid-cols-2" :
-        effectiveColumns === 3 ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" :
-        "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+        effectiveColumns === 2 ? "grid-cols-1 sm:grid-cols-2" :
+        effectiveColumns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" :
+        "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
       )}
     >
       {layoutFields.map(renderField)}

packages/plugin-detail/src/DetailView.tsx

@@ -469,15 +469,15 @@ export const DetailView: React.FC<DetailViewProps> = ({
               <SchemaRenderer key={index} schema={action} data={data} />
             ))}
 
-            {/* Inline Edit Toggle */}
+            {/* Inline Edit Toggle - hidden on mobile, accessible via more menu */}
             {inlineEdit && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button 
                     variant={isInlineEditing ? 'default' : 'outline'} 
                     size="sm"
                     onClick={handleInlineEditToggle}
-                    className="gap-2"
+                    className="gap-2 hidden sm:inline-flex"
                   >
                     {isInlineEditing ? (
                       <>
@@ -498,21 +498,21 @@ export const DetailView: React.FC<DetailViewProps> = ({
               </Tooltip>
             )}
 
-            {/* Share Button */}
+            {/* Share Button - hidden on mobile, accessible via more menu */}
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="outline" size="icon" onClick={handleShare}>
+                <Button variant="outline" size="icon" onClick={handleShare} className="hidden sm:inline-flex">
                   <Share2 className="h-4 w-4" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>{t('detail.share')}</TooltipContent>
             </Tooltip>
 
-            {/* Edit Button */}
+            {/* Edit Button - hidden on mobile, accessible via more menu */}
             {schema.showEdit && (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="default" onClick={handleEdit} className="gap-2">
+                  <Button variant="default" onClick={handleEdit} className="gap-2 hidden sm:inline-flex">
                     <Edit className="h-4 w-4" />
                     <span className="hidden sm:inline">{t('detail.edit')}</span>
                   </Button>
@@ -534,6 +534,24 @@ export const DetailView: React.FC<DetailViewProps> = ({
                 <TooltipContent>{t('detail.moreActions')}</TooltipContent>
               </Tooltip>
               <DropdownMenuContent align="end" className="w-[calc(100vw-2rem)] sm:w-48 max-h-[60vh] overflow-y-auto">
+                {/* Mobile-only: Share, Edit, Inline Edit */}
+                <DropdownMenuItem onClick={handleShare} className="sm:hidden">
+                  <Share2 className="h-4 w-4 mr-2" />
+                  {t('detail.share')}
+                </DropdownMenuItem>
+                {schema.showEdit && (
+                  <DropdownMenuItem onClick={handleEdit} className="sm:hidden">
+                    <Edit className="h-4 w-4 mr-2" />
+                    {t('detail.edit')}
+                  </DropdownMenuItem>
+                )}
+                {inlineEdit && (
+                  <DropdownMenuItem onClick={handleInlineEditToggle} className="sm:hidden">
+                    <Edit className="h-4 w-4 mr-2" />
+                    {isInlineEditing ? t('detail.save') : t('detail.editInline')}
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator className="sm:hidden" />
                 <DropdownMenuItem onClick={handleDuplicate}>
                   <Copy className="h-4 w-4 mr-2" />
                   {t('detail.duplicate')}