[Bug] Alert Box width setting

[Mottie]

Bug Report

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

What happened

During a QA review, an indented alert box was found to extend off screen in both IE11 and mobile devices (ticket).

While troubleshooting, I found that the culprit is the usa-alert definition (source code):

.usa-alert {
  background: none;
  background-color: #f1f1f1;
  border-left-style: solid;
  border-left-width: 10px;
  display: table;
  padding: 3.2rem 6.4rem 3.2rem 2.4rem;
  width: 100%;
}

The width: 100% setting is causing the alert to overflow beyond its wrapper boundary.

Screenshots from QA ticket

 

What I expected to happen

Alert box width should not extend beyond viewport

Expected alert box size


Reproducing

• Formation version: 6.10.3
• Devices: Windows 10 PC, Samsung S9
• Browsers: IE11, Samsung Internet
• Test User (if applicable): vetsgov+test236@id.me

Steps to reproduce:

1. Go to https://staging.va.gov/decision-reviews/higher-level-review/request-higher-level-review-form-20-0996/introduction
2. IF Is this the form I need? section (eligibility wizard) is displayed, click Disability..., No, then Request.... Browser replaces widget content with sign-in alert and regular intro content.
3. In sign-in alert, click Sign in..., and sign-in as vetsgov+test236@id.me (Charde). [See this doc for credentials.]
4. IF application-in-progress alert is displayed, click Continue....
5. Click Back or Continue to go to Step 2 of 4: Contested issues page.
6. Select (check) If possible... same office checkbox -- checkbox should be filled-in -- and observe that We will try... alert-box extends to right-hand-side page-edge.

Possible Fix

• Removing the width or setting its value to auto will fix the problem
• Other AlertBox issues (for another ticket?):
  • Mobile design: remove excessive padding on narrow screens; move icon?
  • Switch to use flexbox instead of display: table

[humancompanion-usds]

This will get fixed when we adopt the USWDS Alert component, which is imminent. It does not set a width. It also solves for the excessive padding at mobile viewport widths. It does not use flexbox but, it doesn't use table for display either.

[Mottie]

@caw310 I think we can close this ticket now