Skip to content

Harden Ask the Smol mobile UX - #153

Merged
tacticalnoot merged 1 commit into
mainfrom
codex/audit-and-optimize-ask-the-smol-for-mobile
May 30, 2026
Merged

Harden Ask the Smol mobile UX#153
tacticalnoot merged 1 commit into
mainfrom
codex/audit-and-optimize-ask-the-smol-for-mobile

Conversation

@tacticalnoot

Copy link
Copy Markdown
Owner

Motivation

  • The existing Ask the Smol lab used a desktop-first layout that caused cramped selectors, oversized cover art, cramped starter buttons, and an inspector that could dominate mobile screens.
  • The selector rendered many rows at once, risking sluggish mobile render and horizontal overflow from long ids/JSON.
  • The Prompt Inspector and chat composer were not safe-by-default on small viewports and the lab lacked an experiment manifest referenced by the registry.

Description

  • Reworked src/components/labs/AskTheSmolLab.svelte into a mobile-first single-column flow with a compact header and status badge, a full-width search, a collapsible selector, a compact selected-Smol summary, and a chat-first composer.
  • Implemented visible-result limiting (initial 24 results) while filtering against the full loaded collection and added a Show more affordance to incrementally render additional matches.
  • Improved starter chips to be shorter and horizontally scrollable, increased touch target sizes, stacked composer controls on narrow viewports, and contained message/inspector areas with min-width: 0, overflow-wrap: anywhere, and svh-bounded scrolling.
  • Rebuilt the Prompt Inspector into a collapsed <details> panel with bounded height and contained JSON/pre blocks that scroll internally, and added safe-area/overflow CSS to prevent horizontal scrolling.
  • Added labs/experiments/ask-the-smol/experiment.yml and updated docs/labs/ASK_THE_SMOL.md to document the mobile behavior and verification steps.

Testing

  • Ran pnpm check, which failed due to unrelated pre-existing TypeScript errors in other components and not due to the Ask the Smol changes. (expected repository-wide noise)
  • Ran pnpm build, which completed successfully with existing Vite/Astro warnings about large chunks and third-party module directives. (passed)
  • Ran pnpm test, which completed successfully (tests passed: 40, skipped: 1). (passed)
  • Launched the dev server and verified the route responded with HTTP/1.1 200 OK for /labs/ask-the-smol using curl -I; the page served successfully. (passed)
  • Attempted npx playwright install chromium to run viewport checks, but browser installation failed due to CDN download blocked with 403 Domain forbidden, so automated Playwright screenshots could not be produced. (blocked)
  • Ran git diff --check and whitespace checks to ensure no diff issues. (passed)

Codex Task

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying smol-fe with  Cloudflare Pages  Cloudflare Pages

Latest commit: 84e2825
Status:⚡️  Build in progress...

View logs

@tacticalnoot
tacticalnoot merged commit f67eb6e into main May 30, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant