Stress lab
Every example flagged stress: true rendered at phone width in one screen, so hostile content breaks in plain sight.
Under pressure, all at once
Phone-width previews of every example flagged stress: true. Scan for text that escapes, clips, or overlaps, then freeze what you find in Gallery::Hostile.
Every stress example
Button · Hostile labels
Button · Hostile link text
Button group · Hostile action group
Button group · Hostile links in a small container
Button to · Hostile mutations
Button to · Hostile mutation in a small container
Checkbox · Hostile labels
Checkbox group · Hostile list
Checkbox group · Hostile horizontal and cards
Combobox · Hostile comboboxes
Combobox · Hostile combobox field
Control group · Hostile joined controls
Dropzone · Hostile presentations
Field · Hostile text fields
Field · Hostile choice fields
Field group · Hostile group
Fieldset · Hostile legend and guidance
Fieldset · Disabled hostile fieldset
Input · Hostile values
Label · Hostile label text
Radio button · Hostile labels
Radio button group · Hostile list
Radio button group · Hostile segmented and cards
Select · Hostile single selects
Select · Hostile multiple select
Switch · Hostile labels
Textarea · Hostile values
Textarea · Hostile textarea field
Command palette · Hostile trigger and dialog
Command palette · Hostile open results
Dialog · Hostile open panel
Dialog · Hostile trigger
Dropdown · Hostile menu
Sheet · Hostile sheet
Tooltip · Hostile placements
Alert · Hostile incident
Alert · Hostile scripts
Empty state · Hostile empty state
Empty state · Hostile borderless in a card
Toast · Hostile notification stack
Accordion · Hostile items
Accordion · Hostile roster in a panel
Avatar · Hostile initials
Avatar · Hostile fallbacks
Avatar stack · Hostile stacks
Badge · Hostile labels
Badge · Hostile inline flow
Details table · Hostile record
Details table · Hostile record in a small container
Progressive image · Hostile fallbacks
Stat grid · Long values nested in content
Table · Hostile roster
Table · Hostile roster in a small container
Typeset · Hostile document
Pagination · Forty pages
Pagination · Hostile labels
Pagination bar · Hostile summary and range
Tabs · Hostile tablist
Toolbar · Hostile regions
Toolbar · Hostile heading and link
Card · Hostile size and surface matrix
Card · Hostile record card
Card · Hostile title in a small container
Container · Hostile small boundary
Flex · Hostile wrapping row
Flex · Hostile no-wrap row
Grid · Forty hostile members
Grid · Twelve fixed tracks
Application navigation · Hostile inventory
Application shell · Hostile sidebar and topbar
Authentication shell · Hostile sign-in
Danger zone · Hostile zone
Danger zone · Hostile zone in a small container
Data section · Hostile section
Form section · Hostile form
Page header · Hostile header
Page header · Hostile header in a small container
Settings layout · Hostile navigation
Viewport
Ruby
test/dummy/app/components/gallery/compositions/stress_lab_page.rbrender NitroKit::Grid.new(cols: "1 md:2 xl:3", gap: 6, id: "gallery-stress-lab-grid") do
Gallery::Catalog.stress_previews.each do |preview|
render NitroKit::Flex.new(dir: :col, gap: 2, align: :stretch, data: { gallery: "stress-lab-item" }) do
h3(data: { gallery: "stress-lab-title" }) do
a(href: entry_path(preview.entry, state: preview.state)) { preview.entry.title }
plain " · #{preview.title}"
end
iframe(
src: preview_path(preview),
title: "#{preview.entry.title}: #{preview.title} at #{FRAME_WIDTH}px",
loading: "lazy",
width: FRAME_WIDTH,
data: { gallery: "stress-lab-frame" }
)
end
end
end