NutsNews Home Search Box Layout Patch

This is a UI-only patch for the full archive search box on the home page.

Visual overview

Primary diagram

System map

This is a UI-only patch for the full archive search box on the home page.

Render the repository-owned system map when you need it.

Diagram is not rendered yet.

View as text

NutsNews Home Search Box Layout Patch

This is a UI-only patch for the full archive search box on the home page.

flowchart TB
  accTitle: NutsNews Home Search Box Layout Patch
  accDescr {
    This is a UI-only patch for the full archive search box on the home page.
  }
  A["NutsNews Home Search Box Layout Patch"] --> B["updates/README_HOME_SEARCH_BOX_LAYOUT_PATCH.md"]
  B --> C["Auto-generated placeholder diagram"]

This is a UI-only patch for the full archive search box on the home page.

Changes

Hides the visible Search all NutsNews label while keeping an accessible screen-reader label.
Makes the search text box take the full line.
Moves the Search button underneath the text box.
Removes the helper text: Search the full NutsNews archive, not just the stories currently loaded here.
Does not change Supabase, /api/search, article loading, or search behavior.

Install

cd /Users/ramideltoro/WebstormProjects/nutsnews3

zsh ~/Downloads/nutsnews-home-search-box-layout-patch/scripts/install_home_search_box_layout_patch.sh \
  ~/Downloads/nutsnews-home-search-box-layout-patch

Test

cd /Users/ramideltoro/WebstormProjects/nutsnews3/web
npm run build
npm run dev

Open http://localhost:3000 and confirm:

Search all NutsNews is no longer visible.
The search input takes the whole line.
The Search button appears underneath.
The helper sentence is gone.
Searching still returns results on the home page.