Ionic 4 / Angular - validation highlight extends past the native input field

When adding user input to an input form of a set width, the underline extends beyond the bounds of the input.

Given the following code:

<ion-list lines="none">
  <ion-item>
     <ion-label color="medium" position="floating">Username</ion-label>
     <ion-input type="text" formControlName="username" autocomplete="username"></ion-input>
          </ion-item>
        <ion-text
            color="danger"
            [hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched"
          >
            <span padding>Valid email is required</span>
        </ion-text>
        <ion-item>
          <ion-label color="medium" position="floating">Password</ion-label>
          <ion-input type="password" formControlName="password" autocomplete="current-password"></ion-input>
        </ion-item>
        <ion-text
            color="danger"
            [hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched"
          >
            <span padding translate>Password is required</span>
        </ion-text>
        <a href="/login/forgot" class="forgot-password ion-float-right">
            [Forgot Your Password?]
        </a>
     </ion-list>

Additionally, when I tab onto a field, the INPUT covers the entire ion-item field, rather than the ion-input field, as shown below:

I've tried a various set of changes to the css with no great success. Via inspector, I am able to get rid of the issue by changing the --inset-padding-end variable to 0, but I have not found out how to change / set that globally?

Are there any quick-fixes for this that anybody knows of? This error is especially bad-looking when the ion-list is set to "inset", as shown below:

from Ionic 4 / Angular - validation highlight extends past the native input field