Update app.py

app.py

@@ -118,7 +118,7 @@ def search_spaces(search_text, category):
     if search_text:
         spaces_df = spaces_df[spaces_df['title'].str.lower().str.contains(search_text.lower())]
     
-    spaces = spaces_df.nlargest(50, 'likes')[['title', 'likes', 'url', 'category']]
+    spaces = spaces_df.nlargest(30, 'likes')[['title', 'likes', 'url', 'category']]
     
     # Get category stats
     total_spaces = len(spaces_df)
@@ -126,31 +126,52 @@ def search_spaces(search_text, category):
     
     # Format the results as HTML with clickable links and stats
     html_content = f"""
-    <div style='margin-bottom: 20px; padding: 10px; background-color: var(--color-background-primary); border: 1px solid var(--color-border-primary); border-radius: 5px;'>
+    <div style='margin-bottom: 20px; padding: 10px; background-color: var(--color-background-primary); 
+                border: 1px solid var(--color-border-primary); border-radius: 5px;'>
         <h3 style='color: var(--color-text-primary);'>Statistics:</h3>
         <p style='color: var(--color-text-primary);'>Total Spaces: {total_spaces}</p>
         <p style='color: var(--color-text-primary);'>Total Likes: {total_likes:,}</p>
     </div>
-    <div style='max-height: 500px; overflow-y: auto;'>
+    <div style='max-height: 800px; overflow-y: auto;'>
+        <div style='display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 10px;'>
     """
     
     for _, row in spaces.iterrows():
         html_content += f"""
-        <div style='margin: 10px; padding: 15px; border: 1px solid var(--color-border-primary); 
-                    border-radius: 5px; background-color: var(--color-background-primary);'>
-            <h3><a href='{row['url']}' target='_blank' 
-                   style='color: #2196F3; text-decoration: none; 
-                   font-weight: bold;'>{row['title']}</a></h3>
+        <div style='padding: 15px; 
+                    border: 1px solid var(--color-border-primary); 
+                    border-radius: 5px; 
+                    background-color: var(--color-background-primary);
+                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;'>
+            <h3 style='margin-top: 0; margin-bottom: 10px;'>
+                <a href='{row['url']}' target='_blank' 
+                   style='color: #2196F3; 
+                          text-decoration: none; 
+                          font-weight: bold;'>{row['title']}</a>
+            </h3>
+            <div style='height: 1px; 
+                        background: linear-gradient(to right, transparent, var(--color-border-primary), transparent);
+                        margin: 10px 0;'></div>
             <p style='color: var(--color-text-primary); margin: 8px 0;'>
                 <span style='background-color: var(--color-accent-soft); 
-                           padding: 2px 8px; border-radius: 12px;'>
+                           padding: 2px 8px; 
+                           border-radius: 12px;
+                           font-size: 0.9em;'>
                     {row['category']}
                 </span>
             </p>
-            <p style='color: var(--color-text-primary);'>❤️ {row['likes']:,} likes</p>
+            <p style='color: var(--color-text-primary); 
+                      margin-top: auto; 
+                      padding-top: 10px;'>
+                ❤️ {row['likes']:,} likes
+            </p>
         </div>
         """
-    html_content += "</div>"
+    
+    html_content += "</div></div>"
     return html_content
 
 # Create the Gradio interface