Update app.py

app.py

@@ -8,22 +8,27 @@ def filter_table(query):
     if query.strip() == "":
         filtered = df.copy()
     else:
-        filtered = df[df['Paper name'].str.contains(query, case=False, na=False) |
-                      df['Note'].str.contains(query, case=False, na=False)]
+        filtered = df[
+            df['Paper name'].str.contains(query, case=False, na=False) |
+            df['Note'].str.contains(query, case=False, na=False)
+        ]
 
-    # Minimal modern CSS styling
+    # Styled HTML with full-width scrollable table
     style = """
     <style>
+    .scroll-container {
+        max-height: 500px;
+        overflow-y: auto;
+        border: 1px solid #333;
+        border-radius: 6px;
+        background-color: #1e1e1e;
+    }
     .styled-table {
         width: 100%;
         border-collapse: collapse;
         font-family: 'Segoe UI', sans-serif;
         color: #e0e0e0;
         background-color: #1e1e1e;
-        border: 1px solid #333;
-        border-radius: 8px;
-        box-shadow: 0 0 12px #00000044;
-        overflow: hidden;
     }
     .styled-table th {
         background-color: #2c2c2c;
@@ -31,6 +36,9 @@ def filter_table(query):
         text-align: left;
         color: #64b5f6;
         border-bottom: 2px solid #444;
+        position: sticky;
+        top: 0;
+        z-index: 1;
     }
     .styled-table td {
         padding: 10px;
@@ -42,23 +50,28 @@ def filter_table(query):
     </style>
     """
 
-    html_table = f"{style}<table class='styled-table'>"
+    html_table = f"{style}<div class='scroll-container'><table class='styled-table'>"
     html_table += "<tr><th>Paper</th><th>Note</th><th>Status</th></tr>"
 
     for _, row in filtered.iterrows():
         html_table += f"<tr><td>{row['Paper name']}</td><td>{row['Note']}</td><td>{row['Status']}</td></tr>"
 
-    html_table += "</table>"
+    html_table += "</table></div>"
     return html_table
 
-# Gradio Interface
-demo = gr.Interface(
-    fn=filter_table,
-    inputs=gr.Textbox(label="Search"),
-    outputs=gr.HTML(label="Results"),
-    title="Reading Notes Viewer",
-    description="Browse and search through your reading notes."
-)
+# Gradio Blocks layout for better positioning
+with gr.Blocks(title="Reading Notes Viewer") as demo:
+    gr.Markdown("### Search and browse your reading notes")
+
+    query = gr.Textbox(label="Search", placeholder="Type a keyword...")
+    output = gr.HTML()
+
+    query.change(fn=filter_table, inputs=query, outputs=output)
+
+    # Show full table by default
+    output.style(full_width=True)
+    output.update(value=filter_table(""))
 
 demo.launch()
 
+