# Responsiveness (/foundations/responsiveness)



<div className="hd-responsiveness">
  Start with a layout that works in a narrow window, then add columns and persistent navigation when there is room. Choose changes based on the content and task. A breakpoint describes available width, rather than a particular device.

  <ResponsiveExplorer />

  Choose an example, drag the width slider, or play the resize sequence. These abstract, scaled diagrams use a single illustrative threshold of 768 CSS pixels (48rem with a 16px initial font size). Real interfaces may need different thresholds for each part of the layout.

  ## Breakpoints [#breakpoints]

  The published DASH preset and helper types currently leave named viewport breakpoints to the consuming application. Define shared thresholds in that application's Panda configuration, or use explicit media queries.

  Start with the narrow layout and add a change where its content needs more space. This example uses 48rem as a local threshold for two columns. That value is an example to evaluate with real content, rather than a DASH-wide breakpoint.

  ```tsx
  import { css } from "@hashintel/ds-helpers/css";

  export const layout = css({
    display: "grid",
    gridTemplateColumns: "minmax(0, 1fr)",
    gap: "4",
    "@media (min-width: 48rem)": {
      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
      gap: "6",
    },
  });
  ```

  ## Decide what changes [#decide-what-changes]

  The five views above show these changes. Keep the content available as its arrangement changes.

  <details className="hd-rp-reference">
    <summary>
      Narrow and wider layout guidance
    </summary>

    | Area              | Narrow layout                                                | Wider layout                                                    |
    | ----------------- | ------------------------------------------------------------ | --------------------------------------------------------------- |
    | Navigation        | Provide an explicit control to open it.                      | Keep frequent destinations visible when space permits.          |
    | Forms             | Stack labels, fields, help, and errors in reading order.     | Add columns for independent fields when their labels still fit. |
    | Actions           | Keep the primary action visible and allow the group to wrap. | Show secondary actions beside it when useful.                   |
    | Details           | Put related information after the main task.                 | Use a second column when it reduces navigation.                 |
    | Tables and graphs | Contain overflow and preserve access to controls and data.   | Use the extra space for comparison and detail.                  |
  </details>

  Keep the DOM reading order useful at every width. Avoid visual reordering that makes keyboard focus jump unexpectedly. Prefer wrapping and flexible tracks to fixed widths that clip labels.

  ## Input methods and density [#input-methods-and-density]

  Screen width does not tell you whether someone uses a mouse, touch, or keyboard. Expose essential actions without hover. The preset provides `_supportHover` for hover feedback on a fine pointer and `_pointerCoarse` for adaptations to a coarse pointer.

  <ResponsiveInputs />

  Density changes spacing through the `density` utility. It is independent of breakpoints: a wide screen can still need comfortable spacing, and a narrow screen still needs usable targets. See [Spacing](/foundations/spacing#density) and [Accessibility](/foundations/accessibility#layout-targets-and-motion).

  ## Check reflow [#check-reflow]

  Test between breakpoints, not only at their exact values. Include long names, translated labels, validation messages, and browser zoom. At 320 CSS pixels wide, ordinary content should reflow without horizontal page scrolling. [WCAG's reflow criterion](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) allows exceptions for content that needs two dimensions, including data tables and diagrams.

  Give such content its own scrollable region, retain visible controls, and provide a text or table alternative when it communicates information that the graphic alone would make hard to access.

  <ResponsiveReflow />

  The table contains illustrative data. Its scrollable region is keyboard-focusable, so all columns remain reachable without making the entire page scroll sideways.

  See the [token setup](/foundations/design-system#source-and-setup) before using responsive Panda styles in an application.
</div>