feat: better responsive (#115)

* feat: better responsive * fix: gap
QuiiBz · Jan 4, 2025 · 20d9439 · 20d9439
1 parent f3feeaa
commit 20d9439
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/apps/dashboard/src/app/(splash)/login/page.tsx b/apps/dashboard/src/app/(splash)/login/page.tsx
@@ -19,8 +19,8 @@ export default function Page() {
         <Heading as="h1" size="5" weight="regular">
           Sign in
         </Heading>
-        <Text align="center" as="p" size="2">
-          Create an account to export your images to URLs <br /> and make them
+        <Text align="center" as="p" size="2" className="max-w-xs">
+          Create an account to export your images to URLs and make them
           available in all your devices.
         </Text>
       </Flex>

diff --git a/apps/dashboard/src/components/Splash/TemplateSplashPreview.tsx b/apps/dashboard/src/components/Splash/TemplateSplashPreview.tsx
@@ -1,30 +1,17 @@
 "use client";
 import { Flex } from "@radix-ui/themes";
-import { useEffect, useState, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { OgImage } from "../OgImage";
 import { usePreviewControls } from "../../lib/hooks/usePreviewControls";
+import { useIsMobile } from "../../lib/hooks/useIsMobile";
 
 interface TemplateSplashPreviewProps {
   image: ReactNode;
 }
 
 export function TemplateSplashPreview({ image }: TemplateSplashPreviewProps) {
   const { preview, PreviewControls } = usePreviewControls();
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    setIsMobile(window.innerWidth < 768);
-
-    const onResize = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-
-    window.addEventListener("resize", onResize);
-
-    return () => {
-      window.removeEventListener("resize", onResize);
-    };
-  }, []);
+  const isMobile = useIsMobile();
 
   return (
     <Flex direction="column" gap="2">

diff --git a/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx b/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx
@@ -80,7 +80,11 @@ export function OpenGraphImageChecker() {
           placeholder="https://ogstudio.app"
         />
         {data ?? loading ? (
-          <Flex gap="6" justify="between">
+          <Flex
+            gap="6"
+            justify="between"
+            direction={{ initial: "column-reverse", md: "row" }}
+          >
             <Table.Root size="1">
               <Table.Header>
                 <Table.Row>

diff --git a/apps/dashboard/src/components/Splash/index.tsx b/apps/dashboard/src/components/Splash/index.tsx
@@ -40,7 +40,10 @@ export function Splash({ children }: OgSplashProps) {
         width="100vw"
       >
         <Box
-          height={largeSplash ? "740px" : "680px"}
+          minHeight={largeSplash ? "740px" : "680px"}
+          maxHeight="calc(100vh - 80px)"
+          overflowY={{ initial: "scroll", md: "auto" }}
+          overflowX="hidden"
           p="6"
           style={{
             boxShadow: "var(--shadow-6)",
@@ -50,10 +53,16 @@ export function Splash({ children }: OgSplashProps) {
           maxWidth="100vw"
           width={largeSplash ? "1160px" : "980px"}
         >
-          <Flex align="center" justify="between" className="-mt-2">
-            <Flex align="center" gap="6">
+          <Flex
+            justify="between"
+            className="-mt-2 sm:mb-0 mb-4 gap-8 sm:items-center items-start"
+          >
+            <Flex
+              align="center"
+              className="flex-wrap gap-1 justify-between sm:gap-8 sm:justify-normal w-full"
+            >
               <Text asChild size="6">
-                <Link className="flex gap-2 items-center" href="/">
+                <Link className="flex gap-2 items-center min-w-fit" href="/">
                   <Image
                     alt="OG Studio logo"
                     height={50}
@@ -67,7 +76,7 @@ export function Splash({ children }: OgSplashProps) {
                 color="orange"
                 radius="full"
                 size="2"
-                className="hidden sm:block"
+                className="hidden md:block"
               >
                 Early preview
               </Badge>
@@ -84,7 +93,14 @@ export function Splash({ children }: OgSplashProps) {
                 </Link>
               </Button>
             </Flex>
-            <Button asChild color="gray" mr="2" radius="full" variant="ghost">
+            <Button
+              asChild
+              color="gray"
+              mr="2"
+              radius="full"
+              variant="ghost"
+              className="mt-2 sm:mt-[inherit]"
+            >
               <Link href={data?.user ? "/profile" : "/login"}>
                 {data?.user?.name ?? "Guest"}
                 <Avatar

diff --git a/apps/dashboard/src/lib/hooks/useIsMobile.ts b/apps/dashboard/src/lib/hooks/useIsMobile.ts
@@ -0,0 +1,22 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 768);
+
+    const onResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return isMobile;
+}