fix: UI polish - cream header, full recipe cards, wider layout

app.py

@@ -344,7 +344,7 @@ body {
 #soap-shell {
     border: 0 !important;
     border-radius: 0 !important;
-    padding: 0 !important;
+    padding: 16px !important;
     background: var(--soap-cream) !important;
     box-shadow: none !important;
 }
@@ -521,11 +521,12 @@ body {
 .section-divider {
     height: 1px;
     margin: 24px 0 18px;
-    background: rgba(212, 168, 83, 0.58);
+    background: transparent !important;
 }
 
 .output-row {
     background: transparent !important;
+    padding: 16px 0 !important;
 }
 
 .output-row > *,
@@ -535,90 +536,58 @@ body {
     background: transparent !important;
 }
 
-.examples-card {
+.recipe-card-grid {
     margin: 18px 0 20px;
+    background: transparent !important;
 }
 
-.examples-card .table-wrap,
-.examples-card table,
-.examples .table-wrap,
-.examples table {
-    overflow: visible !important;
-}
-
-.examples-card table,
-.examples table {
-    display: grid !important;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-    border: 0 !important;
-}
-
-.examples-card thead,
-.examples thead {
-    display: none !important;
-}
-
-.examples-card tbody,
-.examples-card tr,
-.examples-card td,
-.examples tbody,
-.examples tr,
-.examples td {
-    display: contents !important;
+.recipe-card-grid .form,
+.recipe-card-grid .block {
+    background: transparent !important;
 }
 
-.examples table td {
-    white-space: normal !important;
-    overflow: visible !important;
-    max-width: none !important;
-    text-overflow: unset !important;
+.recipe-card-row {
+    gap: 12px !important;
+    margin-bottom: 12px !important;
+    background: transparent !important;
 }
 
-.examples .label-wrap {
-    display: none !important;
+.recipe-card {
+    width: 100%;
 }
 
-.examples-card td:first-child,
-.examples td:first-child {
-    display: block !important;
-    min-height: 70px;
+.recipe-card button {
+    width: 100% !important;
+    min-height: 70px !important;
     height: auto !important;
-    padding: 14px 16px !important;
-    border: 1.5px solid rgba(212, 168, 83, 0.62) !important;
-    border-left: 6px solid var(--soap-amber) !important;
+    padding: 12px 14px !important;
+    border: 1.5px solid var(--soap-amber-dark) !important;
     border-radius: 12px !important;
-    background: #FFF9EF !important;
+    background: #D4A853 !important;
     color: var(--soap-ink) !important;
-    box-shadow: 0 8px 16px rgba(61, 43, 31, 0.09);
-    cursor: pointer;
-    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
+    box-shadow: 0 6px 14px rgba(169, 120, 34, 0.18);
+    font-family: Georgia, "Times New Roman", serif !important;
+    font-size: 14px !important;
+    line-height: 1.35 !important;
+    text-align: left !important;
     white-space: normal !important;
     overflow: visible !important;
     text-overflow: unset !important;
-    line-height: 1.35;
 }
 
-.examples-card td:first-child *,
-.examples td:first-child * {
+.recipe-card button span,
+.recipe-card button div,
+.recipe-card button p {
     white-space: normal !important;
     overflow: visible !important;
     max-width: none !important;
     text-overflow: unset !important;
-    -webkit-line-clamp: unset !important;
-    line-clamp: unset !important;
 }
 
-.examples-card td:first-child:hover,
-.examples td:first-child:hover {
+.recipe-card button:hover {
     transform: translateY(-2px);
-    border-color: var(--soap-amber-dark) !important;
-    box-shadow: 0 12px 22px rgba(61, 43, 31, 0.14);
-}
-
-.examples-card td:nth-child(2),
-.examples td:nth-child(2) {
-    display: none !important;
+    background: #DEB766 !important;
+    box-shadow: 0 10px 20px rgba(169, 120, 34, 0.24);
 }
 
 .safety-note {
@@ -640,7 +609,7 @@ footer,
     }
 
     #soap-shell {
-        padding: 0 !important;
+        padding: 16px !important;
         border-radius: 0 !important;
     }
 
@@ -648,8 +617,8 @@ footer,
         font-size: 14px;
     }
 
-    .examples-card table {
-        grid-template-columns: 1fr;
+    .recipe-card-row {
+        gap: 10px !important;
     }
 
     .notebook-card {
@@ -679,6 +648,14 @@ soap_theme = gr.themes.Base(
     input_background_fill="#FFFDF8",
 )
 
+
+def make_example_loader(example_text: str):
+    def load_example() -> str:
+        return example_text
+
+    return load_example
+
+
 with gr.Blocks(title="🧼 Soap Lab") as demo:
     with gr.Group(elem_id="soap-shell"):
         with gr.Group(elem_id="soap-header", elem_classes=["header-panel"]):
@@ -701,12 +678,18 @@ with gr.Blocks(title="🧼 Soap Lab") as demo:
                 vegan_toggle = gr.Checkbox(label="🌿 Plant-based only", value=False)
                 submit_btn = gr.Button("Calculate →", variant="primary", size="lg", elem_id="calculate-btn")
 
-        with gr.Group(elem_classes=["examples-card"]):
-            gr.Examples(
-                examples=EXAMPLES,
-                inputs=[user_input, vegan_toggle],
-                label="Recipe cards",
-            )
+        recipe_buttons = []
+        with gr.Group(elem_classes=["recipe-card-grid"]):
+            for row_start in range(0, len(EXAMPLES), 2):
+                with gr.Row(elem_classes=["recipe-card-row"]):
+                    for example_text, _ in EXAMPLES[row_start:row_start + 2]:
+                        recipe_buttons.append(
+                            gr.Button(
+                                example_text,
+                                variant="secondary",
+                                elem_classes=["recipe-card"],
+                            )
+                        )
 
         gr.HTML("<div class='section-divider'></div>")
 
@@ -744,6 +727,12 @@ with gr.Blocks(title="🧼 Soap Lab") as demo:
         inputs=[user_input, vegan_toggle],
         outputs=[lye_output, scores_output, explanation_output],
     )
+    for recipe_button, example in zip(recipe_buttons, EXAMPLES):
+        recipe_button.click(
+            fn=make_example_loader(example[0]),
+            inputs=[],
+            outputs=user_input,
+        )
 
 if __name__ == "__main__":
     demo.launch(css=CSS, theme=soap_theme)