fix(ui): several fixes (#627)

* fix overlay cover when node selected * hide scrollbars, add custom scrollbar to dashboard * fix formatting * upgrade react flow
reearth · Nov 14, 2024 · d5e292e · d5e292e
1 parent 99e0789
commit d5e292e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 28 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -59,7 +59,7 @@
     "@tanstack/react-query": "5.59.19",
     "@tanstack/react-router": "1.79.0",
     "@tanstack/react-table": "8.20.5",
-    "@xyflow/react": "12.3.4",
+    "@xyflow/react": "12.3.5",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",

diff --git a/ui/src/features/Editor/components/RightPanel/index.tsx b/ui/src/features/Editor/components/RightPanel/index.tsx
@@ -28,13 +28,13 @@ const RightPanel: React.FC<Props> = ({ selected }) => {
     <>
       <div
         id="right-panel-overlay"
-        className="fixed right-0 size-full border-l bg-black/25"
+        className={`fixed ${selected ? "right-[350px]" : "right-0"} z-10 size-full border-l bg-black/30`}
         style={{
           transform: `translateX(${selected ? "0" : "100%"})`,
           transitionDuration: "0ms",
           transitionProperty: "transform",
         }}>
-        <div className="fixed right-[350px] z-[1] flex justify-end p-4">
+        <div className="fixed right-0 z-[1] flex justify-end p-4">
           <IconButton
             className="relative before:absolute before:inset-y-0 before:right-0 before:z-[-1] before:bg-success before:content-['']"
             icon={<X className="size-[30px]" weight="thin" />}

diff --git a/ui/src/features/WorkspaceProjects/index.tsx b/ui/src/features/WorkspaceProjects/index.tsx
@@ -1,6 +1,6 @@
 import { Plus } from "@phosphor-icons/react";
 
-import { Button, FlowLogo } from "@flow/components/";
+import { Button, FlowLogo, ScrollArea } from "@flow/components/";
 import BasicBoiler from "@flow/components/BasicBoiler";
 import { useT } from "@flow/lib/i18n";
 
@@ -47,20 +47,22 @@ const ProjectsManager: React.FC = () => {
           </Button>
         </div>
         {projects && projects?.length > 0 ? (
-          <div
-            className="grid min-w-0 grid-cols-1 gap-2 overflow-scroll sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
-            ref={ref}>
-            {projects?.map((p) => (
-              <ProjectCard
-                key={p.id}
-                project={p}
-                currentProject={currentProject}
-                setEditProject={setEditProject}
-                setProjectToBeDeleted={setProjectToBeDeleted}
-                onProjectSelect={handleProjectSelect}
-              />
-            ))}
-          </div>
+          <ScrollArea>
+            <div
+              className="grid min-w-0 grid-cols-1 gap-2 overflow-scroll sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
+              ref={ref}>
+              {projects?.map((p) => (
+                <ProjectCard
+                  key={p.id}
+                  project={p}
+                  currentProject={currentProject}
+                  setEditProject={setEditProject}
+                  setProjectToBeDeleted={setProjectToBeDeleted}
+                  onProjectSelect={handleProjectSelect}
+                />
+              ))}
+            </div>
+          </ScrollArea>
         ) : (
           <BasicBoiler
             text={t("No Projects")}

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -9,6 +9,18 @@
     "calt" 1; /* fix for Chrome */
 }
 
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
 @layer base {
   /* TODO: Fix light mode colors and enable light mode */
   :root {
@@ -90,6 +102,7 @@
 @layer base {
   * {
     @apply border-border;
+    @apply no-scrollbar;
   }
   body {
     @apply bg-background text-foreground;

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -3665,7 +3665,7 @@ __metadata:
     "@types/react-dom": "npm:18.3.1"
     "@vitejs/plugin-react": "npm:4.3.3"
     "@vitest/coverage-v8": "npm:2.1.4"
-    "@xyflow/react": "npm:12.3.4"
+    "@xyflow/react": "npm:12.3.5"
     autoprefixer: "npm:10.4.20"
     class-variance-authority: "npm:0.7.0"
     clsx: "npm:2.1.1"
@@ -5388,23 +5388,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xyflow/react@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@xyflow/react@npm:12.3.4"
+"@xyflow/react@npm:12.3.5":
+  version: 12.3.5
+  resolution: "@xyflow/react@npm:12.3.5"
   dependencies:
-    "@xyflow/system": "npm:0.0.45"
+    "@xyflow/system": "npm:0.0.46"
     classcat: "npm:^5.0.3"
     zustand: "npm:^4.4.0"
   peerDependencies:
     react: ">=17"
     react-dom: ">=17"
-  checksum: 10c0/055d8ddc63dece1244add934ad3625557ac09e8762b525a381695ce50090b939a8e93fe81c83e5efdd9e83f3daa8de767e64e324fd107e476e2c55bd743feac6
+  checksum: 10c0/f4eb2f8ed31454aa2bbc7fef3b3e9592093cbf238ca7ba572d002a0bd5fac267d488b6d560d173ee610c83e02ca0e9505c35083bdedc9890c1a65f52297f8c1c
   languageName: node
   linkType: hard
 
-"@xyflow/system@npm:0.0.45":
-  version: 0.0.45
-  resolution: "@xyflow/system@npm:0.0.45"
+"@xyflow/system@npm:0.0.46":
+  version: 0.0.46
+  resolution: "@xyflow/system@npm:0.0.46"
   dependencies:
     "@types/d3-drag": "npm:^3.0.7"
     "@types/d3-selection": "npm:^3.0.10"
@@ -5413,7 +5413,7 @@ __metadata:
     d3-drag: "npm:^3.0.0"
     d3-selection: "npm:^3.0.0"
     d3-zoom: "npm:^3.0.0"
-  checksum: 10c0/2e871da5c6284b6f3aeba78256720e13a6f56002c8bfe7d273629c3a33bc86d4702d066ddcca58605b1280d361da84de5442aa3cba1acc6202c0f8d81112b9b5
+  checksum: 10c0/973886c03a389e96d504ef6e8ff350949688d7a82f159549ac2a38f7f11ebed2ce5b65b52c70bd7d9f344247c913dc751c79b737953d8759d7d13e98a5ee512d
   languageName: node
   linkType: hard