From 15f4a7552386518f1918b66c23e9d91a9870fff9 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 19 Jun 2025 01:36:27 +0100
Subject: [PATCH] Library guides listing UI

---
 src/components/AIGuide/AIGuideCard.tsx   | 10 +++++-----
 src/components/AITutor/AITutorHeader.tsx | 10 +---------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/AIGuide/AIGuideCard.tsx b/src/components/AIGuide/AIGuideCard.tsx
index 6bb76436d..c5f96c1d8 100644
--- a/src/components/AIGuide/AIGuideCard.tsx
+++ b/src/components/AIGuide/AIGuideCard.tsx
@@ -22,9 +22,9 @@ export function AIGuideCard(props: AIGuideCardProps) {
     <div className="relative flex flex-grow flex-col">
       <a
         href={`/ai/guide/${guide.slug}`}
-        className="group relative flex h-full min-h-[140px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left hover:border-gray-300 hover:bg-gray-50"
+        className="group relative flex h-full min-h-[120px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-3 text-left hover:border-gray-300 hover:bg-gray-50 sm:p-4"
       >
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-2 flex items-center justify-between sm:mb-3">
           <span
             className={`rounded-full text-xs font-medium capitalize opacity-80 ${guideDepthColor}`}
           >
@@ -32,13 +32,13 @@ export function AIGuideCard(props: AIGuideCardProps) {
           </span>
         </div>
 
-        <div className="relative max-h-[290px] min-h-[290px] overflow-y-hidden">
+        <div className="relative max-h-[180px] min-h-[140px] overflow-y-hidden sm:max-h-[200px] sm:min-h-[160px]">
           <div
-            className="prose prose-sm prose-pre:bg-gray-100 [&_h1]:hidden [&_h1:first-child]:block [&_h1:first-child]:text-lg [&_h1:first-child]:font-bold [&_h1:first-child]:text-pretty [&_h2]:hidden [&_h3]:hidden [&_h4]:hidden [&_h5]:hidden [&_h6]:hidden"
+            className="prose prose-sm prose-pre:bg-gray-100 [&_h1]:hidden [&_h1:first-child]:block [&_h1:first-child]:text-base [&_h1:first-child]:font-bold [&_h1:first-child]:leading-[1.35] [&_h1:first-child]:text-pretty sm:[&_h1:first-child]:text-lg [&_h2]:hidden [&_h3]:hidden [&_h4]:hidden [&_h5]:hidden [&_h6]:hidden"
             dangerouslySetInnerHTML={{ __html: guide.html }}
           />
 
-          <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-white to-transparent group-hover:from-gray-50" />
+          <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white to-transparent group-hover:from-gray-50 sm:h-16" />
         </div>
       </a>
 
diff --git a/src/components/AITutor/AITutorHeader.tsx b/src/components/AITutor/AITutorHeader.tsx
index aaac924f4..217777409 100644
--- a/src/components/AITutor/AITutorHeader.tsx
+++ b/src/components/AITutor/AITutorHeader.tsx
@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { AITutorLimits } from './AITutorLimits';
 import { getAiCourseLimitOptions } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
 import { useIsPaidUser } from '../../queries/billing';
@@ -30,16 +29,9 @@ export function AITutorHeader(props: AITutorHeaderProps) {
           {subtitle && <p className="mb-4 text-sm text-gray-500">{subtitle}</p>}
         </div>
         <div className="flex flex-row items-center gap-2">
-          <AITutorLimits
-            used={used}
-            limit={limit}
-            isPaidUser={isPaidUser}
-            isPaidUserLoading={isPaidUserLoading}
-            onUpgradeClick={onUpgradeClick}
-          />
           <a
             href="/ai"
-            className="flex flex-row items-center gap-2 rounded-lg bg-black px-4 py-2 text-sm font-medium text-white"
+            className="flex flex-row items-center gap-2 rounded-lg bg-black px-4 py-1.5 text-sm font-medium text-white"
           >
             <PlusIcon className="h-4 w-4" />
             New