Refactor: Mobile UI optimizations, scrollbar fix, and glossary improvements

- Fixed mobile scrollbar gap by adjusting global overflow and layout padding
- Optimized article typography for mobile readability
- Removed redundant 'Back' navigation links from article details
- Fixed glossary React key errors and removed chapter labels
- Added clear button to glossary search
- Fixed 'Ask a Question' toggle issue on mobile

Author: pavanpaik

web/src/app/ask/page.tsx

@@ -18,13 +18,13 @@ export default function AskPage() {
     const [isSubmitting, setIsSubmitting] = useState(false);
 
     useEffect(() => {
-        // Auto-collapse new question form on mobile if there are active tickets
+        // Auto-collapse new question form on mobile if there are active tickets (only on initial load)
         const hasActiveTickets = tickets.some(t => t.status === 'Open' || t.status === 'Answered');
-        if (window.innerWidth < 768 && hasActiveTickets && isNewQuestionExpanded) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
+        if (window.innerWidth < 768 && hasActiveTickets) {
             setIsNewQuestionExpanded(false);
         }
-    }, [tickets, isNewQuestionExpanded]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Only run on mount
 
     const toggleExpand = (id: string) => {
         setExpandedTicketId(expandedTicketId === id ? null : id);
@@ -86,7 +86,7 @@ export default function AskPage() {
     );
 
     return (
-        <div className="max-w-4xl mx-auto space-y-6 pt-6">
+        <div className="max-w-4xl mx-auto space-y-6 pt-6 px-4">
             {/* Header */}
             <div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
                 <div className="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-blue-600 flex-none">

web/src/app/bodhakatha/[articleId]/page.tsx

@@ -9,8 +9,7 @@ export async function generateStaticParams() {
     }));
 }
 
-import Link from 'next/link';
-import { ArrowLeft } from 'lucide-react';
+
 
 export default async function BodhakathaDetailPage({ params }: { params: Promise<{ articleId: string }> }) {
     const { articleId } = await params;
@@ -36,21 +35,16 @@ export default async function BodhakathaDetailPage({ params }: { params: Promise
         <div className="flex flex-col lg:flex-row gap-8 h-[calc(100vh-8rem)] pt-6">
             {/* Left: Text Content (Prominent) - First on mobile and desktop */}
             <div className="w-full lg:w-2/3 flex-1 overflow-y-auto pr-4 custom-scrollbar">
-                <div className="mb-4">
-                    <Link href="/bodhakatha" className="inline-flex items-center transition-colors px-4 py-2 bg-white border border-gray-200 rounded-full text-gray-700 font-medium shadow-sm hover:bg-gray-50 lg:bg-transparent lg:border-0 lg:shadow-none lg:p-0 lg:text-gray-500 lg:hover:text-ochre lg:hover:bg-transparent text-sm">
-                        <ArrowLeft className="w-4 h-4 mr-2 lg:mr-1" />
-                        Back to Bodhakathas
-                    </Link>
-                </div>
+
                 <article className="prose prose-ochre max-w-none bg-white p-8 rounded-xl shadow-sm border border-gray-100">
                     <div className="mb-6 border-b border-gray-100 pb-4">
                         <div className="flex items-center space-x-2 mb-2">
                             <span className="text-xs font-bold text-white bg-ochre px-2 py-1 rounded">
                                 {article.theme}
                             </span>
                         </div>
-                        <h1 className="text-3xl font-bold text-gray-800 mb-2">{article.title_english}</h1>
-                        <h2 className="text-2xl text-ochre font-serif">{article.title_hindi}</h2>
+                        <h1 className="text-xl md:text-3xl font-bold text-gray-800 mb-2">{article.title_english}</h1>
+                        <h2 className="text-lg md:text-2xl text-ochre font-serif">{article.title_hindi}</h2>
                     </div>
 
                     <h3 className="text-lg font-bold text-gray-500 mb-4">Core Teaching</h3>

web/src/app/bodhakatha/page.tsx

@@ -4,7 +4,7 @@ import { Lightbulb } from 'lucide-react';
 
 export default function BodhakathaPage() {
     return (
-        <div className="max-w-4xl mx-auto space-y-6 pt-6">
+        <div className="max-w-4xl mx-auto space-y-6 pt-6 px-4">
             <div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
                 <div className="w-12 h-12 bg-ochre/10 rounded-full flex items-center justify-center text-ochre flex-none">
                     <Lightbulb className="w-6 h-6" />
@@ -26,10 +26,10 @@ export default function BodhakathaPage() {
                             <span className="text-xs font-bold text-white bg-ochre px-3 py-1 rounded-full self-start">
                                 {article.theme}
                             </span>
-                            <h2 className="text-xl font-bold text-gray-800 group-hover:text-ochre transition-colors mt-2">
+                            <h2 className="text-lg md:text-xl font-bold text-gray-800 group-hover:text-ochre transition-colors mt-2">
                                 {article.title_english}
                             </h2>
-                            <h3 className="text-lg text-gray-400 font-serif">
+                            <h3 className="text-base md:text-lg text-gray-400 font-serif">
                                 {article.title_hindi}
                             </h3>
 

web/src/app/globals.css

@@ -19,10 +19,18 @@
   --font-mono: var(--font-geist-mono);
 }
 
+html {
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-sans), Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
 }
 
 @layer utilities {

web/src/app/glossary/page.tsx

@@ -38,7 +38,7 @@ export default function GlossaryPage() {
     }, [searchQuery, sortOrder, language]);
 
     return (
-        <div className="max-w-4xl mx-auto space-y-8 pt-6">
+        <div className="max-w-4xl mx-auto space-y-8 pt-6 px-4">
             <div className="flex flex-col md:flex-row justify-between items-center gap-4">
                 <h1 className="text-3xl font-bold text-ochre">Glossary</h1>
 
@@ -60,16 +60,14 @@ export default function GlossaryPage() {
 
             <div className="grid gap-4">
                 {filteredData.length > 0 ? (
-                    filteredData.map((item) => (
+                    filteredData.map((item, index) => (
                         <div
-                            key={item.term}
+                            key={`${item.term}-${item.chapter}-${index}`}
                             className="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:border-gold transition-colors"
                         >
                             <div className="flex justify-between items-start">
                                 <h2 className="text-xl font-bold text-ochre mb-2">{item.term}</h2>
-                                <span className="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded">
-                                    {item.chapter}
-                                </span>
+
                             </div>
                             <p className="text-gray-700 font-serif text-lg leading-relaxed">
                                 {getDefinition(item)}

web/src/app/icon.png

@@ -9,8 +9,7 @@ export async function generateStaticParams() {
     }));
 }
 
-import Link from 'next/link';
-import { ArrowLeft } from 'lucide-react';
+
 
 export default async function LeelaDetailPage({ params }: { params: Promise<{ articleId: string }> }) {
     const { articleId } = await params;
@@ -36,16 +35,11 @@ export default async function LeelaDetailPage({ params }: { params: Promise<{ ar
         <div className="flex flex-col lg:flex-row gap-8 h-[calc(100vh-8rem)] pt-6">
             {/* Left: Text Content (Prominent) - First on mobile and desktop */}
             <div className="w-full lg:w-2/3 flex-1 overflow-y-auto pr-4 custom-scrollbar">
-                <div className="mb-4">
-                    <Link href="/leela" className="inline-flex items-center transition-colors px-4 py-2 bg-white border border-gray-200 rounded-full text-gray-700 font-medium shadow-sm hover:bg-gray-50 lg:bg-transparent lg:border-0 lg:shadow-none lg:p-0 lg:text-gray-500 lg:hover:text-ochre lg:hover:bg-transparent text-sm">
-                        <ArrowLeft className="w-4 h-4 mr-2 lg:mr-1" />
-                        Back to Leelas
-                    </Link>
-                </div>
+
                 <article className="prose prose-ochre max-w-none bg-white p-8 rounded-xl shadow-sm border border-gray-100">
                     <div className="mb-6 border-b border-gray-100 pb-4">
-                        <h1 className="text-3xl font-bold text-gray-800 mb-2">{article.title_english}</h1>
-                        <h2 className="text-2xl text-ochre font-serif">{article.title_hindi}</h2>
+                        <h1 className="text-xl md:text-3xl font-bold text-gray-800 mb-2">{article.title_english}</h1>
+                        <h2 className="text-lg md:text-2xl text-ochre font-serif">{article.title_hindi}</h2>
                     </div>
 
                     <h3 className="text-lg font-bold text-gray-500 mb-4">{article.chapter} Narrative</h3>

web/src/app/leela/[articleId]/page.tsx

@@ -4,7 +4,7 @@ import { Footprints } from 'lucide-react';
 
 export default function LeelaPage() {
     return (
-        <div className="max-w-4xl mx-auto space-y-6 pt-6">
+        <div className="max-w-4xl mx-auto space-y-6 pt-6 px-4">
             <div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
                 <div className="w-12 h-12 bg-ochre/10 rounded-full flex items-center justify-center text-ochre flex-none">
                     <Footprints className="w-6 h-6" />
@@ -27,10 +27,10 @@ export default function LeelaPage() {
                                 <span className="text-xs font-bold text-gray-400 uppercase tracking-widest bg-gray-50 px-2 py-1 rounded inline-block">
                                     {article.chapter}
                                 </span>
-                                <h2 className="text-xl font-bold text-gray-800 group-hover:text-ochre transition-colors">
+                                <h2 className="text-lg md:text-xl font-bold text-gray-800 group-hover:text-ochre transition-colors">
                                     {article.title_english}
                                 </h2>
-                                <h3 className="text-lg text-gray-400 font-serif">
+                                <h3 className="text-base md:text-lg text-gray-400 font-serif">
                                     {article.title_hindi}
                                 </h3>
                                 <p className="text-gray-600 text-sm line-clamp-2">

web/src/app/leela/page.tsx

@@ -29,7 +29,7 @@ export default function LivePage() {
     }, [isPlaying, closePlayer, router]);
 
     return (
-        <div className="max-w-6xl mx-auto space-y-6 pt-6">
+        <div className="max-w-6xl mx-auto space-y-6 pt-6 px-4">
 
             {/* Header */}
             <div className="flex items-center space-x-4 pb-2 border-b border-gray-100">

web/src/app/live/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Search } from 'lucide-react';
+import { Search, X } from 'lucide-react';
 
 interface SearchBarProps {
     value: string;
@@ -16,9 +16,18 @@ export default function SearchBar({ value, onChange, placeholder = 'Search...' }
                 value={value}
                 onChange={(e) => onChange(e.target.value)}
                 placeholder={placeholder}
-                className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-ochre focus:border-transparent transition-all"
+                className="w-full pl-10 pr-10 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-ochre focus:border-transparent transition-all"
             />
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+            {value && (
+                <button
+                    onClick={() => onChange('')}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                    aria-label="Clear search"
+                >
+                    <X className="w-4 h-4" />
+                </button>
+            )}
         </div>
     );
 }