Feature Description

The Analytics setup screen will be updated to follow the Figma designs for mobile and tablet viewports. This includes two key changes: a sticky footer for the CTA, and an update to the arrangement of the dropdowns for tablet viewports.

For reference, see the Analytics setup screen section in the design doc, and the Figma design.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• On mobile and tablet viewports, the Setup button is placed in a sticky footer at the bottom of the Analytics setup screen.
• On tablet viewports, the Account dropdown is positioned above the Property and Web data stream dropdowns, with the Property and Web data stream dropdowns shown side by side.
• On mobile viewports, all three dropdowns are stacked vertically.
• These changes are gated by the setupFlowRefresh feature flag.
• The layout is aligned with the Figma design.

Implementation Brief

See the implementation guide in the design doc.

Note: The changes can be seen in this diff. This branch can be used to further fine-tune the implementation.

• In assets/sass/components/analytics-4/_googlesitekit-analytics-setup-module.scss
  • The setup inputs container (.googlesitekit-setup-module__inputs) is switched to CSS Grid on mobile and tablet breakpoints.
  • On mobile, use a single-column layout so all three dropdowns stack vertically.
    • Set the direct wrapper (> div) to width: 100%.
    • Target this in the @media (max-width: $bp-desktop) query.
  • On tablet (@media (min-width: $bp-tablet) and (max-width: $bp-desktop)):
    • Use a two-column grid: grid-template-columns: repeat(2, 1fr).
    • Account dropdown is placed in column 1, row 1 (single-column width).
    • Property dropdown is placed in column 1, row 2.
    • Web data stream dropdown is placed in column 2, row 2.
    • Use grid-column and grid-row for these placements by targeting the nth-child pseudo-selector.
  • For mobile/tablet, override dropdown controls to width: 100% so they fill their grid cells.
  • For analytics select classes (.googlesitekit-analytics__select-account, .googlesitekit-analytics-4__select-property, .googlesitekit-analytics-4__select-webdatastream), add width: 100% and max-width: none to avoid conflicts at tablet widths.
  • Remove bottom padding from .googlesitekit-analytics-setup__form.
  • For .googlesitekit-setup-module__action, set position: sticky and set left: 0 and bottom: 0.
  • Ensure spacing between elements matches the Figma design.

Test coverage

• Fix any failing stories.

QA Brief

• Start setting up Site Kit with Analytics connected and the setupFlowRefresh feature flag enabled.
• Verify that the Analytics setup screen's layout meets the AC.
  • Also check that the layout is consistent for the account/property/web data stream creation variants of the form.
• Disconnect Analytics, start setting it up again from the Settings screen and check that the layout of the form inputs is updated to meet the AC within this context.

Changelog entry

• Update the Analytics setup screen layout for mobile and tablet viewports with a sticky footer CTA and responsive dropdown arrangement.