changed some swipe to delete settings

src/app/(dashboard)/layout.tsx

@@ -11,7 +11,7 @@ export default async function RootLayout({
     return (
         <SidebarProvider>
             <Dashboard />
-            <main className="relative h-screen isolate">
+            <main className="relative h-screen isolate" style={{touchAction: "pan-y pinch-zoom"}}>
                 <PersistenceProvider>
                     {children}
                 </PersistenceProvider>

src/app/(dashboard)/page.tsx

@@ -451,9 +451,9 @@ const ProjectContainer = ({
     );
 
     return isMobile ? (
-        <div className="h-full w-[100% + 5 * var(--spacing)] -mx-5 origin-center">
+        <div className=" w-[100% + 5 * var(--spacing)] -mx-5 origin-center overflow-hidden">
-            <SwipeToDelete onDelete={() => deleteProject(project.uuid)} transitionDuration={200} height={210.38} deleteThreshold={45}>
+            <SwipeToDelete onDelete={() => deleteProject(project.uuid)} transitionDuration={200} deleteThreshold={50}>
-                <div className="w-screen bg-background px-5">
+                <div className="w-screen bg-background px-5 py-2 -mt-[1px] h-[calc(100% + 2px)]">
                     {projectComponent}
                 </div>
             </SwipeToDelete>
@@ -517,7 +517,7 @@ export default function Home(): ReactNode {
 
     return (
         <SelectContext.Provider value={context}>
-            <div className="flex flex-col justify-between h-screen overscroll-x-none overflow-x-hidden" style={{ touchAction: deleting ? "none" : "pan-y pinch-zoom" }}>
+            <div className="flex flex-col justify-between h-screen">
                 <div className="p-5">
                     <div className="flex flex-row items-center gap-2">
                         <StaticSidebarTrigger />
@@ -602,7 +602,7 @@ export default function Home(): ReactNode {
                             </Toggle>
                         </div>
                     </StickyTopContainer>
-                    <div className={cn("grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-2")}>
+                    <div className={cn("grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-0 sm:gap-4 mt-2")}>
                         {filteredProjects && filteredProjects.map((project) => <ProjectContainer key={project.uuid} project={project} />)}
                     </div>
                     {(filteredProjects != undefined && filteredProjects.length == 0) && (

src/app/(editor)/editor/[uuid]/page.tsx

@@ -73,5 +73,5 @@ export default function Editor() {
                 <div className="flex flex-row justify-end grow basis-0" />
             </Menubar>
         </>
-    ) : <></>;
+    ) : <>Project is invalid (or is it?)</>;
 }

src/components/swipe-to-delete/SwipeToDelete.tsx

@@ -90,11 +90,15 @@ export const SwipeToDelete = ({
             startTouchPosition.current = cursorPosition(event);
             initTranslate.current = translate;
             setTouching(true);
-            if (!deleting) setDeleting(true);
+            setDeleting(true);
         },
         [disabled, touching, translate, deleting, setDeleting]
     );
 
+    useEffect(() => {
+        // setDeleting(touching);
+    }, [touching]);
+
     useEffect(() => {
         const root = container.current;
         root?.style.setProperty("--rstdiHeight", height + "px");
@@ -122,9 +126,8 @@ export const SwipeToDelete = ({
             if (rtl && cursorPosition(event) < startTouchPosition.current - initTranslate.current)
                 return setTranslate(0);
             setTranslate(cursorPosition(event) - startTouchPosition.current + initTranslate.current);
-            if (!deleting) setDeleting(true);
         },
-        [rtl, touching, deleting, setDeleting]
+        [rtl, touching]
     );
 
 
@@ -181,7 +184,7 @@ export const SwipeToDelete = ({
                 setTranslate(() => (rtl ? 1 : -1) * deleteWidth);
             }
             setTouching(() => false);
-            if (deleting) setDeleting(false);
+            setDeleting(false);
             if (deleteWithoutConfirm) onDeleteClick();
         },
         [containerWidth, deleteWidth, deleteWithoutConfirmThreshold, onDeleteClick, rtl, translate, deleting, setDeleting]
@@ -207,22 +210,6 @@ export const SwipeToDelete = ({
         };
     }, [onMouseMove, onMouseUp, onTouchMove, touching]);
 
-    // disabling scrolling when swiping to delete
-    useEffect(() => {
-        const handleScroll = (e: Event) => {
-            if (deleting) {
-                e.preventDefault();
-                document.body.style.overflow = 'hidden';
-            } else {
-                document.body.style.overflow = 'auto';
-            }
-        };
-
-        window.addEventListener('scroll', handleScroll);
-
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, [deleting]);
-
     return (
         <div id={id} className={`rstdi${internalDeleting ? " deleting" : ""} ${className}`} ref={container}>
             <div className={`delete${internalDeleting ? " deleting" : ""}`}>

src/components/swipe-to-delete/styles.css

@@ -13,11 +13,10 @@
     width: auto;
     position: relative;
     box-sizing: border-box;
-    overflow: hidden;
     height: 100%;
     max-height: 100%;
-    overflow: hidden;
     overscroll-behavior: none;
+    overflow: hidden;
 }
 
 .rstdi *,
@@ -27,7 +26,7 @@
 }
 
 .rstdi.deleting {
-    transition: all var(--rstdiTransitionDuration) ease-out;
+    transition: all var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
     opacity: 0;
     max-height: 0;
 }
@@ -40,7 +39,7 @@
 }
 
 .rstdi .content.transition {
-    transition: all var(--rstdiTransitionDuration) ease-out;
+    transition: all var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
 }
 
 .rstdi .content.deleting {
@@ -48,14 +47,14 @@
     width: auto;
     position: relative;
     transform: translateX(-100%);
-    transition: all var(--rstdiTransitionDuration) ease-out;
+    transition: all var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
 }
 
 .rstdi .delete {
     position: absolute;
     right: 0;
-    margin-top: 1px;
+    margin-top: 0px;
-    height: calc(100% - 3px);
+    height: 100%;
     width: 100%;
     top: 0;
     background: var(--rstdiDeleteColor);
@@ -67,7 +66,7 @@
 
 .rstdi .delete button {
     width: var(--rstdiDeleteWidth);
-    transition: transform var(--rstdiTransitionDuration) ease-out;
+    transition: transform var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
     transform: translateX(var(--rstdiButtonMarginLeft));
     text-align: center;
     height: 100%;