All Docs
FeaturesSaaS FactoryUpdated February 19, 2026

Responsive Action Bar in the Product Header

Responsive Action Bar in the Product Header

Released in v1.0.20

Overview

The ProductHeader component displays a set of quick-action buttons at the top of every product view. As of v1.0.20 these buttons adapt intelligently to the available screen width, preventing overflow and layout breakage on tablet and smaller laptop screens.

Action buttons

The header exposes up to five actions:

ButtonDescription
Open AppOpens the live deployed product in a new tab
Trigger PipelineManually kicks off the autonomous development pipeline
SourceLinks to the product source repository
GitHubOpens the product's GitHub page
SettingsOpens product configuration

Responsive behaviour

On large screens (lg and above) all available action buttons are rendered inline in a flex row.

On medium screens and below (md and below — typically tablets and compact laptops) the header collapses secondary actions into a ... overflow dropdown menu:

  • Always visible: the primary CTA button — Open App (when the product is live) or Trigger Pipeline (when no deployment exists yet)
  • Collapsed into ... dropdown: Source, GitHub, Settings

This keeps the header uncluttered and fully functional at any viewport width without horizontal scrolling or awkward wrapping.

Implementation notes

  • The overflow menu uses the DropdownMenu component from the platform UI library — no additional dependencies are introduced.
  • The primary CTA is determined dynamically: if the product has a live URL, Open App is shown; otherwise Trigger Pipeline is shown.
  • The collapse threshold is the Tailwind md breakpoint (768 px by default).

Affected file

src/components/product-header.tsx