Improve mobile responsiveness and add home link

- Enlarge falcon icon on mobile home view (120px)
- Fix category dropdown clipping on mobile (remove overflow-hidden)
- Make dropdown options more compact for mobile
- Add clickable home link to title for navigation
- Improve mobile layout for search box, results, and feedback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/css/styles.css

@@ -6,6 +6,11 @@
 /* ============================================
    BASE STYLES
    ============================================ */
+html, body {
+    overflow-x: hidden;
+    max-width: 100vw;
+}
+
 body {
     /* Font stack: Roboto (EN), Noto Sans Arabic (AR), Noto Sans SC (CN) */
     font-family: 'Roboto', 'Noto Sans Arabic', 'Noto Sans SC', sans-serif;
@@ -299,18 +304,50 @@ body.home-view footer {
 }
 
 /* ============================================
-   RESPONSIVE
+   RESPONSIVE - MOBILE
    ============================================ */
 @media (max-width: 768px) {
     .falcon-icon {
-        height: 70px;
+        height: 60px;
     }
 
     .falcon-overlap-container {
-        top: 50px;
+        top: 45px;
     }
 
     body.home-view .falcon-overlap-container {
-        top: calc(50% - 100px);
+        top: calc(50% - 130px);
+    }
+
+    body.home-view .falcon-icon {
+        height: 120px;
+    }
+
+    /* Search box lower on mobile home view */
+    #search-header.home-mode {
+        top: calc(50% + 30px);
+    }
+
+    /* Category dropdown full width on mobile */
+    .category-dropdown-menu {
+        left: 0;
+        right: 0;
+        width: 100%;
+        min-width: 100%;
+        border-radius: 0 0 8px 8px;
+        max-height: 50vh;
+        overflow-y: auto;
+    }
+
+    .category-option {
+        padding: 8px 12px;
+        font-size: 14px;
+    }
+
+    /* Modal full width on mobile */
+    .modal-content {
+        max-width: 95%;
+        max-height: 85vh;
+        margin: 0.5rem;
     }
 }

frontend/index.html

@@ -36,24 +36,25 @@
     <!-- ========================================
          TOP GOLD BAR
          ======================================== -->
-    <div class="gold-fade h-[60px] shadow-md relative z-20 flex items-center">
-        <div class="container mx-auto max-w-5xl px-6 flex justify-between items-center text-emerald-950">
-            <div class="flex items-center gap-3">
-                <span class="text-4xl leading-none mt-2">🇦🇪</span>
-                <h1 class="text-[20px] font-medium tracking-wide">UAE Knowledge System</h1>
-            </div>
-            <div class="flex items-center gap-4">
-                <span id="stats-text" class="text-[16px] opacity-70">Loading...</span>
-                <div class="flex gap-4 items-center">
+    <div class="gold-fade min-h-[50px] md:h-[60px] shadow-md relative z-20 flex items-center py-2 md:py-0">
+        <div class="container mx-auto max-w-5xl px-3 md:px-6 flex justify-between items-center text-emerald-950">
+            <a href="#" onclick="goHome(); return false;" class="flex items-center gap-2 md:gap-3 hover:opacity-80 transition cursor-pointer">
+                <span class="text-2xl md:text-4xl leading-none mt-1 md:mt-2">🇦🇪</span>
+                <h1 class="text-[14px] md:text-[20px] font-medium tracking-wide">UAE Knowledge System</h1>
+            </a>
+            <div class="flex items-center gap-2 md:gap-4">
+                <!-- Stats hidden on mobile -->
+                <span id="stats-text" class="hidden md:inline text-[16px] opacity-70">Loading...</span>
+                <div class="flex gap-2 md:gap-4 items-center">
                     <!-- Language Toggle -->
-                    <div class="flex gap-1 text-[16px] font-medium">
-                        <button onclick="setLanguage('en')" id="lang-en" class="lang-toggle px-2 py-1 rounded hover:bg-white/20 transition">EN</button>
+                    <div class="flex gap-0.5 md:gap-1 text-[12px] md:text-[16px] font-medium">
+                        <button onclick="setLanguage('en')" id="lang-en" class="lang-toggle px-1.5 md:px-2 py-1 rounded hover:bg-white/20 transition">EN</button>
                         <span class="opacity-40">|</span>
-                        <button onclick="setLanguage('ar')" id="lang-ar" class="lang-toggle px-2 py-1 rounded hover:bg-white/20 transition">AR</button>
+                        <button onclick="setLanguage('ar')" id="lang-ar" class="lang-toggle px-1.5 md:px-2 py-1 rounded hover:bg-white/20 transition">AR</button>
                         <span class="opacity-40">|</span>
-                        <button onclick="setLanguage('cn')" id="lang-cn" class="lang-toggle px-2 py-1 rounded hover:bg-white/20 transition">CN</button>
+                        <button onclick="setLanguage('cn')" id="lang-cn" class="lang-toggle px-1.5 md:px-2 py-1 rounded hover:bg-white/20 transition">CN</button>
                     </div>
-                    <button id="help-btn" class="text-[16px] font-medium uppercase hover:text-white transition">Help</button>
+                    <button id="help-btn" class="text-[12px] md:text-[16px] font-medium uppercase hover:text-white transition">Help</button>
                 </div>
             </div>
         </div>
@@ -70,18 +71,19 @@
          HEADER WITH SEARCH (centered on home, top after search)
          ======================================== -->
     <header id="search-header" class="home-mode relative z-10">
-        <div class="container mx-auto max-w-5xl px-6 text-center">
-            <div class="flex shadow-xl rounded-2xl h-12 bg-white relative z-10 border border-gray-200">
+        <div class="container mx-auto max-w-5xl px-3 md:px-6 text-center">
+            <!-- Mobile: vertical stack, Desktop: horizontal -->
+            <div class="flex flex-col md:flex-row shadow-xl rounded-xl md:rounded-2xl bg-white relative z-10 border border-gray-200">
                 <!-- Search Input -->
-                <div class="flex-grow flex items-center px-6">
+                <div class="flex-grow flex items-center px-4 md:px-6 border-b md:border-b-0 md:border-r border-gray-100">
                     <input type="text" id="search-input"
-                           class="w-full text-emerald-950 outline-none text-[18px]"
-                           placeholder="Ask about UAE governance, leadership, or policies...">
+                           class="w-full text-emerald-950 outline-none text-[16px] md:text-[18px] py-3 md:py-0"
+                           placeholder="Ask about UAE...">
                 </div>
 
                 <!-- Category Dropdown -->
                 <div class="category-dropdown relative">
-                    <button id="category-btn" class="bg-gray-50 flex items-center px-4 h-full text-emerald-800 text-[18px] font-normal ltr:border-l rtl:border-r hover:bg-gray-100 transition">
+                    <button id="category-btn" class="w-full md:w-auto bg-gray-50 flex items-center justify-between md:justify-start px-4 py-3 md:py-0 md:h-12 text-emerald-800 text-[14px] md:text-[18px] font-normal hover:bg-gray-100 transition border-b md:border-b-0 border-gray-100">
                         <span id="category-text">Select Category</span>
                         <span class="ml-2 opacity-40">▼</span>
                     </button>
@@ -98,14 +100,15 @@
                 </div>
 
                 <!-- Search Button -->
-                <button id="search-btn" class="gold-fade hover:brightness-110 px-8 text-emerald-950 ltr:rounded-r-2xl rtl:rounded-l-2xl flex items-center justify-center transition">
+                <button id="search-btn" class="gold-fade hover:brightness-110 px-8 py-3 md:py-0 text-emerald-950 md:rounded-r-2xl flex items-center justify-center transition">
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                     </svg>
+                    <span class="ml-2 md:hidden font-medium">Search</span>
                 </button>
             </div>
-            <p id="first-query-note" class="text-[14px] text-[#003d1c] mt-3 text-center">
-                Note: First query may take a few seconds to load the index. Subsequent queries will be fast.
+            <p id="first-query-note" class="text-[12px] md:text-[14px] text-[#003d1c] mt-3 text-center px-2">
+                Note: First query may take a few seconds to load the index.
             </p>
         </div>
     </header>
@@ -113,30 +116,30 @@
     <!-- ========================================
          MAIN CONTENT (hidden until search)
          ======================================== -->
-    <main id="results-section" class="container mx-auto max-w-5xl py-10 px-6 hidden">
+    <main id="results-section" class="container mx-auto max-w-5xl py-6 md:py-10 px-3 md:px-6 hidden">
         <!-- Results Header -->
-        <div class="flex justify-between items-end border-b border-gray-200 pb-2 mb-8">
-            <h2 class="text-emerald-900 font-medium text-[18px] tracking-widest flex items-center gap-3">
-                <span class="text-xl">🦅</span> RETRIEVAL RESULTS
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-2 border-b border-gray-200 pb-2 mb-6 md:mb-8">
+            <h2 class="text-emerald-900 font-medium text-[14px] md:text-[18px] tracking-widest flex items-center gap-2 md:gap-3">
+                <span class="text-lg md:text-xl">🦅</span> RETRIEVAL RESULTS
             </h2>
-            <span id="results-count" class="text-emerald-700 font-medium text-[16px]">0 ITEMS FOUND</span>
+            <span id="results-count" class="text-emerald-700 font-medium text-[12px] md:text-[16px]">0 ITEMS FOUND</span>
         </div>
 
         <!-- Results Container -->
         <div id="results-container"></div>
 
         <!-- Feedback Section -->
-        <div class="bg-[#F3EDE2]/50 rounded-lg border border-amber-600/10 px-8 py-5 mt-8 flex flex-col md:flex-row gap-6 items-center">
-            <div id="feedback-label" class="flex items-center gap-3 text-emerald-900 text-[20px] font-medium uppercase tracking-wider">
+        <div class="bg-[#F3EDE2]/50 rounded-lg border border-amber-600/10 px-4 md:px-8 py-4 md:py-5 mt-6 md:mt-8 flex flex-col gap-4 md:gap-6">
+            <div id="feedback-label" class="flex items-center gap-2 md:gap-3 text-emerald-900 text-[16px] md:text-[20px] font-medium uppercase tracking-wider">
                 <span>💬</span> FEEDBACK
             </div>
-            <div class="flex-grow w-full">
+            <div class="w-full">
                 <input type="text" id="feedback-input"
-                       class="w-full bg-white border border-gray-200 rounded px-5 py-2 text-sm text-emerald-950 shadow-inner outline-none focus:border-amber-500"
-                       placeholder="Any comments about the results? (optional)">
+                       class="w-full bg-white border border-gray-200 rounded px-4 md:px-5 py-3 md:py-2 text-[16px] md:text-sm text-emerald-950 shadow-inner outline-none focus:border-amber-500"
+                       placeholder="Any comments? (optional)">
             </div>
-            <button id="submit-feedback-btn" class="bg-emerald-900 text-white text-[20px] px-8 py-2 font-medium rounded hover:bg-emerald-800 shadow-xl transition">
-                Submit
+            <button id="submit-feedback-btn" class="w-full md:w-auto bg-emerald-900 text-white text-[16px] md:text-[20px] px-8 py-3 md:py-2 font-medium rounded hover:bg-emerald-800 shadow-xl transition">
+                Submit Feedback
             </button>
         </div>
     </main>

frontend/js/app.js

@@ -556,32 +556,32 @@ function renderResults() {
         const content = getResultContent(result, index);
 
         return `
-        <div class="bg-white rounded overflow-hidden shadow-xl border border-gray-200 result-card mb-6" data-index="${index}">
+        <div class="bg-white rounded shadow-xl border border-gray-200 result-card mb-4 md:mb-6 overflow-x-hidden" data-index="${index}">
             <!-- Card Header -->
-            <div class="px-6 py-3 flex justify-between items-center text-white border-b-4 border-amber-500 bg-[#003d1c]">
-                <div class="text-[18px] font-medium flex items-center gap-4">
+            <div class="px-4 md:px-6 py-2 md:py-3 flex flex-col sm:flex-row justify-between sm:items-center gap-2 text-white border-b-4 border-amber-500 bg-[#003d1c]">
+                <div class="text-[14px] md:text-[18px] font-medium flex items-center gap-2 md:gap-4">
                     <span class="text-amber-400">${index === 0 ? '🦅' : '📄'}</span>
                     #${index + 1} ${escapeHtml(content.entityName)}
                 </div>
-                <div class="text-[16px] font-medium gold-button-slender text-emerald-950 px-4 rounded shadow-sm">
+                <div class="text-[12px] md:text-[16px] font-medium gold-button-slender text-emerald-950 px-3 md:px-4 rounded shadow-sm self-start sm:self-auto">
                     ${t('rankScore')}: ${result.score.toFixed(2)} ▲
                 </div>
             </div>
 
             <!-- Card Body -->
-            <div class="p-8">
-                <div class="flex flex-col md:flex-row gap-12">
+            <div class="p-4 md:p-8">
+                <div class="flex flex-col md:flex-row gap-6 md:gap-12">
                     <!-- Summary -->
-                    <div class="flex-1 summary-box p-6">
-                        <p class="text-[18px] leading-7 text-emerald-900">
+                    <div class="flex-1 summary-box p-4 md:p-6">
+                        <p class="text-[14px] md:text-[18px] leading-6 md:leading-7 text-emerald-900">
                             ${escapeHtml(content.summary || t('noResults'))}
                         </p>
                     </div>
 
                     <!-- Must-Know Facts -->
                     <div class="w-full md:w-[38%] pt-1">
-                        <h4 class="text-emerald-800 font-medium text-[18px] mb-4">${t('mustKnowFacts')}</h4>
-                        <ul class="text-[18px] space-y-3 text-emerald-800/80">
+                        <h4 class="text-emerald-800 font-medium text-[14px] md:text-[18px] mb-3 md:mb-4">${t('mustKnowFacts')}</h4>
+                        <ul class="text-[14px] md:text-[18px] space-y-2 md:space-y-3 text-emerald-800/80">
                             ${content.facts.slice(0, 5).map(fact => `
                                 <li>• ${escapeHtml(fact)}</li>
                             `).join('')}
@@ -590,12 +590,12 @@ function renderResults() {
                 </div>
 
                 <!-- Rating Row -->
-                <div class="mt-8 border-t border-gray-50 pt-6 flex justify-between items-center">
-                    <div class="flex items-center gap-12">
+                <div class="mt-6 md:mt-8 border-t border-gray-50 pt-4 md:pt-6 flex flex-col gap-4">
+                    <div class="flex flex-wrap items-center gap-4 md:gap-12">
                         <!-- Relevance Rating -->
-                        <div class="flex items-center gap-3">
-                            <span class="text-[16px] font-medium text-gray-400 tracking-wider">${t('relevance')}</span>
-                            <div class="flex gap-2 text-xl">
+                        <div class="flex items-center gap-2 md:gap-3">
+                            <span class="text-[12px] md:text-[16px] font-medium text-gray-400 tracking-wider">${t('relevance')}</span>
+                            <div class="flex gap-2 text-lg md:text-xl">
                                 <button class="rating-btn ${state.ratings[index]?.relevance === 0 ? 'active' : ''}"
                                         onclick="setRating(${index}, 'relevance', 0)">😐</button>
                                 <button class="rating-btn ${state.ratings[index]?.relevance === 1 ? 'active' : ''}"
@@ -604,9 +604,9 @@ function renderResults() {
                         </div>
 
                         <!-- Helpful Rating -->
-                        <div class="flex items-center gap-3">
-                            <span class="text-[16px] font-medium text-gray-400 tracking-wider">${t('helpful')}</span>
-                            <div class="flex gap-2 text-lg">
+                        <div class="flex items-center gap-2 md:gap-3">
+                            <span class="text-[12px] md:text-[16px] font-medium text-gray-400 tracking-wider">${t('helpful')}</span>
+                            <div class="flex gap-2 text-base md:text-lg">
                                 <button class="rating-btn ${state.ratings[index]?.helpful === true ? 'active' : ''}"
                                         onclick="setRating(${index}, 'helpful', true)">👍</button>
                                 <button class="rating-btn ${state.ratings[index]?.helpful === false ? 'active' : ''}"
@@ -616,16 +616,16 @@ function renderResults() {
                     </div>
 
                     <!-- Detailed Analysis Button -->
-                    <button class="gold-button-slender text-emerald-950 text-[16px] px-6 font-medium rounded shadow-md"
+                    <button class="gold-button-slender text-emerald-950 text-[14px] md:text-[16px] px-4 md:px-6 py-2 font-medium rounded shadow-md w-full"
                             onclick="toggleDetails(${index})">
                         ${t('viewEntity')}
                     </button>
                 </div>
 
                 <!-- Detailed Analysis Panel (hidden by default) -->
-                <div id="details-${index}" class="hidden mt-6 pt-6 border-t border-gray-100">
-                    <h4 class="text-emerald-800 font-medium text-[16px] mb-4">${t('entityData')}</h4>
-                    <pre class="bg-gray-50 p-4 rounded text-[18px] overflow-x-auto text-gray-700 border border-gray-200 max-h-[500px] overflow-y-auto">${escapeHtml(JSON.stringify(result.full_entity || result, null, 2))}</pre>
+                <div id="details-${index}" class="hidden mt-4 md:mt-6 pt-4 md:pt-6 border-t border-gray-100">
+                    <h4 class="text-emerald-800 font-medium text-[14px] md:text-[16px] mb-3 md:mb-4">${t('entityData')}</h4>
+                    <pre class="bg-gray-50 p-3 md:p-4 rounded text-[12px] md:text-[14px] overflow-x-auto text-gray-700 border border-gray-200 max-h-[300px] md:max-h-[500px] overflow-y-auto">${escapeHtml(JSON.stringify(result.full_entity || result, null, 2))}</pre>
                 </div>
             </div>
         </div>
@@ -1028,6 +1028,24 @@ document.addEventListener('DOMContentLoaded', () => {
     setTimeout(() => updateLanguage(), 100);
 });
 
+// Go to home page
+window.goHome = function() {
+    // Reset state
+    state.currentQuery = '';
+    state.currentCategory = null;
+    state.results = [];
+    state.ratings = {};
+    state.translatedResults = {};
+    state.showOriginal = false;
+
+    // Clear inputs
+    if (DOM.searchInput) DOM.searchInput.value = '';
+    if (DOM.categoryText) DOM.categoryText.textContent = t('selectCategory');
+
+    // Switch to home mode
+    switchToHomeMode();
+};
+
 // Export for global access
 window.selectCategory = selectCategory;
 window.translateResults = translateResults;