From 046f5f31b226346add495d819f2b8406c3bb9d15 Mon Sep 17 00:00:00 2001 From: Joao Henrique Machado Silva Date: Sun, 10 May 2026 08:40:13 +0200 Subject: [PATCH] feat(web): mobile-friendly + responsive sqlritedb.com (SQLR-37) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mobile-first pass over the marketing site so SEO + Core Web Vitals ranking signals don't leak before the rest of the SEO ticket sequence lands. Renders cleanly with no horizontal scroll at 375 / 390 / 768 / 1024px+ breakpoints; tap targets on primary controls are >= 44px. - nav.tsx: client-side hamburger + full-width drawer below 760px; body-scroll lock and Esc-to-close while open. - docs/page.tsx: sticky
"On this page" panel surfaces the full TOC on phones (desktop sidebar + right TOC unchanged). - layout.tsx: viewport export with device-width / dark themeColor so iOS Safari + Chrome mobile chrome stop flashing white. - globals.css: 900 / 640 / 380px responsive layer — wrap padding, hero / CTA / sec-head spacing, terminal / install-bar / SDK / bench / footer / desktop showcase tuning, architecture row stacking, SQL table -> stacked cards under 640px, SDK tab bar -> horizontal scroll, hamburger + mobile-menu + docs-mobile-menu styles. Global guard switched to html { overflow-x: clip } to preserve position: sticky. - README.md: documents the responsive layers + section-local breakpoint convention for new sections. Co-Authored-By: Claude Opus 4.7 (1M context) --- web/README.md | 37 +++ web/src/app/docs/page.tsx | 33 +++ web/src/app/globals.css | 504 +++++++++++++++++++++++++++++++++++++ web/src/app/layout.tsx | 11 +- web/src/components/nav.tsx | 101 +++++++- 5 files changed, 682 insertions(+), 4 deletions(-) diff --git a/web/README.md b/web/README.md index aad2a37..d8b03e7 100644 --- a/web/README.md +++ b/web/README.md @@ -92,6 +92,43 @@ roadmap timeline, etc.) is intentionally hand-rolled — it ports the prototype's `styles.css` 1:1 rather than reaching for component-library abstractions. +## Responsive design + +The site is mobile-first and verified at 375px (iPhone SE), 390px +(iPhone 14), 768px (iPad), and 1024px+. Key conventions: + +- **Breakpoints** live at the bottom of [`src/app/globals.css`](src/app/globals.css): + 900px (tablet), 760px (mobile nav cutover), 640px (phone), and 380px + (very small phones). Section-level grids declare their own breakpoints + inline near their styles (features, bench bars, footer, etc.). +- **Nav** ([`src/components/nav.tsx`](src/components/nav.tsx)) is a + client component. Below 760px the inline links collapse into a 44×44 + hamburger that opens a full-width drawer; Esc closes; the body scroll + is locked while open. +- **Docs** ([`src/app/docs/page.tsx`](src/app/docs/page.tsx)) hides the + desktop sidebar and on-page TOC under 1000px and 720px respectively + and shows a sticky `
`-driven section list in their place. +- **Tap targets** — primary buttons (`.btn`), the hamburger, install-bar + copy, mobile menu links, and the docs section toggle are all ≥ 44px + tall on phones. Footer / docs sidebar inline nav links stay at ~36px, + which is the common compromise for dense navigation lists. +- **Horizontal scroll** is guarded globally with `html { overflow-x: + clip }`. We use `clip` instead of `hidden` so `position: sticky` keeps + working for the nav and the docs sidebar. Long URLs / unbroken tokens + in prose use `overflow-wrap: anywhere` so they don't blow out the + viewport. +- **Tables and code blocks** scroll horizontally inside their container + (`overflow-x: auto`); the SQL surface table on `/` reflows into + stacked cards under 640px since its second column is a long pill list. +- **Viewport / theme color** — set via the `viewport` export in + [`src/app/layout.tsx`](src/app/layout.tsx); the dark `#0b0c0e` + `themeColor` keeps mobile browser chrome from flashing white. + +When adding new sections, declare the breakpoint logic alongside the +section's styles rather than at the bottom of the file — it keeps the +section self-contained and the global breakpoint block reserved for +typography / spacing baseline tweaks. + ## Updating the version The displayed version is in [`src/lib/site.ts`](src/lib/site.ts). Update it diff --git a/web/src/app/docs/page.tsx b/web/src/app/docs/page.tsx index f0169d0..4ee8d19 100644 --- a/web/src/app/docs/page.tsx +++ b/web/src/app/docs/page.tsx @@ -58,6 +58,39 @@ export default function DocsPage() { }} />