Phase 1 · HTML Everything · Output 03

Responsive Authority

Responsive behavior is visual authority. Desktop and phone must both be intentionally designed, and intermediate/tablet layouts require explicit authority whenever they materially differ. A smaller viewport must never force React to invent navigation, hierarchy, density, control placement, or workflow behavior.

Phase 1Active · Inventory in ProgressOutput 03 of 06

Minimum rule. Desktop authority is required. Phone authority is required. Tablet/intermediate authority is conditional but must always be checked. One responsive HTML may prove multiple device classes when resizing clearly demonstrates the accepted transformation.

A · Responsive Authority Model

What must be decided

Desktop

Large-screen authority

full navigation hierarchy
approved information density
wide tables/charts/forms
utility and action placement

Phone

Small-screen authority

complete destination access
intentional stacking/reflow
mobile-safe controls
back/context behavior
no hover dependency

Conditional

Tablet / intermediate

must always be tested
separate authority only if materially distinct
watch navigation and dense two-column layouts

B · Transformation Checklist

Check every relevant surface

Navigation + Hierarchy

What stays visible, collapses, moves to bottom navigation/menu, changes order, or gains back/context controls.

Information Density

Grid stacking, card compression, disclosure, truncation, scrolling, priority fields, and long-content treatment.

Tables + Wide Data

Intentional cards, horizontal scroll, priority columns, alternate list treatment, or another accepted transformation.

Forms + Actions

Field stacking, validation placement, sticky actions, mobile keyboard behavior, destructive-action separation.

Layers Above Page

Desktop drawer/modal/popover versus phone sheet/full-screen treatment where materially different.

Search + Filters

Inline versus overlay/drawer, active-filter visibility, clear/reset access, and result density.

Charts / Calendars / Timelines

Reflow, scroll, alternate list/card treatment, simplified axis, and preserved context.

Media / Documents

Viewer dimensions, zoom, navigation, controls, attachments, and file actions on smaller screens.

Status + Fixed Chrome

Banners, toasts, bottom bars, sticky headers, floating actions, queues, and safe-area behavior without collisions.

C · Platform / App Family

Responsive authority outside bounded apps

Surface	Desktop	Phone	Intermediate	Status
Application Family Front / Tile Page	Required	Required	Check tile transformation	Not yet decided
Application Entry	Required	Required	Conditional	Not yet decided
Cross-App Return / Switch	Required	Required	Conditional	Not yet decided
Household / Person / Workspace Selector	Required where used	Required where used	Conditional	Not yet decided

D · Household Ledger Application Envelope

Every app-level surface gets its own responsive check

Shell + Global Utilities

Ten destinations, active state, Search, Quick Add, notifications, profile/context, app switcher, top/bottom chrome.

Administration

Administrative hierarchy, dense forms/tables, permissions, destructive controls, first setup.

Integrations

Connection library, setup/detail/status, reconnect/disconnect, provider descriptions and long identifiers.

Import / Export / Migration

File/source selection, preview/review, progress, mixed results, wide validation tables.

Operations / Logs / Queues

Dense operational data, status chips, log text, retry controls, queue details and overflow.

Security / Settings / Help

Permission matrices, settings hierarchy, reauth prompts, onboarding/guidance, save and destructive controls.

E · Household Ledger Destinations

Shared shell does not prove responsive content

Overview

Grid/card stacking · summary density · charts · priority actions · long labels.

Daily Command

Attention queue · time/date context · quick actions · filters · action reachability.

Communications

List/detail relationship · threads · search/filter · attachments · input behavior.

Vision

Planning cards · edit controls · timelines/milestones · long-form content.

Records

List/detail transformation · relationships · filters · forms · tables · bulk mode.

Cash Flow

Charts · time-range controls · tables · summaries · drill-down · wide financial values.

Matters

List/detail · statuses · timelines · evidence · forms · action placement.

Assets

Asset library/detail · media · values/status fields · forms · tables.

Accounts

Account cards/tables · balances · connection status · detail/configuration · financial values.

Binder

Document library · viewer · upload/intake · evidence detail · search/filter · file actions.

F · Grocery — Independent Responsive Authority

Household Ledger does not prove Grocery

Grocery Shell

Five persistent destinations, Settings utility, app-family return, mobile navigation transformation.

Home

Needs-doing cards, quick actions, attention hierarchy, phone-first readability.

Inventory

Search/filter, item library/detail, Staples, forms, bulk/selection, House Check.

Shop

Shopping list density, quantities, one-handed Shopping Mode, check-off/undo, closeout.

Meals

Week/calendar transformation, day cards, leftovers, meal editing, current/past/future context.

Recipes

Library/grid, detail, Cookbooks, intake/edit, Cook Mode, long ingredients/instructions.

G · Responsive Blind-Spot Sweep

Common places a desktop + phone pair still fails

Intermediate Breakpoints

Explicitly test roughly tablet/small-laptop territory; designs often break between the polished desktop and phone endpoints.

Content Stress

Long names, large currency values, long emails, many badges, large counts, and expanded text must not destroy layout.

Text Scaling / Zoom

Essential content and controls remain usable with increased browser text or accessibility scaling.

Software Keyboard

Search, forms, message input, modals, and sticky actions remain visible and usable when the phone keyboard opens.

Sticky / Fixed Collisions

Headers, bottom nav, banners, toasts, floating actions, sheets, and safe areas cannot cover each other.

Deep-Link Landing

A phone user arriving directly at a detail/workflow page still understands context and has a return path.

Touch vs Hover

No essential action depends on hover, and dense controls remain safely tappable.

Overflow Ownership

Tables, calendars, logs, long strings, charts, and document viewers get intentional scrolling/reflow behavior.

State + Responsive

Output 02 error, restricted, bulk, dirty, conflict, loading, partial-success, and destructive states must still work on phone.

Very Short / Landscape

Check only where workflows such as Cook Mode, Shopping Mode, document viewing, or dense forms materially benefit or break.

Output 03 Close Gate

Responsive behavior must never be left for React to invent

Every required Output 01 surface has desktop authority.
Every required Output 01 surface has phone authority.
Tablet/intermediate behavior is explicitly checked and separately authorized where materially different.
Each bounded app is reviewed independently.
Navigation transformation is explicit at platform, shell, and destination levels.
Tables, forms, layers, charts/calendars, documents/media, bulk actions, and long content have intentional small-screen treatment where used.
Important Output 02 states remain coherent responsively.
Content stress, text scaling, keyboard overlap, sticky/fixed collisions, deep links, touch behavior, and overflow are checked where relevant.
Every required responsive treatment points to accepted HTML authority.
Deliberately unsupported device behavior is explicitly ruled, not silently omitted.
Owner accepts the completed Responsive Authority set.