AppBar tweaks to prevent strange behavior on mobile devices

Author: fgatti675

packages/firecms_core/src/app/Scaffold.tsx

@@ -137,7 +137,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
 const DrawerHeader = () => {
     return (
-        <div className="flex flex-col min-h-[68px]"></div>
+        <div className="flex flex-col min-h-14 sm:min-h-16"></div>
     );
 };
 
@@ -168,11 +168,10 @@ function DrawerWrapper(props: {
                      sideOffset={12}
                      asChild={true}>
                 <div
-                    className="ml-2 fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
+                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
                     <IconButton
                         color="inherit"
                         aria-label="Open menu"
-                        className="sticky top-2 left-3 "
                         onClick={() => props.setDrawerOpen(true)}
                         size="large"
                     >
@@ -210,7 +209,7 @@ function DrawerWrapper(props: {
                 aria-label="Open drawer"
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
-                className="absolute top-2 left-5"
+                className="absolute sm:top-2 sm:left-5 top-1 left-2"
             >
                 <MenuIcon/>
             </IconButton>

packages/firecms_core/src/core/DefaultAppBar.tsx

@@ -95,19 +95,16 @@ export const DefaultAppBar = function DefaultAppBar({
     return (
         <div
             style={style}
-            className={cls("w-full h-16 transition-all ease-in duration-75 fixed",
+            className={cls("w-full h-14 sm:h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
+                "flex flex-row gap-2 px-4 items-center",
                 {
-                    "pl-[17rem]": drawerOpen && largeLayout,
-                    "pl-20": hasDrawer && !(drawerOpen && largeLayout),
+                    "pl-[19rem]": drawerOpen && largeLayout,
+                    "pl-24": hasDrawer && !(drawerOpen && largeLayout),
                     "z-10": largeLayout,
-                    // "w-full": !hasDrawer,
-                    // "w-[calc(100%-64px)]": hasDrawer && !(drawerOpen && largeLayout),
-                    // "w-[calc(100%-17rem)]": hasDrawer && (drawerOpen && largeLayout),
-                    "duration-150": drawerOpen && largeLayout,
+                    "duration-100": drawerOpen && largeLayout,
                 },
                 className)}>
 
-            <div className="flex flex-row gap-2 px-4 h-full items-center">
 
                 {navigation && <div className="mr-8 hidden lg:block">
                     <ReactLink
@@ -174,7 +171,6 @@ export const DefaultAppBar = function DefaultAppBar({
 
                 </Menu>
 
-            </div>
         </div>
     );
 }

packages/firecms_core/src/core/EntityEditView.tsx

@@ -659,7 +659,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 });
                 setEntityId(updatedId);
             } catch (e) {
-                onIdUpdateError && onIdUpdateError(e);
+                onIdUpdateError?.(e);
                 console.error(e);
             }
             setCustomIdLoading(false);
@@ -894,7 +894,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
             <div className="h-full overflow-auto">
 
-                <div className="pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-10">
+                <div className="pt-12 pb-16 pl-4 sm:px-8 md:px-10">
                     <div
                         className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
 

packages/ui/src/components/Avatar.tsx

@@ -27,7 +27,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             style={style}
             {...props}
             className={cls("rounded-full flex items-center justify-center overflow-hidden",
-                "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12",
+                "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12 min-w-12 min-h-12",
                 outerClassName
             )}>
             {src