fix: adjust slide up modal aspect ratio

Signed-off-by: Innei <i@innei.in>

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)} />
+  )
+}

apps/renderer/src/modules/achievement/hooks.tsx

@@ -42,6 +42,7 @@ export const useAchievementModal = () => {
       title: "Achievements",
       content: AchievementModalContent,
       CustomModalComponent: SlideUpModal,
+      overlay: true,
     })
   }, [present])
 }