BUG - sev-3 - All - Misalignment of "icon then text" on most pages with certain font sizes

[TKDickson]

What happened?

When the font setting is large enough that the BOX (that the text for an external link is in) needs to wrap for more lines than the text itself (video), we get visual misalignments with the external link icon, like these:

I've also seen this with the branch of service seal + branch of service name on the Veteran Status Card screen, so it appears to be something about how we're handling 'icon then then' layouts?

Specs:

• Device:
• OS:
• User Account:
• Accessibility State:

Steps to Reproduce

Desired behavior

Acceptance Criteria

Bug Severity - BE SURE TO ADD THE SEVERITY LABEL

See [Bug Tracking](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/QA#issue-severity) for details on severity levels

• Impact: High Low
• Frequency: High Low

• 3 - Low
• 2 - High
• 1 - Critical

Linked to Story

Screen shot(s) and additional information

Full JSON response for services related to issue (expand/collapse)

Ticket Checklist

• [ ] Steps to reproduce are defined
• [ ] Desired behavior is added
• [x] Labels added (front-end, back-end, global, Health, relevant feature, accessibility, etc)
• [x] Estimate of 1 added (for front-end tickets)
• [ ] Added either to the relevant feature epic (if found during new feature implementation), or the relevant team's bug epic (Global, Health & Benefits, API, QART)

[TKDickson]

Also checking with the DS team to see if it's something that would need to be handled at the component level, instead.

[theodur]

@TKDickson I tried reproducing on a few devices (both physical and simulator) at various font sizes, and I wasn't able to. I also had Binny try, and he wasn't able to either. Are you still able to reproduce? I'm wondering if this was either fixed, or if it was a one-off thing

[TKDickson]

@theodur yes, reproduced just now. And also Brea saw it just yesterday on the develop build (she asked me if it was a known bug). I see it pretty much constantly (without trying) so it's puzzling that you all were having such difficulty.

I think the easiest method is to find a screen with one of those external link icons, then hop over to settings and adjust the font size by 1 notch, jump back to VAHB and repeat until you find a font size that breaks that particular screen. For the Profile Help screen, for instance, 4 of the 12 possible text sizes on my iPhone break the alignment of one or both of the external links on the large panel.

[TKDickson]

Icon stayed aligned with text for external links on all links on the Profile Help (how do I change my name), Payments Help (what if I'm missing a payment) and Veterans Crisis Line screens - which were the screens I picked as a sample of external links in the app. For all font sizes, iOS and Android. (although, to be fair, I rarely saw this problem in Android anyways because they have so few text/display sizes to work with)

[TKDickson]

Doesn't require further testing in develop; closing