Update app.py

app.py

@@ -90,7 +90,6 @@ def find_similar_recipes_list(query_text):
         title = row['Title']
         desc = str(row['Raw_Output'])
         
-        # --- MODIFIED: Show Title, Exact Score (3 decimals), and Description ---
         card_content = (
             f"<div style='font-weight: bold; font-size: 16px; margin-bottom: 4px; color: #050505;'>🥘 {title}</div>"
             f"<div style='color: #1877F2; font-size: 13px; font-weight: 600; margin-bottom: 8px;'>Similarity Score: {score:.3f}</div>"
@@ -141,20 +140,8 @@ theme = gr.themes.Default(
 )
 
 facebook_css = """
-body, html { 
-    background-color: #f0f2f5; 
-    margin: 0; 
-    padding: 0; 
-    height: 100vh;
-    overflow: hidden !important; 
-}
-.gradio-container { 
-    background-color: #f0f2f5 !important; 
-    max-width: 100% !important; 
-    margin: 0 !important; 
-    padding: 0 !important; 
-    height: 100vh !important;
-}
+body { background-color: #f0f2f5; margin: 0; padding: 0; }
+.gradio-container { background-color: #f0f2f5 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
 footer { display: none !important; }
 
 /* 1. FIXED NAVBAR */
@@ -165,10 +152,8 @@ footer { display: none !important; }
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     display: flex;
     align-items: center;
-    position: fixed;
+    position: sticky; /* Keep navbar sticky at top */
     top: 0;
-    left: 0;
-    right: 0;
     z-index: 999;
     justify-content: space-between;
 }
@@ -190,50 +175,40 @@ footer { display: none !important; }
     align-items: center;
 }
 
-/* 2. LAYOUT COLUMNS */
+/* 2. LAYOUT COLUMNS - STANDARD FLOW (NO FIXED SIDEBARS) */
 .main-layout { 
     display: flex; 
     justify-content: center; 
-    padding-top: 56px; 
+    padding-top: 20px; 
     gap: 20px; 
     max-width: 1600px;
     margin: 0 auto;
     align-items: flex-start;
 }
 
+/* Left Sidebar */
 .col-left { 
-    width: 200px !important; 
-    min-width: 200px !important; 
+    width: 280px !important; 
+    min-width: 280px !important; 
     flex-shrink: 0; 
-    display: none; 
-    position: sticky; 
-    top: 76px; 
-    height: calc(100vh - 80px);
-    overflow-y: auto;
-    scrollbar-width: none; 
+    display: none; /* Hidden on mobile */
+    /* No position: sticky here anymore */
 } 
 
+/* Center Feed */
 .col-feed { 
     flex-grow: 1;
     min-width: 600px;
     max-width: 1000px;
-    height: 100%;
-    overflow-y: auto; 
-    padding: 20px 0 100px 0; 
-    scrollbar-width: none; 
+    /* No overflow-y auto here, let the page scroll */
 }
-.col-feed::-webkit-scrollbar { display: none; }
 
+/* Right Sidebar */
 .col-right { 
-    width: 240px !important; 
-    min-width: 240px !important; 
+    width: 280px !important; 
+    min-width: 280px !important; 
     flex-shrink: 0; 
-    display: none; 
-    position: sticky; 
-    top: 76px; 
-    height: calc(100vh - 80px);
-    overflow-y: auto;
-    scrollbar-width: none;
+    display: none; /* Hidden on mobile */
 }
 
 /* 3. CARD STYLING */
@@ -250,7 +225,7 @@ footer { display: none !important; }
 /* 4. NAVIGATION BUTTONS */
 .nav-btn {
     width: 100% !important; 
-    height: 42.5px !important;
+    height: 48px !important;
     text-align: left !important;
     justify-content: flex-start !important;
     background: transparent !important;
@@ -330,6 +305,7 @@ details[open] > summary { display: none !important; }
 
 /* UTILS */
 .sim-scroll { height: 200px; overflow-y: auto; font-size: 13px; color: #050505; }
+.suggested-header { font-size: 12px; font-weight: bold; color: #65676B; margin-bottom: 5px; }
 @media (min-width: 1100px) { .col-left, .col-right { display: block; } }
 """