Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/tasks/active/20260411-ui-review-polish-todo.md`:
- Around line 1-55: The tasks file
docs/tasks/active/20260411-ui-review-polish-todo.md is missing its required
paired lessons file; add docs/tasks/active/20260411-ui-review-polish-lessons.md
containing a lessons summary for the ui-review-polish work (one-paragraph
overview, what changed per task 1–7, decisions made e.g., icon convention and
toolbar primitives, verification steps including pnpm verify:fast and
screenshots, and any follow-ups), ensure the filename matches the todo slug and
date exactly and commit both files together so the pair conforms to the project
guideline requiring a -todo.md and corresponding -lessons.md for non-trivial
tasks.

In `@packages/frontend/src/app/login/page.tsx`:
- Around line 21-56: Replace the internal anchor tags that cause full-page
reloads with the SPA Link component: change the <a href="/"> (logo link) and <a
href="/docs"> usages to <Link to="/"> and <Link to="/docs">, preserving their
existing className and children (e.g., the Grid2x2PlusIcon and "Wafflebase"
text, and the docs link text); keep external links that use GITHUB_URL as plain
<a> with target="_blank" and rel set. Also add the necessary Link import (e.g.,
import { Link } from 'react-router-dom') at the top of the file so the new
components resolve.

In `@packages/frontend/src/components/ui/toolbar.tsx`:
- Around line 50-61: The ToolbarButton component currently spreads props onto a
<button> which defaults to type="submit" when used inside forms; update the
ToolbarButton function to ensure a safe default by accepting a type prop (from
React.ComponentProps<"button">) and defaulting it to "button" (e.g., destructure
type = "button" from props) or explicitly set type="button" on the rendered
<button> while still spreading the rest of the props so that ToolbarButton never
triggers accidental form submission.

---

Nitpick comments:
In `@packages/frontend/src/app/home/why-section.tsx`:
- Around line 4-8: The badge icon is redundant for screen readers; in the
LimitedBadge component mark the Minus icon as decorative by adding
aria-hidden="true" (and optionally focusable="false" if it's an inline SVG) on
the <Minus /> element so only the "Limited" text is announced; update the Minus
usage in LimitedBadge accordingly.

In `@packages/frontend/src/components/ui/toolbar.tsx`:
- Around line 33-42: ToolbarSeparator allows callers to override orientation via
the props spread; update the component so orientation is always vertical by
excluding any incoming orientation and explicitly setting orientation="vertical"
on the rendered Separator (for example destructure orientation out of the props:
function ToolbarSeparator({ className, orientation, ...props }:
React.ComponentProps<typeof Separator>) and then render <Separator {...props}
orientation="vertical" className={cn("mx-2 h-5", className)} />). This ensures
Separator's orientation cannot be overridden by the passed props.

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/frontend/src/app/home/why-section.tsx`:
- Around line 13-39: The rows array contains icon-only status cells (values in
wafflebase and others using Check, X, LimitedBadge) which lack accessible text;
update each icon cell in rows to include an offscreen/screen-reader-only label
or an aria-label indicating the status (e.g., "Available", "Unavailable",
"Limited") alongside the icon so assistive tech can read it—for example wrap the
icon and add a visually hidden <span className="sr-only">Available</span> or set
aria-label on the container element that renders the icon for every occurrence
of Check, X, and LimitedBadge in the rows array.