Update app.py

app.py

@@ -141,11 +141,24 @@ theme = gr.themes.Default(
 )
 
 facebook_css = """
-body { background-color: #f0f2f5; margin: 0; padding: 0; }
-.gradio-container { background-color: #f0f2f5 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
+/* GLOBAL LOCK: This stops the whole page from scrolling */
+body, html { 
+    background-color: #f0f2f5; 
+    margin: 0; 
+    padding: 0; 
+    height: 100vh; /* Force height to screen size */
+    overflow: hidden !important; /* Hide main scrollbar */
+}
+.gradio-container { 
+    background-color: #f0f2f5 !important; 
+    max-width: 100% !important; 
+    margin: 0 !important; 
+    padding: 0 !important; 
+    height: 100vh !important;
+}
 footer { display: none !important; }
 
-/* 1. STICKY NAVBAR */
+/* 1. FIXED NAVBAR */
 .fb-navbar {
     background: white;
     height: 56px;
@@ -153,99 +166,75 @@ footer { display: none !important; }
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     display: flex;
     align-items: center;
-    position: sticky;
+    position: fixed; /* Fixed at top */
     top: 0;
+    left: 0;
+    right: 0;
     z-index: 999;
     justify-content: space-between;
 }
 .fb-logo { 
-    color: #1877F2; 
-    font-size: 28px; 
-    font-weight: 800; 
-    letter-spacing: -0.5px;
-    margin-right: 20px;
-    font-family: Helvetica, Arial, sans-serif;
+    color: #1877F2; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-right: 20px; font-family: Helvetica, Arial, sans-serif;
 }
 .fb-search {
-    background: #f0f2f5;
-    border-radius: 50px;
-    padding: 10px 20px;
-    color: #65676B;
-    width: 250px;
-    display: flex;
-    align-items: center;
+    background: #f0f2f5; border-radius: 50px; padding: 10px 20px; color: #65676B; width: 250px; display: flex; align-items: center;
 }
 
-/* 2. LAYOUT COLUMNS */
+/* 2. LAYOUT COLUMNS - INDEPENDENT SCROLLING */
+/* This container sits below the navbar and fills the screen */
 .main-layout { 
     display: flex; 
     justify-content: center; 
-    padding-top: 20px; 
+    padding-top: 56px; /* Push down by navbar height */
     gap: 20px; 
-    max-width: 1600px;
+    max-width: 100%;
     margin: 0 auto;
-    align-items: flex-start;
+    height: 100vh; /* Fill screen */
+    box-sizing: border-box;
 }
 
-/* FIXED SIDEBARS */
+/* LEFT SIDEBAR: Fixed, no scroll */
 .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; 
+    height: 100%;
+    overflow-y: hidden; /* No scroll */
+    padding: 20px;
+    display: none; /* Mobile hidden */
 } 
 
+/* CENTER FEED: THIS IS THE ONLY THING THAT SCROLLS */
 .col-feed { 
     flex-grow: 1;
-    min-width: 600px;
-    max-width: 1000px;
+    min-width: 500px;
+    max-width: 800px;
+    height: 100%;
+    overflow-y: auto; /* Scrollable! */
+    padding: 20px 0 100px 0; /* Padding for bottom spacing */
+    scrollbar-width: none; /* Hide scrollbar for aesthetics */
 }
+.col-feed::-webkit-scrollbar { display: none; }
 
+/* RIGHT SIDEBAR: Fixed, no scroll */
 .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;
+    height: 100%;
+    overflow-y: hidden; /* No scroll */
+    padding: 20px;
+    display: none; /* Mobile hidden */
 }
 
 /* 3. CARD STYLING */
 .fb-card {
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    margin-bottom: 25px;
-    overflow: hidden;
-    padding: 16px;
-    border: 1px solid #e4e6eb;
+    background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 25px; overflow: hidden; padding: 16px; border: 1px solid #e4e6eb;
 }
 
 /* 4. NAVIGATION BUTTONS */
 .nav-btn {
-    width: 100% !important; 
-    height: 42.5px !important;
-    text-align: left !important;
-    justify-content: flex-start !important;
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    color: #050505 !important;
-    font-weight: 600 !important;
-    font-size: 15px !important;
-    padding: 0 12px !important;
-    border-radius: 8px !important;
-    margin-bottom: 5px !important;
-    display: flex !important;
-    align-items: center !important;
+    width: 100% !important; height: 48px !important; text-align: left !important; justify-content: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #050505 !important; font-weight: 600 !important; font-size: 15px !important; padding: 0 12px !important; border-radius: 8px !important; margin-bottom: 5px !important; display: flex !important; align-items: center !important;
 }
 .nav-btn:hover { background-color: #e4e6eb !important; }
 .nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
@@ -258,68 +247,28 @@ footer { display: none !important; }
 .post-meta { font-size: 13px; color: #65676B; }
 
 /* 6. POST ACTIONS */
-.post-actions { 
-    border-top: 1px solid #ced0d4; 
-    margin-top: 10px; 
-    padding-top: 5px; 
-    display: flex; 
-    justify-content: space-around; 
-}
+.post-actions { border-top: 1px solid #ced0d4; margin-top: 10px; padding-top: 5px; display: flex; justify-content: space-around; }
 .action-btn { background: transparent !important; color: #65676B !important; box-shadow: none !important; }
 .action-btn:hover { background: #f2f2f2 !important; }
 
 /* 7. CONTACTS */
-.contact-row {
-    display: flex; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer;
-}
+.contact-row { display: flex; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; }
 .contact-row:hover { background-color: #e4e6eb; }
 .contact-name { font-weight: 500; font-size: 14px; margin-left: 10px; color: #050505; }
 .profile-row { display: flex; align-items: center; padding: 8px; border-radius: 8px; }
 
 /* 8. EXAMPLES */
 button.gallery-item { border: none !important; background: transparent !important; padding: 4px !important; }
-button.gallery-item img {
-    width: 110px !important; height: 110px !important; border-radius: 12px !important;
-    transition: all 0.3s ease !important; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-button.gallery-item:hover img {
-    transform: scale(1.15) !important; box-shadow: 0 8px 15px rgba(24, 119, 242, 0.3) !important; z-index: 10;
-}
+button.gallery-item img { width: 110px !important; height: 110px !important; border-radius: 12px !important; transition: all 0.3s ease !important; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+button.gallery-item:hover img { transform: scale(1.15) !important; box-shadow: 0 8px 15px rgba(24, 119, 242, 0.3) !important; z-index: 10; }
 
 /* 9. SEE MORE LOGIC */
 details[open] > summary { display: none !important; }
 
 /* 10. MODERN UPLOAD IMAGE */
-.modern-image-container button {
-    border-radius: 8px !important;
-    overflow: hidden !important;
-    border: 1px solid #e4e6eb !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
-    padding: 0 !important;
-}
-.modern-image-container img {
-    border-radius: 8px !important;
-    width: 100% !important;
-    max-height: 400px !important;
-    object-fit: cover !important;
-}
-.modern-image-container .download-button, 
-.modern-image-container .share-button,
-.modern-image-container button[title="Download"],
-.modern-image-container button[title="Share"] { 
-    display: none !important; 
-}
-
-/* 11. REMOVE "GRAY SQUARE" (Gradio Column Artifacts) */
-.feed-container {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    gap: 0 !important;
-}
-/* Ensure inner form elements don't add borders either */
-.feed-container > .form { border: none !important; background: transparent !important; }
+.modern-image-container button { border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e4e6eb !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; padding: 0 !important; }
+.modern-image-container img { border-radius: 8px !important; width: 100% !important; max-height: 400px !important; object-fit: cover !important; }
+.modern-image-container .download-button, .modern-image-container .share-button, .modern-image-container button[title="Download"], .modern-image-container button[title="Share"] { display: none !important; }
 
 /* UTILS */
 .sim-scroll { height: 200px; overflow-y: auto; font-size: 13px; color: #050505; }
@@ -388,6 +337,7 @@ with gr.Blocks(title="CookBook") as demo:
                     gr.HTML("<hr style='border:0; border-top:1px solid #e4e6eb; margin: 10px 0;'>")
                     
                     with gr.Row():
+                        # FIXED: Image upload without crash
                         input_img = gr.Image(
                             type="filepath", 
                             label="Upload Recipe", 
@@ -456,8 +406,7 @@ with gr.Blocks(title="CookBook") as demo:
                 magic_btn.click(ui_update_pipeline, input_img, [out_text, sim1, c1_btns, c2_box, sim2, c3_box, sim3])
 
             # --- VIEW 2: FEED ---
-            # ADDED CLASS feed-container to remove the "Gray Square"
-            with gr.Column(visible=False, elem_classes=["feed-container"]) as feed_view:
+            with gr.Column(visible=False) as feed_view:
                 gr.Markdown("### 🍽️ Explore Our Recipes")
                 
                 if not df_recipes.empty: