bug: ion-note does not center in ion-item in Angular18/Ionic 8 app

[donnydg4]

Describe the Bug

ion-note does not center in my ion-item. I have tried what I know - I have no global css variables for it. I don't know what's going wrong:

Expected Behavior

ion-note should properly align like in the stackblitz: https://stackblitz.com/edit/angular-4fnrmj?file=src%2Fapp%2Fexample.component.html

Steps to Reproduce

I copied over the code from the Ionic stackblitz. I pasted it into my project and imported everything. I ran the code and it doesn't align properly

Screenshots

No response

Operating System

Windows 11

Browser

Chrome/Edge

Version

Whatever the newest is

Additional Information

Here is my code: ` <ion-item [button]="true" lines="none">

1

          <ion-label>
            <h2>H2 Heading</h2>
            <p>Paragraph</p>
          </ion-label>
          <ion-note slot="end">6:11</ion-note>
        </ion-item>
        <ion-item lines="none">
          <ion-note slot="start">1</ion-note>
          <ion-label>
            <h2>H2 Heading</h2>
            <p>Paragraph</p>
          </ion-label>
          <ion-note slot="end">6:11</ion-note>
        </ion-item>
      </ion-card-content>

dependencies: "dependencies": { "@angular/animations": "^18.2.0", "@angular/cdk": "^18.2.0", "@angular/common": "^18.2.0", "@angular/core": "^18.2.0", "@angular/forms": "^18.2.0", "@angular/material": "^18.2.0", "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", "@capacitor/clipboard": "^6.0.0", "@ionic/angular": "8.4.0", "@ionic/core": "8.4.0", "express": "^4.18.2", "howler": "^2.2.4", "ionicons": "^7.4.0", "ngx-pagination": "^6.0.3", "path": "^0.12.7", "rxjs": "~7.8.0", "swiper": "^9.4.1", "tslib": "^2.2.0", "zone.js": "~0.14.10" }, `