Update app.py

app.py

@@ -198,6 +198,7 @@ footer { display: none !important; }
     overflow-y: auto;
     scrollbar-width: none; 
 } 
+.col-left::-webkit-scrollbar { display: none; } /* Hide Chrome scrollbar */
 
 .col-feed { 
     flex-grow: 1;
@@ -211,11 +212,12 @@ footer { display: none !important; }
     flex-shrink: 0; 
     display: none; 
     position: sticky; 
-    top: 76px;
+    top: 76px; 
     height: calc(100vh - 80px);
     overflow-y: auto;
     scrollbar-width: none;
 }
+.col-right::-webkit-scrollbar { display: none; } /* Hide Chrome scrollbar */
 
 /* 3. CARD STYLING */
 .fb-card {
@@ -399,8 +401,8 @@ with gr.Blocks(title="CookBook") as demo:
                     gr.HTML("<div style='height:10px'></div>")
                     magic_btn = gr.Button("✨ Convert to Text", variant="primary") 
 
-                # --- LARGE SPACER TO SEPARATE CARDS ---
-                gr.HTML("<div style='height: 25px;'></div>")
+                # --- 9 PIXEL SPACER ---
+                gr.HTML("<div style='height: 9px;'></div>")
 
                 # SECTION B: TEXT OUTPUT
                 with gr.Group(elem_classes=["fb-card"]):
@@ -447,8 +449,9 @@ with gr.Blocks(title="CookBook") as demo:
             with gr.Column(visible=False) as feed_view:
                 gr.Markdown("### 🍽️ Explore Our Recipes")
                 
+                # FIXED: Only show 2 posts to prevent endless scrolling feeling
                 if not df_recipes.empty:
-                    feed_samples = df_recipes.sample(10)
+                    feed_samples = df_recipes.sample(2) 
                     for index, row in feed_samples.iterrows():
                         user_name = random.choice(["Grandma Rose", "Chef Mike", "Sarah J."])
                         emoji = random.choice(["🥘", "🥗", "🍰", "🌮"])
@@ -480,6 +483,9 @@ with gr.Blocks(title="CookBook") as demo:
                                 gr.Button("👍 Like", elem_classes=["action-btn"], size="sm")
                                 gr.Button("💬 Comment", elem_classes=["action-btn"], size="sm")
                                 gr.Button("↪ Share", elem_classes=["action-btn"], size="sm")
+                    
+                    # Added a "Load More" button visual (non-functional in this demo, but improves UX)
+                    gr.Button("Load More...", variant="secondary")
                 else:
                     gr.Markdown("⚠️ Database is empty.")