From a6311e587d97bd0b9d29d327c68b05a425375fcb Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 11 Mar 2024 05:02:36 +0000
Subject: [PATCH] Fix responsiveness issues

---
 src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx | 9 +++++----
 src/components/GenerateRoadmap/GenerateRoadmap.tsx   | 2 +-
 src/components/GenerateRoadmap/OpenAISettings.tsx    | 2 +-
 src/components/GenerateRoadmap/RoadmapSearch.tsx     | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx b/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx
index 7a905dfd4..1dfdb11d0 100644
--- a/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx
+++ b/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx
@@ -76,7 +76,7 @@ export function ExploreAIRoadmap() {
       </div>
 
       {isLoading ? (
-        <ul className="grid grid-cols-3 gap-2">
+        <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
           {new Array(21).fill(0).map((_, index) => (
             <li
               key={index}
@@ -90,7 +90,7 @@ export function ExploreAIRoadmap() {
             <div className="text-center text-gray-800">No roadmaps found</div>
           ) : (
             <>
-              <ul className="grid grid-cols-3 gap-2">
+              <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
                 {roadmaps.map((roadmap) => {
                   const roadmapLink = `/ai?id=${roadmap._id}`;
                   return (
@@ -98,6 +98,7 @@ export function ExploreAIRoadmap() {
                       key={roadmap._id}
                       href={roadmapLink}
                       className="flex flex-col rounded-md border transition-colors hover:bg-gray-100"
+                      target={'_blank'}
                     >
                       <h2 className="flex-grow px-2.5 py-2.5 text-base font-medium leading-tight">
                         {roadmap.title}
@@ -119,7 +120,7 @@ export function ExploreAIRoadmap() {
                 })}
               </ul>
               {hasMorePages && (
-                <div className='my-5 flex items-center justify-center'>
+                <div className="my-5 flex items-center justify-center">
                   <button
                     onClick={() => {
                       setIsLoadingMore(true);
@@ -127,7 +128,7 @@ export function ExploreAIRoadmap() {
                         setIsLoadingMore(false);
                       });
                     }}
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-black transition-colors rounded-full shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="inline-flex items-center gap-1.5 rounded-full bg-black px-3 py-1.5 text-sm font-medium text-white shadow-xl transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={isLoadingMore}
                   >
                     {isLoadingMore ? (
diff --git a/src/components/GenerateRoadmap/GenerateRoadmap.tsx b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
index 3b68e9467..1f273ead9 100644
--- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx
+++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
@@ -459,7 +459,7 @@ export function GenerateRoadmap() {
                 {isLoggedInUser && !openAPIKey && (
                   <button
                     onClick={() => setIsConfiguring(true)}
-                    className="rounded-xl border border-current px-2 py-0.5 text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
+                    className="text-left rounded-xl border border-current px-2 py-0.5 text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
                   >
                     By-pass all limits by{' '}
                     <span className="font-semibold">
diff --git a/src/components/GenerateRoadmap/OpenAISettings.tsx b/src/components/GenerateRoadmap/OpenAISettings.tsx
index 2e361111b..2b30e3f98 100644
--- a/src/components/GenerateRoadmap/OpenAISettings.tsx
+++ b/src/components/GenerateRoadmap/OpenAISettings.tsx
@@ -33,7 +33,7 @@ export function OpenAISettings(props: OpenAISettingsProps) {
 
   return (
     <Modal onClose={onClose}>
-      <div className="overflow-hidden rounded-lg bg-white p-6 shadow-xl">
+      <div className="p-5">
         <h2 className="text-xl font-medium text-gray-800">OpenAI Settings</h2>
         <div className="mt-4">
           <p className="text-gray-700">
diff --git a/src/components/GenerateRoadmap/RoadmapSearch.tsx b/src/components/GenerateRoadmap/RoadmapSearch.tsx
index 70905f825..6e85b43ba 100644
--- a/src/components/GenerateRoadmap/RoadmapSearch.tsx
+++ b/src/components/GenerateRoadmap/RoadmapSearch.tsx
@@ -107,7 +107,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
             )}
           </button>
         </form>
-        <div className="flex flex-row items-center justify-center gap-2">
+        <div className="flex flex-row items-center justify-center gap-2 flex-wrap">
           {randomTerms.map((term) => (
             <button
               key={term}