From 9f457561d89dd47af7ff9b35623d605f7ab38c62 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Fri, 24 Jan 2025 22:06:14 +0100
Subject: [PATCH] fix: Course payment modal is overflowing in mobile

---
 .../Objects/StyledElements/Modal/Modal.tsx    | 23 ++++++++++---------
 .../Pages/Courses/ActivityIndicators.tsx      |  1 +
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/web/components/Objects/StyledElements/Modal/Modal.tsx b/apps/web/components/Objects/StyledElements/Modal/Modal.tsx
index dc0f859a..cb693464 100644
--- a/apps/web/components/Objects/StyledElements/Modal/Modal.tsx
+++ b/apps/web/components/Objects/StyledElements/Modal/Modal.tsx
@@ -23,21 +23,21 @@ type ModalParams = {
 const Modal = (params: ModalParams) => {
   const getMinHeight = () => {
     switch (params.minHeight) {
-      case 'sm': return 'min-h-[300px]'
-      case 'md': return 'min-h-[500px]'
-      case 'lg': return 'min-h-[700px]'
-      case 'xl': return 'min-h-[900px]'
-      default: return ''
+      case 'sm': return 'min-h-[300px] max-h-[90vh]'
+      case 'md': return 'min-h-[400px] max-h-[90vh]'
+      case 'lg': return 'min-h-[500px] max-h-[90vh]'
+      case 'xl': return 'min-h-[600px] max-h-[90vh]'
+      default: return 'max-h-[90vh]'
     }
   }
 
   const getMinWidth = () => {
     switch (params.minWidth) {
-      case 'sm': return 'min-w-[600px]'
-      case 'md': return 'min-w-[800px]'
-      case 'lg': return 'min-w-[1000px]'
-      case 'xl': return 'min-w-[1200px]'
-      default: return ''
+      case 'sm': return 'w-[95vw] sm:w-[90vw] md:w-[600px]'
+      case 'md': return 'w-[95vw] sm:w-[90vw] md:w-[800px]'
+      case 'lg': return 'w-[95vw] sm:w-[90vw] lg:w-[1000px]'
+      case 'xl': return 'w-[95vw] sm:w-[90vw] xl:w-[1200px]'
+      default: return 'w-[95vw] sm:w-[90vw]'
     }
   }
 
@@ -47,7 +47,8 @@ const Modal = (params: ModalParams) => {
         <DialogTrigger asChild>{params.dialogTrigger}</DialogTrigger>
       )}
       <DialogContent className={cn(
-        "overflow-auto",
+        "overflow-auto mx-auto",
+        "p-4 md:p-6",
         getMinHeight(),
         getMinWidth(),
         params.customHeight,
diff --git a/apps/web/components/Pages/Courses/ActivityIndicators.tsx b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
index a979c612..59f32a48 100644
--- a/apps/web/components/Pages/Courses/ActivityIndicators.tsx
+++ b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
@@ -65,6 +65,7 @@ function ActivityIndicators(props: Props) {
                     key={activity.activity_uuid}
                   >
                     <Link
+                      prefetch={true}
                       href={
                         getUriWithOrg(orgslug, '') +
                         `/course/${courseid}/activity/${activity.activity_uuid.replace(