From 95d17f573283f816d22cdb4655cdfba4a1354b17 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Tue, 24 Sep 2024 20:46:49 +0800
Subject: [PATCH] fix: adjust slide up modal aspect ratio

Signed-off-by: Innei <i@innei.in>
---
 .../components/ui/modal/stacked/custom-modal.tsx | 16 ++++++++++++++--
 apps/renderer/src/modules/achievement/hooks.tsx  |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/renderer/src/components/ui/modal/stacked/custom-modal.tsx b/apps/renderer/src/components/ui/modal/stacked/custom-modal.tsx
index 73ed7bc7f..c1ab28d61 100644
--- a/apps/renderer/src/components/ui/modal/stacked/custom-modal.tsx
+++ b/apps/renderer/src/components/ui/modal/stacked/custom-modal.tsx
@@ -12,7 +12,12 @@ export const PlainModal = ({ children }: PropsWithChildren) => children
 
 export { PlainModal as NoopChildren }
 
-export const SlideUpModal = (props: PropsWithChildren) => {
+type ModalTemplateType = {
+  (props: PropsWithChildren<{ className?: string }>): JSX.Element
+  class: (className: string) => (props: PropsWithChildren<{ className?: string }>) => JSX.Element
+}
+
+export const SlideUpModal: ModalTemplateType = (props) => {
   const winHeight = useState(() => window.innerHeight)[0]
   const { dismiss } = useCurrentModal()
   return (
@@ -39,7 +44,8 @@ export const SlideUpModal = (props: PropsWithChildren) => {
         }}
         className={cn(
           "relative flex flex-col items-center overflow-hidden rounded-xl border bg-theme-background p-8 pb-0",
-          "h-[80vh] w-[600px] max-w-full shadow lg:max-h-[calc(100vh-10rem)]",
+          "aspect-[7/9] w-[600px] max-w-full shadow lg:max-h-[calc(100vh-10rem)]",
+          props.className,
         )}
       >
         {props.children}
@@ -49,3 +55,9 @@ export const SlideUpModal = (props: PropsWithChildren) => {
     </div>
   )
 }
+
+SlideUpModal.class = (className: string) => {
+  return (props: ComponentType) => (
+    <SlideUpModal {...props} className={cn(props.className, className)} />
+  )
+}
diff --git a/apps/renderer/src/modules/achievement/hooks.tsx b/apps/renderer/src/modules/achievement/hooks.tsx
index 6e0489ce9..170ba5219 100644
--- a/apps/renderer/src/modules/achievement/hooks.tsx
+++ b/apps/renderer/src/modules/achievement/hooks.tsx
@@ -42,6 +42,7 @@ export const useAchievementModal = () => {
       title: "Achievements",
       content: AchievementModalContent,
       CustomModalComponent: SlideUpModal,
+      overlay: true,
     })
   }, [present])
 }