Skip to content

Expose a config option to set the initial responsiveWidth (default is hardcoded 720px) #843

@arikw

Description

@arikw

Clear and concise description of the problem

As a developer using Histoire I want to configure the default initial value of the responsive size picker (the responsiveWidth / responsiveHeight that seeds the _histoire-sandbox-settings-v3 store on a first visit) so that stories render at their natural width by default, instead of being constrained to the hardcoded 720px breakpoint until the user clicks the picker.

Today the only way to escape the 720px default is to fully disable the picker via defaultStoryProps.responsiveDisabled: true - but that also removes the ability to switch to mobile / tablet / laptop breakpoints on demand. For projects whose primitives are most usefully previewed at their natural in-app width (forms, dialogs, list items), the 720px starting point looks like a bug.

I have a PR ready for this — #842

Suggested solution

Add a defaultPreviewSettings entry in the defineConfig schema so users can set initial values for the persisted preview-settings store:

// histoire.config.js
export default defineConfig({
  defaultPreviewSettings: {
    responsiveWidth: null,    // null → picker shows "Auto"
    responsiveHeight: null,
    // (other fields: rotate, backgroundColor, checkerboard, textDirection)
  }
})

The UI already handles null correctly — StoryResponsivePreview.vue:121 renders responsiveWidth.value ?? 'Auto', and lines 141–145 apply htw-w-fit only when !!finalWidth is truthy, so a null width falls through to the parent's full size.

Implementation passes the configured initial values through to the useStorage defaults in packages/histoire-app/src/app/stores/preview-settings.ts instead of the current hardcoded literal { responsiveWidth: 720, ... }.

Alternative

  1. Add responsiveDisabled: true to defaultStoryProps — works, but drops the picker entirely. The picker is useful when actually QA-ing a layout at mobile width.
  2. Custom responsivePresets with a "Full" entry — fails because ResponsivePreset.width is typed number (no null), so an "Auto" preset can't be expressed.
  3. Pre-seed localStorage in histoire.setup.js — works but is brittle: relies on the private store-key _histoire-sandbox-settings-v3, breaks every time Histoire bumps the store schema version.

Additional context

  • Repo file with the hardcoded default: packages/histoire-app/src/app/stores/preview-settings.ts#L7
  • Picker UI that already supports null: packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue#L121
  • Reference config doc that does not currently document this knob: https://histoire.dev/reference/config

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancement: to triageNew feature of request pending review by team member

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions