Improve personalize popup

src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx

@@ -35,10 +35,11 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
     queryClient,
   );
 
-  const { data: userProgress, refetch: refetchUserProgress } = useQuery(
+  const {
-    userResourceProgressOptions('roadmap', roadmapId),
+    data: userProgress,
-    queryClient,
+    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();

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">

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',