ArrayBuilder styling issues

[Midge-dev]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Multiple styling issues found in the Array builder

1. Summary page item updated alert: Not centered horizontally
   

2. Nav buttons: Not showing up as va-buttons
   

3. Summary page item card title: Long names or titles don't wrap or resize
   

4. List & Loop Cancel button: Line spacing for longer titles is off
   

5. Summary page for non-required list and loop: When the list is empty, there is a lot of white space. This is normally where a card would go
   

Reproducing

• CSS Library version:
• Device: (e.g. iPhone 8, Macbook)
• Browser: (e.g. Firefox, IE 11)

Steps to reproduce:

1. Set up the Array builder pattern normally (non-required)
2. Add long titles, or zoom to 400%

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

These issues were noticed by our designers and QA auditors during review. We wanted to make Platform aware of these styling issues.