Skip to content

fix: shorten cancellation notification label to prevent wrapping on mobile#1034

Open
harshitbshah wants to merge 1 commit intoellite:mainfrom
harshitbshah:fix/cancel-reminder-label-mobile
Open

fix: shorten cancellation notification label to prevent wrapping on mobile#1034
harshitbshah wants to merge 1 commit intoellite:mainfrom
harshitbshah:fix/cancel-reminder-label-mobile

Conversation

@harshitbshah
Copy link
Copy Markdown

Problem

In the subscription edit form, the Notify me dropdown and the Cancellation Notification date picker are laid out side by side in a 66/33 split (desktop) or 50/50 split (mobile). On mobile, the label "Cancellation Notification" is too long to fit on a single line at 50% column width, causing it to wrap to two lines. This pushes the date input down, misaligning it with the "Notify me" dropdown next to it — making the form look broken and harder to use.

Before:

Notify me          Cancellation
[3 days before ▼]  Notification
                   [date input  ]

After:

Notify me          Cancel reminder
[3 days before ▼]  [date input     ]

Fix

Shortened the English label for the cancellation_notification key from "Cancellation Notification" to "Cancel reminder" in includes/i18n/en.php.

  • "Cancel reminder" is 15 characters vs 24 for "Cancellation Notification" — fits comfortably on one line even on the smallest common mobile viewport (320px, ~160px per column)
  • The meaning is preserved: it's a date field that triggers a reminder to cancel the subscription
  • Only the English label is changed — other language translations are unaffected and remain the responsibility of their respective contributors

Why not a CSS fix?

An alternative approach would be to stack the two fields vertically on mobile (flex-wrap: wrap). However, this is a more invasive layout change and unnecessary — the label text is the root cause. A shorter label is simpler, less risky, and keeps the compact side-by-side layout that works well when labels fit on one line.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant