fix media styling on mobile

app/src/ui/elements/media/Dropzone.tsx

@@ -463,7 +463,7 @@ const DropzoneInner = ({
 const UploadPlaceholder = ({ onClick, text = "Upload files" }) => {
    return (
       <div
-         className="w-[49%] aspect-[1/0.9] md:w-60 flex flex-col border-2 border-dashed border-muted relative justify-center items-center text-primary/30 hover:border-primary/30 hover:text-primary/50 hover:cursor-pointer hover:bg-muted/20 transition-colors duration-200"
+         className="w-[49%] aspect-square md:w-60 flex flex-col border-2 border-dashed border-muted relative justify-center items-center text-primary/30 hover:border-primary/30 hover:text-primary/50 hover:cursor-pointer hover:bg-muted/20 transition-colors duration-200"
          onClick={onClick}
       >
          <span className="">{text}</span>
@@ -527,7 +527,7 @@ const Preview = ({ file, handleUpload, handleDelete, onClick }: PreviewProps) =>
    return (
       <div
          className={twMerge(
-            "w-[49%] md:w-60 flex flex-col border border-muted relative hover:bg-primary/5 cursor-pointer transition-colors",
+            "w-[49%] md:w-60 aspect-square flex flex-col border border-muted relative hover:bg-primary/5 cursor-pointer transition-colors",
             file.state === "failed" && "border-red-500 bg-red-200/20",
             file.state === "deleting" && "opacity-70",
          )}
@@ -550,7 +550,7 @@ const Preview = ({ file, handleUpload, handleDelete, onClick }: PreviewProps) =>
                />
             </div>
          )}
-         <div className="flex bg-primary/5 aspect-[1/0.8] overflow-hidden items-center justify-center">
+         <div className="flex bg-primary/5 aspect-[1/0.78] overflow-hidden items-center justify-center">
             <PreviewWrapperMemoized
                file={file}
                fallback={FallbackPreview}

app/src/ui/elements/media/DropzoneContainer.tsx

@@ -99,33 +99,31 @@ export function DropzoneContainer({
 
    const key = id + JSON.stringify(_initialItems);
    return (
-      <div className="flex flex-col gap-4">
-         <Dropzone
-            key={id + key}
-            getUploadInfo={getUploadInfo}
-            handleDelete={handleDelete}
-            onUploaded={refresh}
-            onDeleted={refresh}
-            autoUpload
-            initialItems={_initialItems}
-            footer={
-               <Footer
-                  items={_initialItems.length}
-                  length={$q._data?.[0]?.body.meta.count ?? 0}
-                  onFirstVisible={() => $q.setSize($q.size + 1)}
-               />
-            }
-            {...props}
-         >
-            {children
-               ? (props) => (
-                    <DropzoneContainerContext.Provider value={props}>
-                       {children}
-                    </DropzoneContainerContext.Provider>
-                 )
-               : undefined}
-         </Dropzone>
-      </div>
+      <Dropzone
+         key={id + key}
+         getUploadInfo={getUploadInfo}
+         handleDelete={handleDelete}
+         onUploaded={refresh}
+         onDeleted={refresh}
+         autoUpload
+         initialItems={_initialItems}
+         footer={
+            <Footer
+               items={_initialItems.length}
+               length={$q._data?.[0]?.body.meta.count ?? 0}
+               onFirstVisible={() => $q.setSize($q.size + 1)}
+            />
+         }
+         {...props}
+      >
+         {children
+            ? (props) => (
+                 <DropzoneContainerContext.Provider value={props}>
+                    {children}
+                 </DropzoneContainerContext.Provider>
+              )
+            : undefined}
+      </Dropzone>
    );
 }
 

app/src/ui/layouts/AppShell/AppShell.tsx

@@ -99,7 +99,7 @@ export function Main({ children }) {
 export function Sidebar({ children }) {
    const open = appShellStore((store) => store.sidebarOpen);
    const close = appShellStore((store) => store.closeSidebar);
-   const ref = useClickOutside(close, null, [document.getElementById("header")]);
+   const ref = useClickOutside(close, ["mouseup", "touchend"]); //, [document.getElementById("header")]);
    const [location] = useLocation();
 
    const closeHandler = () => {

app/src/ui/layouts/AppShell/Header.tsx

@@ -107,7 +107,7 @@ export function HeaderNavigation() {
 function SidebarToggler() {
    const toggle = appShellStore((store) => store.toggleSidebar);
    const open = appShellStore((store) => store.sidebarOpen);
-   return <IconButton size="lg" Icon={open ? TbX : TbMenu2} onClick={toggle} />;
+   return <IconButton id="toggle-sidebar" size="lg" Icon={open ? TbX : TbMenu2} onClick={toggle} />;
 }
 
 export function Header({ hasSidebar = true }) {

app/src/ui/routes/data/data.schema.$entity.tsx

@@ -103,7 +103,7 @@ export function DataSchemaEntity({ params }) {
                   path={[{ label: "Schema", href: "/" }, { label: entity.label }]}
                   backTo="/"
                />
-               <Link to="/" className="invisible md:visible">
+               <Link to="/" className="hidden md:inline">
                   <Button IconLeft={TbSitemap}>Overview</Button>
                </Link>
             </div>