Visual polish: show forecast table column headers, restyle Link Neighbours button, move assistant panel under forecast

app.py

@@ -623,17 +623,6 @@ with gr.Blocks(title="🌿 Plant Watering Planner") as app:
                     return_btn = gr.Button("🔙 Back to gallery")
                 action_status = gr.Markdown()
 
-                # Ask-the-assistant panel — hidden until a plant is selected
-                with gr.Group(visible=False) as advisor_panel:
-                    advisor_question = gr.Textbox(label="Ask about this plant 🧑‍🌾", placeholder="e.g. Why are the leaves turning yellow?")
-                    advisor_ask_btn = gr.Button("🤖 Ask the assistant")
-                    advisor_answer = gr.Markdown()
-
-                    gr.Markdown("---")
-                    health_upload = gr.Image(type="pil", label="📷 Upload a photo to check this plant's health", elem_id="health-upload")
-                    health_btn = gr.Button("🩺 Diagnose health")
-                    health_result = gr.Markdown()
-
             # ── Sidebar: watering recommendations + forecast ────────────────────
             with gr.Column(scale=2, elem_id="sidebar"):
                 gr.Markdown("### 💧 Watering today")
@@ -659,6 +648,18 @@ with gr.Blocks(title="🌿 Plant Watering Planner") as app:
                     city_input   = gr.Textbox(label="City", value=WEATHER_CITY, placeholder="e.g. Paris")
                     forecast_btn = gr.Button("🔍 Get forecast", variant="primary")
 
+                # Ask-the-assistant panel — hidden until a plant is selected
+                with gr.Group(visible=False) as advisor_panel:
+                    gr.Markdown("### 🤖 Plant assistant")
+                    advisor_question = gr.Textbox(label="Ask about this plant 🧑‍🌾", placeholder="e.g. Why are the leaves turning yellow?")
+                    advisor_ask_btn = gr.Button("🤖 Ask the assistant")
+                    advisor_answer = gr.Markdown()
+
+                    gr.Markdown("---")
+                    health_upload = gr.Image(type="pil", label="📷 Upload a photo to check this plant's health", elem_id="health-upload")
+                    health_btn = gr.Button("🩺 Diagnose health")
+                    health_result = gr.Markdown()
+
         # ── Events ────────────────────────────────────────────────────────────────
         # Track which plant is selected (index stored in State)
         selected_idx = gr.State(value=None)

static/style.css

@@ -214,10 +214,25 @@ footer {
 }
 
 /* "Relier des plantes" toggle button */
+#link-mode-btn {
+    border-radius: 999px !important;
+    padding: 0.45rem 1.25rem !important;
+    background: #ffffff !important;
+    border: 1.5px solid #cfe8cf !important;
+    color: #3f5b3f !important;
+    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.10);
+}
+
+#link-mode-btn:hover {
+    background: #f3f9f1 !important;
+    border-color: #81c784 !important;
+}
+
 #link-mode-btn.link-mode-active {
     background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%) !important;
     color: #ffffff !important;
     border-color: transparent !important;
+    box-shadow: 0 3px 10px rgba(67, 160, 71, 0.25);
 }
 
 .garden-sprite img {
@@ -283,7 +298,49 @@ footer {
     background: transparent !important;
 }
 
-#watering-cards .header-table thead, #forecast-strip .header-table thead {
+#watering-cards .header-table thead {
+    display: none;
+}
+
+/* Forecast table: show the column titles as a styled label row above the cards */
+#forecast-strip .header-table {
+    display: block;
+    width: 100% !important;
+    margin-bottom: 6px;
+}
+
+#forecast-strip .header-table thead {
+    display: block;
+}
+
+#forecast-strip .header-table thead tr {
+    display: flex;
+    width: 100%;
+    gap: 6px;
+}
+
+#forecast-strip .header-table tbody {
+    display: none;
+}
+
+#forecast-strip .header-cell {
+    border: none !important;
+    background: #e3efe0 !important;
+    border-radius: 10px !important;
+    flex: 1 1 0% !important;
+    width: auto !important;
+    min-width: 0 !important;
+}
+
+#forecast-strip .header-cell .header-content span {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #2e7d32;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+#forecast-strip .header-cell .cell-menu-button {
     display: none;
 }