Skip to content

feat: Always render single/multi selection options vertically (M2-10899) - #758

Open
hotavocado wants to merge 1 commit into
devfrom
M2-10899-vertical-selection-layout
Open

feat: Always render single/multi selection options vertically (M2-10899)#758
hotavocado wants to merge 1 commit into
devfrom
M2-10899-vertical-selection-layout

Conversation

@hotavocado

@hotavocado hotavocado commented Jul 29, 2026

Copy link
Copy Markdown

Description

🔗 Jira Ticket M2-10889

Single and multiple selection items now render their options in one vertical column at every breakpoint, replacing the two-column split that applied at ≥600px.

This is the layout the app already used below 600px, so it is an existing, validated design now applied consistently across all widths.

Per the discussion on M2-10899, this assumes no configuration flag. Rather than gate the old and new layouts per item, we are dropping the multi-column approach entirely and always going vertical, to keep behavior consistent across breakpoints and platforms. Existing items pick up the new layout automatically — there is no per-item setting, no backend field, and no admin panel change.

Portrait (tile style) responses are unaffected: PortraitGrid keeps its current wrapping grid.

Changes

  • RadioItem/RegularGrid.tsx and CheckboxItem/RegularGrid.tsx render a single flex column at gap="16px". Option cards span the parent's full width via the default align-items: stretch, so no explicit width rule was needed.
  • Removed splitList (src/shared/utils/helpers/splitList.ts) and its barrel export. It was the two-column helper and had no other callers or tests.
  • Removed the now-unused useCustomMediaQuery imports from both grids — lessThanSM was their only consumer.

Padding, gap, and card styling are unchanged. Option ordering, randomizeOptions, hidden-option filtering, tooltips, images, and palette colors are all untouched.

Net: 41 insertions, 115 deletions.

Testing

  • yarn tsc --noEmit — 0 errors
  • yarn lint:check — 0 errors, 32 warnings (unchanged from dev; none introduced by this change)
  • yarn test — 751 passed / 44 files
  • Manual verification against a real applet: options should render as a single full-width column, identical above and below the 600px breakpoint. Pending design sign-off against the Figma frame.

Checklist

Functionality

  • The feature behaves correctly in practice and fulfills the intended business purpose
  • The implementation accounts for edge cases, avoids subtle logical errors, and handles somewhat rare failure states (e.g. offline mode for mobile, 3rd party being down, etc)

Testing

  • Verify there are automated tests added that meaningfully cover critical behavior and failure cases
  • Code coverage does not go down as result of this change
  • Test suite passes

Security & Data Privacy

  • Verify there is no chance we would accidentally log PII to application logs
  • Verify this addition does not materially affect our security attack surface, and if so it has undergone security review
  • All inputs are sanitized
  • New dependencies are well maintained and have significant justification for being added to the project

Logging/Monitoring

  • Logging is implemented for this change such that you could troubleshoot this feature in production
  • The change/feature is able to be monitored in production

Performance

  • This change does not introduce n+1 queries or other performance issues within our expected scale (e.g. missing indexes on frequently queried columns, frequently updating tables that are accessed often)

Readability

  • All commented out code is removed
  • Debugging code including extraneous log lines are removed
  • Code is easy to understand through naming and structure; comments explain intent or non‑obvious decisions

Change Safety

  • Backend changes are backwards compatible with old clients, or it is well known they are not and a deployment/rollout plan is in place. This include backend changes being compatible with old mobile app versions, as well as applet versioning within Curious.
  • Destructive database migrations are rolled out in stages. For example, renaming a column means adding a new column and migrating the existing data to that columns in one deployment. Then monitoring to ensure that field isn’t used, and finally removing that old column in a separate deployment.

Single and multiple selection items now render options in one vertical
column at every breakpoint, replacing the two-column split that applied
at >=600px. This is the layout already used below 600px, now applied
consistently.

No configuration flag: the multi-column approach is dropped entirely
rather than gated per item, so existing items pick up the new layout
automatically. Portrait (tile style) responses are unaffected.

Removes splitList and the now-unused useCustomMediaQuery imports, which
had no remaining callers.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@aws-amplify-us-east-1

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-758.dek0ppt2nc92n.amplifyapp.com

@divbzero
divbzero self-requested a review August 4, 2026 13:20
@divbzero

divbzero commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Do not merge yet. Wait for QA confirmation.

@divbzero divbzero added the Do not merge Pull request cannot be merged for some reason label Aug 5, 2026
@divbzero

divbzero commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Also wait to add an admin banner / notify admin users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Do not merge Pull request cannot be merged for some reason

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants