From 31acbf2fa29be3e6a8bd90c2cfbcb31a638f20a6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 11 Mar 2025 13:12:16 +0000
Subject: [PATCH] Add responsiveness

---
 src/components/GenerateCourse/UserCoursesList.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/GenerateCourse/UserCoursesList.tsx b/src/components/GenerateCourse/UserCoursesList.tsx
index d7a58620d..e6e10a50d 100644
--- a/src/components/GenerateCourse/UserCoursesList.tsx
+++ b/src/components/GenerateCourse/UserCoursesList.tsx
@@ -71,7 +71,9 @@ export function UserCoursesList(props: UserCoursesListProps) {
       )}
       <div className="mb-3 flex min-h-[35px] items-center justify-between max-sm:mb-1">
         <div className="flex items-center gap-2">
-          <h2 className="text-lg font-semibold">Your Courses</h2>
+          <h2 className="text-lg font-semibold">
+            <span className='max-md:hidden'>Your </span>Courses
+          </h2>
         </div>
 
         <div className="flex items-center gap-2">
@@ -84,7 +86,12 @@ export function UserCoursesList(props: UserCoursesListProps) {
             )}
           >
             <p className="flex items-center text-sm text-yellow-600">
-              {limitUsedPercentage}% of daily limit used{' '}
+              <span className="max-md:hidden">
+                {limitUsedPercentage}% of daily limit used{' '}
+              </span>
+              <span className="inline md:hidden">
+                {limitUsedPercentage}% used
+              </span>
               <button
                 onClick={() => {
                   setShowUpgradePopup(true);
@@ -97,9 +104,7 @@ export function UserCoursesList(props: UserCoursesListProps) {
             </p>
           </div>
 
-          <div className={cn('relative w-64 max-sm:hidden', {
-            
-          })}>
+          <div className={cn('relative w-64 max-sm:hidden', {})}>
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
               <Search className="h-4 w-4 text-gray-400" />
             </div>