From a3c243c952a246e99ed7ccd90b5f03467dfca0c0 Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Tue, 3 Nov 2026 12:59:09 -0500
Subject: [PATCH] fix(ui): Recipes page gutter, lede in info tip, readable
 active filter chip

---
 frontend/src/i18n/locales/en.json       |  1 +
 frontend/src/pages/Recipes.jsx          | 14 ++++++---
 frontend/src/styles/pages/_recipes.scss | 41 ++++++++++++++-----------
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index e369fe45..deba9002 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -4804,6 +4804,7 @@
             "cpu": "CPU",
             "disk": "Disk",
             "featured": "Featured",
+            "headerLine": "One-click installers",
             "install": "Install",
             "lede": "Ready-to-go installers that run as real operations: probe, derive, apply, verify. Secrets are asked for mid-run and kept in the vault.",
             "loadFailed": "Couldn't load the recipe catalog.",
diff --git a/frontend/src/pages/Recipes.jsx b/frontend/src/pages/Recipes.jsx
index af5448b7..2c574090 100644
--- a/frontend/src/pages/Recipes.jsx
+++ b/frontend/src/pages/Recipes.jsx
@@ -9,6 +9,7 @@ import {
 
 import { Drawer } from '../components/ds';
 import EmptyState from '../components/EmptyState';
+import SectionIntro from '../components/SectionIntro';
 import FormField from '../components/FormField';
 import { runRecipe, useRecipeCatalog } from '../hooks/useRecipeCatalog';
 import { useToast } from '../contexts/useToast.js';
@@ -143,11 +144,14 @@ export default function Recipes() {
     };
 
     return (
-        <div className="recipes-page">
+        <div className="sk-tabgroup__inner recipes-page">
+            <SectionIntro
+                icon={<ChefHat />}
+                info={t('app.recipes.lede', 'Ready-to-go installers that run as real operations: probe, derive, apply, verify. Secrets are asked for mid-run and kept in the vault.')}
+            >
+                {t('app.recipes.headerLine', 'One-click installers')}
+            </SectionIntro>
             <div className="recipes-page__head">
-                <p className="recipes-page__lede">
-                    {t('app.recipes.lede', 'Ready-to-go installers that run as real operations: probe, derive, apply, verify. Secrets are asked for mid-run and kept in the vault.')}
-                </p>
                 <label className="recipes-page__search">
                     <Search size={14} />
                     <input
@@ -165,7 +169,7 @@ export default function Recipes() {
                         <SharedButton variant="unstyled"
                             key={cat}
                             type="button"
-                            className={`sk-pill${category === cat ? ' is-active' : ''}`}
+                            className={`recipes-page__cat${category === cat ? ' is-active' : ''}`}
                             onClick={() => setCategory(cat)}
                         >
                             {cat === 'all' ? t('common.labels.all', 'All') : cat}
diff --git a/frontend/src/styles/pages/_recipes.scss b/frontend/src/styles/pages/_recipes.scss
index b978a35f..693f386e 100644
--- a/frontend/src/styles/pages/_recipes.scss
+++ b/frontend/src/styles/pages/_recipes.scss
@@ -5,19 +5,7 @@
 
     &__head {
         display: flex;
-        align-items: flex-end;
-        gap: $spacing-lg;
-        margin-bottom: $spacing-md;
-    }
-
-    &__lede {
-        flex: 1;
-        min-width: 0;
-        margin: 0;
-        color: var(--text-secondary);
-        font-size: $text-sm;
-        line-height: 1.55;
-        max-width: 640px;
+        margin: $spacing-md 0;
     }
 
     &__search {
@@ -25,6 +13,9 @@
         align-items: center;
         gap: $space-2;
         width: 260px;
+
+        @media (max-width: $breakpoint-md) { width: 100%; }
+
         height: $control-md;
         padding: 0 $space-3;
         border: 1px solid var(--border-color);
@@ -49,14 +40,28 @@
         gap: $space-2;
         margin-bottom: $spacing-md;
 
-        .sk-pill {
+        .recipes-page__cat {
+            display: inline-flex;
+            align-items: center;
+            height: $control-sm;
+            padding: 0 $space-3;
+            border: 1px solid var(--border-color);
+            border-radius: $radius-full;
+            background: transparent;
+            color: var(--text-secondary);
+            font-size: $text-sm;
+            font-weight: $font-weight-medium;
             cursor: pointer;
-            opacity: 0.72;
+
+            &:hover {
+                background: var(--bg-hover);
+                color: var(--text-primary);
+            }
 
             &.is-active {
-                opacity: 1;
-                border-color: var(--primary-color);
-                color: var(--primary-color);
+                background: var(--accent-bg);
+                border-color: var(--accent-bright);
+                color: var(--accent-bright);
             }
         }
     }