update style in dashboard

bruceunx · May 18, 2024 · 3f39c80 · 3f39c80
1 parent b0dc1a7
commit 3f39c80
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
               <Nav />
               <Flex
                 direction="column"
-                className="h-full rounded-3xl mb-2 ml-52 mt-16 mr-20 bg-gray-800"
+                className="h-full rounded-3xl ml-52 pt-16 bg-gray-800"
               >
                 {children}
               </Flex>

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
@@ -30,25 +30,29 @@ export default function Dashboard(props: Props) {
   };
 
   return (
-    <Flex direction="column" width="100%">
+    <Flex direction="column" width="100%" className="h-full">
       {!props.content && (
         <>
           <Search
             setRoutes={setRoutes}
             setConditions={setConditions}
             setCurrentNode={setCurrentNode}
           />
-          <Separator orientation="horizontal" size="4" className="bg-gray-500" />
+          <Separator
+            orientation="horizontal"
+            size="4"
+            className="bg-gray-500"
+          />
         </>
       )}
-      <Flex width="100%" className="h-80">
+      <Flex width="100%" className="h-1/2">
         <ToastProvider>
           <Chart handleSelect={handleSelect} content={props.content} />
         </ToastProvider>
       </Flex>
       <Separator orientation="horizontal" size="4" className="bg-gray-500" />
-      <Flex className="min-h-[300px]" width="100%" direction="row">
-        <Flex className="w-3/4" direction="column">
+      <Flex className="h-1/2" width="100%" direction="row">
+        <Flex className="w-3/4 h-full" direction="column">
           {Boolean(routes.length) && (
             <Reactions
               routes={routes}
@@ -66,7 +70,7 @@ export default function Dashboard(props: Props) {
           )}
         </Flex>
         <Flex
-          className="w-1/4 ml-2 h-[54vh]"
+          className="w-1/4 ml-2 h-full"
           align="center"
           direction="column"
           gap="2"
@@ -81,7 +85,7 @@ export default function Dashboard(props: Props) {
                 ? "No Target"
                 : "未选中目标"}{" "}
           </Text>
-          <Flex className="w-64 h-full" direction="column">
+          <Flex className="w-64" direction="column">
             {currentNode && currentNode.type === "chemNode" && (
               <NodeDetail
                 setRoutes={setRoutes}

diff --git a/src/components/Reactions.tsx b/src/components/Reactions.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Flex, RadioGroup, Table } from "@radix-ui/themes";
+import { RadioGroup, Table } from "@radix-ui/themes";
 import Reaction from "./Reaction";
 import { useReactFlow, getConnectedEdges, getIncomers, Node } from "reactflow";
 import { getChemicalSVG } from "../utils/api";
@@ -128,18 +128,9 @@ const Reactions: React.FC<any> = ({ routes, currentNode, locale }) => {
   };
   return (
     <RadioGroup.Root onValueChange={onChange} value={defaultValue}>
-      <Flex
-        direction="column"
-        width="100%"
-        className="max-h-[54vh] overflow-y-auto"
-        gap="4"
-      >
-        <Flex
-          className="w-full p-2"
-          align="center"
-          justify="center"
-          direction="row"
-          gap="8"
+      <div className="no-pros relative overflow-hidden ">
+        <div
+          className={`relative overflow-y-scroll h-[500px]`}
           style={{ backgroundColor: "var(--gray-a4)" }}
         >
           <Table.Root variant="surface" className="w-full">
@@ -167,8 +158,8 @@ const Reactions: React.FC<any> = ({ routes, currentNode, locale }) => {
               ))}
             </Table.Body>
           </Table.Root>
-        </Flex>
-      </Flex>
+        </div>
+      </div>
     </RadioGroup.Root>
   );
 };