va-text-input error state looses red bar at mobile sizes

[brianseek]

Bug Report

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

What happened

When using vads-l-grid-container as a wrapper there is not enough padding to show the red error bar for va-text-input at mobile sizes. This is because the red bar renders in negative space relative to the components container. The padding at mobile sizes with vads-l-grid-container is 1.5rem which computes to 15px for us. There needs to be at least 20px of padding for the red bar to show at the edge of the screen.

Screenshot gif of current state:

What I expected to happen

I would expect for the component to not utilize negative space, because this could cause issues in other layout scenarios as well. At the very least it should work within mobile containers.

Screenshot of minimum expected behavior:

Screenshot of ideal behavior (in my opinion):

In USWDS the error bar indents in for mobile screen sizes:

Reproducing

• Formation version: ?
• Device: Macbook
• Browser: chrome, firefox

Steps to reproduce:

1. Create a div with this class vads-l-grid-container
2. Add a form with the va-text-input component
3. Set screen size to small mobile device ~320px
4. Put the text input in an error state

[jamigibbs]

I tested this in staging and it appears that the issue was resolved as part of https://github.com/department-of-veterans-affairs/component-library/pull/501

https://staging.va.gov/profile/contact-information