Fix mobile layout - shift input up, ensure send button and model selector visible

app.py

@@ -623,11 +623,12 @@ label {
     cursor: text !important;
 }
 
-/* Bottom row with preprompts, model selector and send */
-.input-actions-row {
+/* Preprompt icons row */
+.preprompt-icons-row {
     display: flex !important;
     align-items: center !important;
     justify-content: flex-start !important;
+    flex-wrap: wrap !important;
     gap: 4px !important;
     padding: 0 !important;
     margin: 0 !important;
@@ -635,6 +636,23 @@ label {
     border: none !important;
 }
 
+.preprompt-icons-row > * {
+    background: transparent !important;
+}
+
+/* Bottom row with model selector and send */
+.input-actions-row {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: 8px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    flex-wrap: nowrap !important;
+}
+
 .input-actions-row > * {
     background: transparent !important;
 }
@@ -1586,35 +1604,51 @@ textarea::placeholder {
         display: inline !important;
     }
     
-    /* Gemini input - mobile */
+    /* Gemini input - mobile - shifted UP to ensure send button visible */
     .input-container-gemini {
-        padding: 12px 12px 16px 12px !important;
+        padding: 10px 12px 20px 12px !important;
+        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
         position: sticky !important;
         bottom: 0 !important;
         z-index: 100 !important;
+        margin-bottom: 0 !important;
     }
     
     .input-box-gemini {
-        padding: 10px 12px !important;
-        border-radius: 20px !important;
+        padding: 8px 10px !important;
+        border-radius: 18px !important;
         max-width: 100% !important;
+        width: calc(100% - 8px) !important;
+        margin: 0 auto !important;
     }
     
     .input-textarea-gemini textarea {
         font-size: 16px !important;
         -webkit-appearance: none !important;
+        min-height: 24px !important;
+        max-height: 80px !important;
     }
     
-    .input-actions-row {
+    /* Preprompt icons row - mobile */
+    .preprompt-icons-row {
         gap: 2px !important;
         flex-wrap: wrap !important;
-        justify-content: space-between !important;
+        justify-content: center !important;
     }
     
     /* Preprompt icons - mobile */
     .preprompt-icon {
         padding: 3px 6px !important;
         font-size: 14px !important;
+        min-width: 28px !important;
+    }
+    
+    /* Model selector + send button row - ALWAYS visible */
+    .input-actions-row {
+        gap: 8px !important;
+        flex-wrap: nowrap !important;
+        justify-content: flex-end !important;
+        margin-top: 4px !important;
     }
     
     .action-spacer {
@@ -1624,24 +1658,30 @@ textarea::placeholder {
     /* Model selector on mobile - ensure visible */
     .model-selector-simple {
         flex-shrink: 0 !important;
-        min-width: 100px !important;
-        max-width: 140px !important;
+        min-width: 90px !important;
+        max-width: 120px !important;
     }
     
     .model-selector-simple [data-testid="dropdown"] {
         padding: 6px 10px !important;
-        font-size: 12px !important;
-        min-width: 100px !important;
+        font-size: 11px !important;
+        min-width: 90px !important;
     }
     
     #send-button,
     .send-button-inline {
-        width: 32px !important;
-        height: 32px !important;
-        min-width: 32px !important;
-        border-radius: 10px !important;
-        font-size: 14px !important;
+        width: 34px !important;
+        height: 34px !important;
+        min-width: 34px !important;
+        border-radius: 50% !important;
+        font-size: 16px !important;
         flex-shrink: 0 !important;
+        margin-left: 4px !important;
+    }
+    
+    /* Hide spacer on mobile */
+    .input-actions-row > div[style*="flex: 1"] {
+        display: none !important;
     }
     
     /* Code blocks - mobile scroll */
@@ -1752,23 +1792,32 @@ textarea::placeholder {
         display: inline !important;
     }
     
-    /* Gemini input - small phones */
+    /* Gemini input - small phones - more compact */
     .input-container-gemini {
-        padding: 10px 10px 14px 10px !important;
+        padding: 8px 8px 16px 8px !important;
+        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
     }
     
     .input-box-gemini {
-        padding: 8px 10px !important;
-        border-radius: 18px !important;
+        padding: 6px 8px !important;
+        border-radius: 16px !important;
+        gap: 4px !important;
     }
     
     .input-textarea-gemini textarea {
         font-size: 15px !important;
+        min-height: 22px !important;
+    }
+    
+    /* Smaller preprompt icons on small phones */
+    .preprompt-icons-row {
+        gap: 1px !important;
     }
     
     .preprompt-icon {
-        padding: 2px 5px !important;
-        font-size: 13px !important;
+        padding: 2px 4px !important;
+        font-size: 12px !important;
+        min-width: 24px !important;
     }
     
     .send-button-inline {
@@ -2319,19 +2368,20 @@ with gr.Blocks(
                         </script>
                     """)
                     
-                    # Bottom row: preprompts, model selector, send button
+                    # Row 1: Preprompt icons
+                    with gr.Row(elem_classes=["preprompt-icons-row"]):
+                        news_btn = gr.Button("📰", elem_classes=["preprompt-icon"], elem_id="news-btn", scale=0, min_width=32)
+                        finance_btn = gr.Button("💰", elem_classes=["preprompt-icon"], elem_id="finance-btn", scale=0, min_width=32)
+                        health_btn = gr.Button("🏥", elem_classes=["preprompt-icon"], elem_id="health-btn", scale=0, min_width=32)
+                        math_btn = gr.Button("🔢", elem_classes=["preprompt-icon"], elem_id="math-btn", scale=0, min_width=32)
+                        science_btn = gr.Button("🔬", elem_classes=["preprompt-icon"], elem_id="science-btn", scale=0, min_width=32)
+                        tech_btn = gr.Button("💻", elem_classes=["preprompt-icon"], elem_id="tech-btn", scale=0, min_width=32)
+                        creative_btn = gr.Button("🎨", elem_classes=["preprompt-icon"], elem_id="creative-btn", scale=0, min_width=32)
+                        food_btn = gr.Button("🍳", elem_classes=["preprompt-icon"], elem_id="food-btn", scale=0, min_width=32)
+                    
+                    # Row 2: Model selector + Send button (always visible)
                     with gr.Row(elem_classes=["input-actions-row"]):
-                        # Preprompt icons (left) - More categories
-                        news_btn = gr.Button("📰", elem_classes=["preprompt-icon"], elem_id="news-btn", scale=0, min_width=36)
-                        finance_btn = gr.Button("💰", elem_classes=["preprompt-icon"], elem_id="finance-btn", scale=0, min_width=36)
-                        health_btn = gr.Button("🏥", elem_classes=["preprompt-icon"], elem_id="health-btn", scale=0, min_width=36)
-                        math_btn = gr.Button("🔢", elem_classes=["preprompt-icon"], elem_id="math-btn", scale=0, min_width=36)
-                        science_btn = gr.Button("🔬", elem_classes=["preprompt-icon"], elem_id="science-btn", scale=0, min_width=36)
-                        tech_btn = gr.Button("💻", elem_classes=["preprompt-icon"], elem_id="tech-btn", scale=0, min_width=36)
-                        creative_btn = gr.Button("🎨", elem_classes=["preprompt-icon"], elem_id="creative-btn", scale=0, min_width=36)
-                        food_btn = gr.Button("🍳", elem_classes=["preprompt-icon"], elem_id="food-btn", scale=0, min_width=36)
-                        
-                        # Spacer
+                        # Spacer (pushes model selector and send to right)
                         gr.HTML("<div style='flex: 1'></div>")
                         
                         # Model selector (simple dropdown)
@@ -2345,13 +2395,10 @@ with gr.Blocks(
                             elem_classes=["model-selector-simple"],
                             elem_id="model-selector",
                             scale=0,
-                            min_width=150,
+                            min_width=120,
                             interactive=True
                         )
                         
-                        # Spacer between model and send
-                        gr.HTML("<div style='min-width: 12px'></div>")
-                        
                         # Send button (right)
                         send_btn = gr.Button(
                             "➤",

memory-bank/activeContext.md

@@ -1,14 +1,31 @@
 # Active Context
 
 ## Current Focus
-- Modernize chat UI (Gemini-like layout and spacing).
-- Remove legacy UI elements (e.g., default tab header).
-- Improve scrollbar styling for desktop and mobile.
+- Preprompt popup feature is now fully working
+- UI refinements complete
 
-## Recent Changes
-- Updated CSS in `app.py` to center chat content, refine message bubbles,
-  and style scrollbars.
+## Recent Changes (Jan 2026)
+- **Commit 70dfac7** - Fixed preprompt popup functionality:
+  - Popup now appears when clicking category icons (📰, 💰, 🏥, 🔢, 🔬, 💻, 🎨, 🍳)
+  - Shows multiple prompt options to choose from
+  - Closes properly after selecting a prompt
+  - No more gray empty boxes appearing
+
+- **Key fixes applied:**
+  1. Changed popup from `position: absolute` to `position: fixed` (avoids chatbot blocking clicks)
+  2. Correct indentation level - popup outside `input-box-gemini` Group
+  3. Clear choices on selection (`choices=[]`) to force Gradio to hide popup
+  4. JavaScript `hideEmptyPopups()` function to hide popups with no content
+  5. JavaScript auto-close on radio label click with multiple timed attempts
+
+- **Working commit reference:** `0321f68` was the original working version that was used as reference
+
+## Previous Fixes
+- Python 3.12 pinned in README.md for spacy wheel compatibility
+- Input box layout fixed (centered, proper width)
+- Mobile responsiveness for send button and model selector
+- Chatbot label hidden via JavaScript
 
 ## Next Steps
-- Visually verify the new UI on desktop and mobile.
-- Tune padding/widths if any elements feel cramped.
+- Monitor for any additional UI issues
+- Consider adding more preprompt categories if needed

memory-bank/progress.md

@@ -1,13 +1,27 @@
 # Progress
 
 ## What Works
-- Core chat flow and agent routing.
-- Sidebar branding and Gemini-style input row.
-- Custom CSS pipeline in `app.py`.
+- Core chat flow and agent routing
+- Sidebar branding and Gemini-style input row
+- Custom CSS pipeline in `app.py`
+- **Preprompt popup feature** - Click category icons to see prompt suggestions, select to fill input
+- Mobile responsive layout (send button, model selector visible)
+- Python 3.12 deployment on HF Spaces (spacy wheel compatibility)
+- Chatbot label hidden
 
-## In Progress
-- UI refinements for modern desktop/mobile experience.
+## Completed (Jan 2026)
+- Fixed preprompt popup not appearing (position: fixed, correct DOM placement)
+- Fixed popup not closing after selection (clear choices + JavaScript hide)
+- Fixed gray empty popup boxes appearing
+- Fixed input box layout (centered, proper width)
+- Fixed mobile responsiveness
+- Pinned Python 3.12 in README.md metadata
+
+## Key Commits
+- **70dfac7** - Fix popup close - clear choices on selection to force hide
+- **0321f68** - Original working version (used as reference for popup logic)
 
 ## Remaining
-- Validate scroll behavior and remove any lingering default UI elements.
-- Gather user feedback on spacing and bubble styling.
+- Validate scroll behavior and remove any lingering default UI elements
+- Gather user feedback on spacing and bubble styling
+- Consider additional preprompt categories

memory-bank/systemPatterns.md

@@ -1,12 +1,33 @@
 # System Patterns
 
 ## Architecture
-- `app.py` is the entry point and owns UI assembly.
-- UI is built with Gradio `Blocks` and extensive CSS overrides.
-- Model/agent logic lives under `core/`.
-- Configurations are JSON-based under `config/`.
+- `app.py` is the entry point and owns UI assembly
+- UI is built with Gradio `Blocks` and extensive CSS overrides
+- Model/agent logic lives under `core/`
+- Configurations are JSON-based under `config/`
 
 ## UI Composition
-- Two-column layout: sidebar branding + main chat area.
-- Chat history rendered via `gr.Chatbot`.
-- Gemini-style input row (icons, model select, send).
+- Two-column layout: sidebar branding + main chat area
+- Chat history rendered via `gr.Chatbot`
+- Gemini-style input row (icons, model select, send)
+
+## Preprompt Popup Pattern
+The preprompt popup required specific implementation patterns:
+
+1. **DOM Placement**: `prompt_row` must be a sibling of `input-container-gemini`, NOT nested inside `input-box-gemini` Group
+2. **CSS Positioning**: Use `position: fixed` (not absolute) with high z-index (999999) to avoid chatbot blocking clicks
+3. **Closing Logic**: 
+   - Python: Clear choices on selection (`gr.update(choices=[], value=None)`) to force Gradio hide
+   - JavaScript: `hideEmptyPopups()` function monitors and hides empty popup containers
+   - Multiple timed hide attempts (0ms, 50ms, 100ms, 200ms, 500ms, 1000ms) to counter Gradio re-renders
+
+## Gradio-Specific Patterns
+- `visible=False` removes elements from DOM entirely (can't style hidden elements)
+- Use `gr.State` for tracking popup state (e.g., `current_popup`)
+- JavaScript in `gr.HTML` for DOM manipulation that Gradio doesn't support natively
+- MutationObserver pattern for handling dynamic Gradio re-renders
+
+## Deployment Patterns
+- Python version pinned in README.md YAML front matter (`python_version: "3.12"`)
+- spacy requires specific Python version for wheel compatibility
+- HF Spaces uses README.md metadata for configuration