From 552a6dcf94f23ca9b8a81c16d385cd57ffa6c083 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 10 May 2024 14:36:23 +0200
Subject: [PATCH] MOBILE-4470 feedback: Fix text wrap on ion-item

---
 src/addons/mod/feedback/pages/form/form.html |  6 ++---
 src/theme/components/ion-item.scss           | 27 +++++++++-----------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index e03f78b9b..ba9d50ffc 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -69,7 +69,7 @@
 
                         <ion-radio-group *ngIf="item.templateName === 'multichoice-r'" [(ngModel)]="item.value" [required]="item.required"
                             name="{{item.typ}}_{{item.id}}">
-                            <ion-item *ngFor="let option of item.choices" class="ion-text-wrap">
+                            <ion-item *ngFor="let option of item.choices" class="ion-text-wrap" lines="none">
                                 <ion-radio [value]="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
@@ -80,7 +80,7 @@
                         <ng-container *ngIf="item.templateName === 'multichoice-c'">
                             <ion-item *ngFor="let option of item.choices">
                                 <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
-                                    value="option.value">
+                                    value="option.value" lines="none">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                 </ion-checkbox>
@@ -156,7 +156,7 @@
 
 
 <ng-template #label let-item="item">
-    <p *ngIf="item.name" [core-mark-required]="item.required" [slot]="item.slottedLabel ? 'label' : undefined">
+    <p class="ion-text-wrap" *ngIf="item.name" [core-mark-required]="item.required" [slot]="item.slottedLabel ? 'label' : undefined">
         <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
         <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module" [contextInstanceId]="cmId"
             [courseId]="courseId" [wsNotFiltered]="true" />
diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss
index a6c4a2ce4..8e3ca0b5e 100644
--- a/src/theme/components/ion-item.scss
+++ b/src/theme/components/ion-item.scss
@@ -190,10 +190,12 @@ ion-item .in-item {
 // Correctly inherit ion-text-wrap onto labels.
 .item > ion-label,
 .fake-ion-item,
-.item.ion-text-wrap > ion-checkbox::part(label),
-ion-checkbox.ion-text-wrap::part(label)
-.item.ion-text-wrap ion-toggle::part(label),
-ion-toggle.ion-text-wrap::part(label) {
+.item > ion-checkbox::part(label),
+ion-checkbox::part(label),
+.item ion-toggle::part(label),
+ion-toggle::part(label),
+.item > ion-input > label,
+ion-input > label {
     core-format-text,
     core-format-text > *:not(pre) {
         white-space: nowrap;
@@ -207,7 +209,12 @@ ion-item > .in-item,
 .fake-ion-item.ion-text-wrap,
 .item.ion-text-wrap > ion-checkbox::part(label),
 ion-checkbox.ion-text-wrap::part(label),
-ion-toggle.ion-text-wrap::part(label) {
+ion-toggle.ion-text-wrap::part(label),
+.item.ion-text-wrap > ion-input > label,
+ion-input.ion-text-wrap > label {
+    white-space: normal;
+    overflow: inherit;
+
     core-format-text,
     core-format-text > *:not(pre) {
         white-space: normal;
@@ -215,16 +222,6 @@ ion-toggle.ion-text-wrap::part(label) {
     }
 }
 
-.item.ion-text-wrap > ion-label,
-.item.ion-text-wrap ion-checkbox::part(label),
-ion-checkbox.ion-text-wrap::part(label),
-.item.ion-text-wrap ion-radio::part(label),
-ion-radio.ion-text-wrap::part(label),
-.item.ion-text-wrap ion-toggle::part(label),
-ion-toggle.ion-text-wrap::part(label) {
-    white-space: normal !important;
-}
-
 ion-item .core-input-errors-wrapper {
     width: 100%;
 }