Update app.py

app.py

@@ -382,39 +382,51 @@ def create_ui() -> gr.Blocks:
     
     /* Improved dataframe styling for full text display */
     .gr-dataframe {
-        max-height: 600px;
-        overflow-y: auto;
-        overflow-x: auto;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        background: rgba(255, 255, 255, 0.98);
     }
     
     .gr-dataframe table {
-        table-layout: auto;
         width: 100%;
-        min-width: 1200px;
+        table-layout: fixed;
+        border-collapse: collapse;
     }
     
+    /* Column width specifications for both dataframes */
     .gr-dataframe th,
     .gr-dataframe td {
-        padding: 12px 15px;
-        vertical-align: top;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-        max-height: 200px;
-        overflow-y: auto;
-        white-space: pre-wrap;
+        padding: 12px 16px;
+        text-align: left;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        font-size: 0.95rem;
         line-height: 1.4;
     }
     
+    /* Specific column widths - applying to both dataframes */
     .gr-dataframe th:nth-child(1),
-    .gr-dataframe td:nth-child(1) { width: 200px; min-width: 200px; }
+    .gr-dataframe td:nth-child(1) { width: 16.67% !important; min-width: 16.67% !important; max-width: 16.67% !important; }
     .gr-dataframe th:nth-child(2),
-    .gr-dataframe td:nth-child(2) { width: 300px; min-width: 300px; }
+    .gr-dataframe td:nth-child(2) { width: 25% !important; min-width: 25% !important; max-width: 25% !important; }
     .gr-dataframe th:nth-child(3),
-    .gr-dataframe td:nth-child(3) { width: 300px; min-width: 300px; }
+    .gr-dataframe td:nth-child(3) { width: 25% !important; min-width: 25% !important; max-width: 25% !important; }
     .gr-dataframe th:nth-child(4),
-    .gr-dataframe td:nth-child(4) { width: 250px; min-width: 250px; }
+    .gr-dataframe td:nth-child(4) { width: 20.83% !important; min-width: 20.83% !important; max-width: 20.83% !important; }
     .gr-dataframe th:nth-child(5),
-    .gr-dataframe td:nth-child(5) { width: 150px; min-width: 150px; }
+    .gr-dataframe td:nth-child(5) { width: 12.5% !important; min-width: 12.5% !important; max-width: 12.5% !important; }
+    
+    /* Additional specific targeting for both dataframes */
+    div[data-testid="dataframe"] table th:nth-child(1),
+    div[data-testid="dataframe"] table td:nth-child(1) { width: 16.67% !important; }
+    div[data-testid="dataframe"] table th:nth-child(2),
+    div[data-testid="dataframe"] table td:nth-child(2) { width: 25% !important; }
+    div[data-testid="dataframe"] table th:nth-child(3),
+    div[data-testid="dataframe"] table td:nth-child(3) { width: 25% !important; }
+    div[data-testid="dataframe"] table th:nth-child(4),
+    div[data-testid="dataframe"] table td:nth-child(4) { width: 20.83% !important; }
+    div[data-testid="dataframe"] table th:nth-child(5),
+    div[data-testid="dataframe"] table td:nth-child(5) { width: 12.5% !important; }
     
     /* Make repository names clickable */
     .gr-dataframe td:nth-child(1) {
@@ -640,6 +652,7 @@ def create_ui() -> gr.Blocks:
                     gr.Markdown("🎯 **These are the highest-rated repositories based on your requirements:**")
                     top_repos_df = gr.Dataframe(
                         headers=["Repository", "Strengths", "Weaknesses", "Speciality", "Relevance"],
+                        column_widths=["16.67%", "25%", "25%", "20.83%", "12.5%"],
                         wrap=True,
                         interactive=False
                     )
@@ -685,6 +698,7 @@ def create_ui() -> gr.Blocks:
                 gr.Markdown("### 📋 All Analysis Results")
                 df_output = gr.Dataframe(
                     headers=["Repository", "Strengths", "Weaknesses", "Speciality", "Relevance"],
+                    column_widths=["16.67%", "25%", "25%", "20.83%", "12.5%"],
                     wrap=True,
                     interactive=False
                 )