fix ui scroll (#251)

* fix ui scroll
cartridge-gg · Nov 15, 2023 · 68da890 · 68da890 · vercel · Nov 15, 2023
1 parent 605baaf
commit 68da890
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
@@ -5,6 +5,7 @@ import { motion } from "framer-motion";
 
 import CrtEffect from "./CrtEffect";
 import { Footer } from "./Footer";
+import { IsMobile } from "@/utils/ui";
 
 export interface LayoutProps {
   CustomLeftPanel?: React.FC;
@@ -34,7 +35,6 @@ const Layout = ({
   rigthPanelScrollable = true,
   footer,
 }: LayoutProps) => {
-
   return (
     <>
       <Flex
@@ -74,7 +74,7 @@ const LeftPanel = ({ title, prefixTitle, map, imageSrc, ...props }: Partial<Left
         <Text textStyle="subheading" textAlign="center" fontSize={["9px", "11px"]}>
           {prefixTitle}
         </Text>
-        <Heading fontSize={["36px", "48px"]}  textAlign="center" fontWeight="normal">
+        <Heading fontSize={["36px", "48px"]} textAlign="center" fontWeight="normal">
           {title}
         </Heading>
       </VStack>
@@ -94,21 +94,30 @@ const RightPanel = ({
   rigthPanelMaxH,
   rigthPanelScrollable,
   ...props
-}: { children: ReactNode; footer: ReactNode; isSinglePanel: boolean; rigthPanelMaxH?: string, rigthPanelScrollable: boolean } & StyleProps) => {
+}: {
+  children: ReactNode;
+  footer: ReactNode;
+  isSinglePanel: boolean;
+  rigthPanelMaxH?: string;
+  rigthPanelScrollable: boolean;
+} & StyleProps) => {
+  const isMobile = IsMobile();
   return (
     <VStack position="relative" w="full" {...props}>
       <VStack
         position="relative"
         flex="1"
         overflowY={rigthPanelScrollable ? "scroll" : "hidden"}
         __css={{
-          "scrollbar-width": "none"
+          "scrollbar-width": "none",
         }}
         w="full"
-        maxH={rigthPanelMaxH ? rigthPanelMaxH : (isSinglePanel ? "calc(100vh - 70px)" : "calc(100vh - 145px)")}
+        maxH={rigthPanelMaxH ? rigthPanelMaxH : isSinglePanel ? "calc(100vh - 70px)" : "calc(100vh - 145px)"}
       >
         {children}
-        {!isSinglePanel || rigthPanelScrollable && <Box display="block" minH="70px" h="90px" w="full" />}
+        {!isSinglePanel && rigthPanelScrollable && (
+          <Box display="block" minH={isMobile ? "170px" : "90px"} h={isMobile ? "170px" : "90px"} w="full" />
+        )}
       </VStack>
       {footer}
     </VStack>

diff --git a/web/src/components/Leaderboard.tsx b/web/src/components/Leaderboard.tsx
@@ -57,11 +57,6 @@ const Leaderboard = ({ nameEntry, ...props }: { nameEntry?: boolean } & StylePro
           boxSize="full"
           variant="dotted"
           h="auto"
-          maxH="calc(100% - 100px)"
-          overflowY="scroll"
-          __css={{
-            "scrollbar-width": "none"
-          }}
           ref={listRef}
         >
           {scores ? (

diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -62,7 +62,7 @@ export default function Home() {
   };
 
   return (
-    <Layout CustomLeftPanel={HomeLeftPanel} rigthPanelScrollable={false} rigthPanelMaxH="calc(100vh - 170px)">
+    <Layout CustomLeftPanel={HomeLeftPanel} rigthPanelScrollable={false} rigthPanelMaxH="calc(100vh - 250px)">
       <VStack boxSize="full" gap="10px" justify="center">
         <Card variant="pixelated">
           <HStack w="full" p="20px" gap="10px" justify="center">