[MOD] resizxe handle

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videochat-app",
-  "version": "0.5.0",
+  "version": "0.4.0",
   "description": "Random videochat app",
   "license": "UNLICENSED",
   "private": true,

app/src/components/partials/Resizable.jsx

@@ -1,6 +1,6 @@
 import { forwardRef, useEffect } from "react";
 
-import { RiExpandLeftRightFill } from "react-icons/ri";
+import { HiDotsVertical } from "react-icons/hi";
 
 const Resizable = forwardRef(({ children, className, resizeFunction }, ref) => {
     const handleResize = () => {
@@ -14,12 +14,12 @@ const Resizable = forwardRef(({ children, className, resizeFunction }, ref) => {
     useEffect(() => {
         document.addEventListener("mouseup", stopResize)
     })
-
+    
     return (
         <div ref={ref} className={`resizable relative ${className}`}>
             { children }
             <span onMouseDown={handleResize} className="handle hidden relative md:block group">
-                <RiExpandLeftRightFill className="h-4 w-4 absolute top-1/2 text-base-content/20" />
+                <HiDotsVertical className="h-4 w-4 my-4 top-1/2 text-base-content/30" />
             </span>
         </div>
     )

app/src/index.css

@@ -65,7 +65,7 @@
 
     @media (min-width: 768px) {
         .grid-chat.text-only{
-            grid-template-columns: 1fr;
+            grid-template-columns: 1fr !important;
         }
 
         .grid-chat{        
@@ -75,17 +75,18 @@
 
         .grid-chat .resizable .handle{
             position: absolute;
-            width: 1rem;
-            height: 100%;        
+            width: 1rem;    
             left: 100%;
             cursor: col-resize;
+            top: calc(30vh - 0.5rem);
         }
 
-        .grid-chat .resizable .handle:after{
-            position: absolute;
+        .grid-chat .resizable .handle:after, .grid-chat .resizable .handle:before{
+            position: relative;
+            display: block;
             content: "";
             width: 2px;
-            height: 100%;        
+            height: 10vh;        
             left: calc(50% - 1px);
             background-color: hsl(var(--bc) / 0.2);
             border-radius: 1px;

app/src/routes/chat/index.jsx

@@ -109,6 +109,12 @@ const Chat = () => {
 
         return () => { timeout && clearTimeout(timeout) }
     }, [status])
+
+    useEffect(() => { 
+        const handleGrid = (e) => { if(window.innerWidth < 768) grid.current.style = "" }
+        window.addEventListener("resize", handleGrid)
+        return () => window.removeEventListener("resize", handleGrid)
+    }, [])
 
     return (
         <section ref={grid} className={`grid grid-chat gap-4 w-full relative min-h-display ${isTextOnly && "text-only"}`}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "videochat",
-  "version": "0.5.0",
+  "version": "0.4.0",
   "description": "Random video chat",
   "license": "UNLICENSED",
   "private": true,

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videochat-server",
-  "version": "0.5.0",
+  "version": "0.4.0",
   "description": "Random videochat server",
   "license": "UNLICENSED",
   "private": true,