From ed0ac20592a6ef29a66dcdb387e6f561b96fbc8a Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 29 Jul 2025 22:25:06 +0100
Subject: [PATCH] Improve personalize popup

---
 .../PersonalizedRoadmap/PersonalizedRoadmap.tsx       | 11 ++++++-----
 .../PersonalizedRoadmap/PersonalizedRoadmapModal.tsx  |  7 ++++++-
 .../PersonalizedRoadmapSwitcher.tsx                   |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx b/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
index 3e846b3ad..4f05ee946 100644
--- a/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
+++ b/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
@@ -35,10 +35,11 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
     queryClient,
   );
 
-  const { data: userProgress, refetch: refetchUserProgress } = useQuery(
-    userResourceProgressOptions('roadmap', roadmapId),
-    queryClient,
-  );
+  const {
+    data: userProgress,
+    isLoading: isUserProgressLoading,
+    refetch: refetchUserProgress,
+  } = useQuery(userResourceProgressOptions('roadmap', roadmapId), queryClient);
 
   useEffect(() => {
     if (userProgress?.personalized) {
@@ -207,7 +208,7 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
         />
       ) : (
         <button
-          className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-500 transition-colors hover:text-black"
+          className="group hidden sm:inline-flex items-center gap-1.5 border-b-2 border-b-transparent pb-2.5 text-sm font-normal text-gray-500 transition-colors hover:text-black"
           onClick={() => {
             if (!isLoggedIn()) {
               showLoginPopup();
diff --git a/src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx b/src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx
index 8cc1b4896..9a9c1c50e 100644
--- a/src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx
+++ b/src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx
@@ -43,7 +43,12 @@ export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
   }
 
   return (
-    <Modal onClose={onClose} bodyClassName="rounded-2xl">
+    <Modal
+      onClose={onClose}
+      wrapperClassName="h-auto"
+      overlayClassName="items-start md:items-center"
+      bodyClassName="rounded-2xl"
+    >
       <form onSubmit={handleSubmit} className="p-4">
         <h2 className="text-lg font-semibold">Personalize Roadmap</h2>
         <div className="mt-0.5 flex flex-col gap-2">
diff --git a/src/components/PersonalizedRoadmap/PersonalizedRoadmapSwitcher.tsx b/src/components/PersonalizedRoadmap/PersonalizedRoadmapSwitcher.tsx
index 86e7e5f6a..4e05c9eed 100644
--- a/src/components/PersonalizedRoadmap/PersonalizedRoadmapSwitcher.tsx
+++ b/src/components/PersonalizedRoadmap/PersonalizedRoadmapSwitcher.tsx
@@ -69,7 +69,7 @@ export function PersonalizedRoadmapSwitcher(
             </div>
           )}
         </div>
-        <div className="flex">
+        <div className="flex bg-gray-200 rounded-full">
           <button
             className={cn(
               'rounded-full px-2.5 py-1 text-xs font-medium transition-all',