BUG - sev 3 - android- nav - "Appointments" back arrow text wrapping on appointment details page

[DJUltraTom]

What happened?

On the Appointment details page the back arrow text for "appointments is wrapping to the next line

Specs:

• Device: pixel 4a
• OS: android
• User Account: judy.morrison@id.me
• Accessibility State: n/a

Steps to Reproduce

navigate to "Health > Appointments > (select an appointment)" Observe the back arrow text in the upper left hand corner of the screen

Desired behavior

Text should be on a single line

Acceptance Criteria

Bug Severity - BE SURE TO ADD THE SEVERITY LABEL

See [Issue Tracking](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/va-mobile-app/testing/VA%20Mobile%20App%20Test%20Plan.md#issue-tracking) for details on Severity Levels

• 4 - Low

Linked to Story

Screen shot(s) and additional information

Ticket Checklist

• [ ] Steps to reproduce are defined
• [ ] Desired behavior is added
• [ ] Labels added (front-end, back-end, feature, bug)
• [ ] Estimate of 1 added

[alexandec]

@kidlaurenpeace I noticed your other ticket which also deals with back button labels. I think we can address that ticket and this one at the same time. Currently the header layout proportions are like this (L/R are buttons, middle is page title):

| -- 1 --  | ---- 2 ---- | -- 1 -- | 

So the page title gets twice as much width as the buttons. We could change the proportions so the page title gets a bit less space and the left/right buttons get a bit more. That would prevent ugly wrapping on the buttons. However it would cause long page titles to wrap, like:

Is this a reasonable solution? In the case of "Prescription details" I think we could shorten the title to just "Details" to avoid wrapping.

[alexandec]

This change would cause "Contact information" to wrap as well

[alexandec]

Same thing with "Prescriptions help", it also wraps with this change.

One thing that occurs to me, maybe we could provide more space for the left button than the right. It seems like the right button is usually shorter. However I'm not sure if we can keep the title centered if the left button is wider than the right button.

[kidlaurenpeace]

@alexandec Makes sense. Details should be fine for the Rx Detail screen title. I want to circle back on the Contact Information screen title. I want to say Contact, but also want input from @mistymg (when she returns) bc she may have something better.

Is there a ballpark character limit we could follow for the Title / Back Label areas? I know the scaling is fixed for the header text, so maybe one way is to look at the "smallest" viewport to determine what it might be – and also could help us plan titles moving forward?

Also your other comment:

One thing that occurs to me, maybe we could provide more space for the left button than the right. It seems like the right button is usually shorter. However I'm not sure if we can keep the title centered if the left button is wider than the right button.

Yes, the right btn stays the same all the time. We're dealing with text that wraps in another place, too.. What if we tighten up the screen title's line height, so there's not so much space between the lines. And keep the same constraints on the horizontal space so that it stays centered?? /shrug

[alexandec]

@kidlaurenpeace here's what the current template looks like with 20 characters in each button and 20 in the title on an iPhone 14. I'll try setting up an emulator with a smaller iPhone as well.

[alexandec]

Here's what the current template looks like on an iPhone SE (3rd gen) with a 4.7" screen. Not as big of width difference as I thought actually (this is the smallest iPhone available):

[kidlaurenpeace]

@alexandec wow that looks pretty good. For the title: if we center-align and tighten the line height, the that could also work well. Though this could mean we create a new text style, right? I assume its using "Mobile Body", and if we made adjustments we wouldn't want everywhere to be affected.

[alexandec]

@kidlaurenpeace What do you think of this on the small iPhone (SE). It's the worst case with the longest back button text (Appointments) and a long title that wraps. I created a new MobileBodyTight style for the title text and adjusted spacing and sizing to allow Appointments to fit:

[kidlaurenpeace]

@alexandec Yeah this is trending in the right direction... can we add some padding between the back label and the Title?

• Maybe 20px (to follow other spacing in the app)?
• And then center it so that it doesn't left align?

[alexandec]

I was able to center the text and add padding. However, on the iPhone SE, even with just 10px of padding left and right, the word "appointment" no longer fits, haha. Not a fan of this word.

[kidlaurenpeace]

@alexandec Shoot. (feels like we're playing blackjack a little bit haha). Why did it fit OK in the left alignment, but then get weird here? If nothing else, can we just limit it here to Request ?

[alexandec]

It was the extra padding that caused it to drop those letters to the next line. But yeah, I think we'll have to keep individual words in screen titles at 9 characters or shorter to avoid this issue on the smallest screens.

[kidlaurenpeace]

Understood ...we can track the rule for designers somewhere too. Appreciate this!

[alexandec]

@kidlaurenpeace I dug into this more and came up with a solution that provides more flexibility. It allows longer titles like "Veterans Crisis Line" as long as the left and right button text is short. It also allows longer button text like "Appointments" as long as the title isn't too long. All the combinations in the app currently look good to me with this new approach. They don't wrap even on the iPhone SE's small screen.

There are at least three other tickets dealing with similar issues: https://app.zenhub.com/workspaces/va-mobile-frontendqa-60f1a34998bc75000f2a489f/issues/gh/department-of-veterans-affairs/va-mobile-app/4852 https://app.zenhub.com/workspaces/va-mobile-frontendqa-60f1a34998bc75000f2a489f/issues/gh/department-of-veterans-affairs/va-mobile-app/4876 https://app.zenhub.com/workspaces/va-mobile-frontendqa-60f1a34998bc75000f2a489f/issues/gh/department-of-veterans-affairs/va-mobile-app/4877

This new approach should resolve those tickets as well.

[kidlaurenpeace]

Nice @alexandec!!! Sounds like it addresses our current issues which is great.

Would there be a way to account for future state, say if in the future we have an unavoidable long title and a long back label? Or in that case, would the title just wrap to next line in favor of the back label?

[alexandec]

With the new approach, if we have a title that runs into the back button text, the back button label text will wrap. There may be a way to get the title to wrap instead, which would be better, but I wasn't able to achieve that with the approaches I tried. This problem is pretty challenging given the variety of configurations possible with the header.

Since the new approach solves all our existing cases, my recommendation is to wait until wrapping becomes an issue (if it ever does) and put more time into it then. Ideally we can avoid wrapping regardless since the look isn't as clean.

[DJUltraTom]

verified this is not wrapping any longer