Ion-select-option text wrap not working - truncated with eclipses

In my ionic 6.20.1 and Angular 15.2.7 I have an ion-select element with multiple ion-select-option items, some of which have long text.

The text in all those ion-select-option items is truncated with three dots.
I want to wrap the text.

In the chrome dev console I can see the culprit, coming from:

.item .sc-ion-label-ios-h {
   white-space: nowrap;
}

When I disable this - the wrap works fine.
Even when I add to the ion-label element:
white-space: normal !important;
It wraps perfectly.

However, when I code this to the page css file on the ion-label class - it does not work.

I tried many thing - nothing works!

This is html part:

<ion-radio-group>
...
...
...

<ion-item lines="none" class="recovery-option-item">
              <ion-label color="primary" class="ion-text-wrap">Recover with a security question</ion-label>              
              <ion-radio slot="start" name="question" value="question" 
                color="primary"></ion-radio>              
</ion-item>

<div *ngIf="recoveryOptionSelected==2" class="recovery-option-body">
              <ion-item lines="none">
                <ion-badge color="medium" disabled="true">Least secured</ion-badge>            
              </ion-item>
              <ion-item lines="none" class="input-item item-label-floating">
                <ion-label position="floating">My question</ion-label>
                <ion-select formControlName="recovery_question" placeholder="Select your recovery question" interface="popover" class="ion-text-wrap" (ionChange)="onRecoveryQuestionChange($event)"
                  cancelText="Cancel" okText="OK">
                  
                    <ion-select-option *ngFor="let item of recoveryQuestions" [value]="item.index" class="alert-radio-label ion-text-wrap">
                      <ion-label class="recovery-option-label ion-text-wrap">{{item.question}}</ion-label>
                    </ion-select-option>
                  
                </ion-select>                
              </ion-item>
              <ion-item lines="none" class="input-item item-label-floating">            
                <ion-input label="My answer is..." labelPlacement="floating" type="text" formControlName="recovery_answer" clearInput></ion-input>
              </ion-item>                   
            </div>
</ion-radio-group>

I tried all of these in the global.scss:

.alert-radio-label.sc-ion-alert-md,
 .alert-radio-label.sc-ion-alert-ios {
    white-space: normal !important;
 }
 
 
 .alert-tappable.alert-radio {
    height: auto !important;
    contain: content !important;
 }
 
 .item.sc-ion-label-md-h, .item .sc-ion-label-md-h{
    white-space: normal !important;
}

.sc-ion-label-md-h{
    white-space: normal !important;
}

.alert-checkbox-label{
    white-space: normal !important;
  }

  .alert-radio-label{
    white-space: normal !important;
  }
  
.alert-tappable.sc-ion-alert-md,
.alert-tappable.sc-ion-alert-ios {
    height: initial !important;
    contain: initial !important;
  }

.alert-ios .alert-radio-label {
    white-space: pre-line !important;
}
.alert-md .alert-radio-label {
    white-space: pre-line !important;
}
.alert-wp .alert-radio-label {
    white-space: pre-line !important;
}

And these in the page scss:

.alert-ios .alert-radio-label{
  white-space: pre-line !important;
  }
  
.alert-md .alert-radio-label{
  white-space: pre-line !important;
  }
  
.alert-wp .alert-radio-label{
  white-space: pre-line !important;
  }

.recovery-option-label,
.item .sc-ion-label-ios-h,
.item .sc-ion-label-md-h {
    white-space: normal !important;
  }

I am really stuck for hours on this.
Any pointers?
Thanks!