fix(change-note-type): stop mappings being clipped

[david-allison]

Note

Assisted-by: GPT-6

Purpose / Description

See screenshots 😆

Fixes

• Fixes Change note type screen doesn't have enough padding at the bottom #21008

Approach

Add regression tests, then:

• Fix scrolling spacing so bottom rows are reachable
• Wrapped field/template don't overlap vertically
• Truncate note-type names
• Tabs handle large text

How Has This Been Tested?

Checklist

• You have a descriptive commit message with a short title (first line, max 50 chars).
• You have commented your code, particularly in hard-to-understand areas
• You have performed a self-review of your own code
• UI changes: include screenshots of all affected screens (in particular showing any new or changed strings)
• UI Changes: You have tested your change using the Google Accessibility Scanner

[david-allison]

@ZornHadNoChoice FYI

[github-actions]

Snapshot diff report vs main. Open screenshot-diff for diffs.

• ChangeNoteTypeDialogScreenshotTest: 26 changes

All 26 changed screenshots

ChangeNoteTypeDialogScreenshotTest

• desktop_fields_fit_viewport_compare.png
• desktop_gesture_navigation_compare.png
• desktop_landscape_compare.png
• desktop_long_note_type_names_large_text_landscape_compare.png
• desktop_long_note_type_names_large_text_narrow_portrait_compare.png
• desktop_many_fields_large_text_landscape_compare.png
• desktop_many_fields_scrolled_to_bottom_compare.png
• desktop_many_templates_large_text_landscape_compare.png
• desktop_many_templates_scrolled_to_bottom_compare.png
• desktop_portrait_compare.png
• desktop_portrait_cutout_compare.png
• desktop_templates_fit_viewport_compare.png
• desktop_templates_tab_large_text_compare.png
• fields_fit_viewport_compare.png
• gesture_navigation_compare.png
• landscape_compare.png
• long_note_type_names_large_text_landscape_compare.png
• long_note_type_names_large_text_narrow_portrait_compare.png
• many_fields_large_text_landscape_compare.png
• many_fields_scrolled_to_bottom_compare.png
• many_templates_large_text_landscape_compare.png
• many_templates_scrolled_to_bottom_compare.png
• portrait_compare.png
• portrait_cutout_compare.png
• templates_fit_viewport_compare.png
• templates_tab_large_text_compare.png

[ZornHadNoChoice]

Some ideas:

• The little downwards arrow takes up a lot of space.
• In practice, it's more common to have just one of the two note types with a long name. (e.g. Basic → Basic (and reversed card)). Maybe we can make the boxes fit to the text. The only downside is losing symmetry.
• We have both text "From"/"To" and an arrow. We can also sacrifice one of them to save space.

[david-allison]

@ZornHadNoChoice thanks! Do you feel this can be merged as an incremental improvement?

The little downwards arrow takes up a lot of space.

Absolutely!

---

I think we should move the others to an issue.

• Hiding From/to seems sensible if size is limited.

Removing symmetry: I think this would work, but it feels like overloading this with complexity

[ZornHadNoChoice]

Do you feel this can be merged as an incremental improvement?

Of course!