bug: v7, floating/stacked label select popover does not take up full width

[farisfaisalthena]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

Using interface="popover" will result in the options not taking the whole width compared to previous version (V6)

Expected Behavior

It should take the while width

Steps to Reproduce

Copy the following code

In HTML

 <ion-item lines="inset" mode="md">
          <ion-select justify="space-between" label="Type" labelPlacement="stacked" interface="popover"
              [(ngModel)]="filterObject.type">
                    <ion-select-option *ngFor="let r of typeOpts" [value]="r">
                      {{ r }}
                    </ion-select-option>
                  </ion-select>
                </ion-item>

In TS

typeOpts = ['Battle Royale', 'Late Game'];
  filterObject = {
    type: 'Battle Royale',
    showScoring: false
  }

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 15.2.1
@angular-devkit/schematics : 15.2.1
@angular/cli : 15.2.1
@ionic/angular-toolkit : 8.0.0

Capacitor:

Capacitor CLI : 4.7.0
@capacitor/android : 4.7.0
@capacitor/core : 4.7.0
@capacitor/ios : 4.7.0

Utility:

cordova-res : 0.15.4
native-run (update available: 1.7.1) : 1.6.0

System:

NodeJS : v16.17.0 (/usr/local/bin/node)
npm : 8.15.0
OS : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the report. I'm not able to reproduce the expected behavior in Ionic 6. The select popover does not take up the full width here: https://codepen.io/liamdebeasi/pen/poOPVQy?editors=1010.

Can you provide a reproduction app I can test with?

[liamdebeasi]

Actually it looks like this full width behavior only activates with a floating/stacked label. Let me do some digging and see if I can figure out what is causing the issue.

[liamdebeasi]

Here is a dev build if you are interested in testing the proposed fix:

npm install @ionic/angular@7.0.0-dev.11677855442.121bf722

[liamdebeasi]

Thanks for the issue. This has been resolved via #26907, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if you run into any issues.