MOBILE-3063 reading-mode: Auto height

src/core/directives/reading-mode.ts

@@ -193,7 +193,7 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
 
         const exit = await CoreModals.openModal({
             component: CoreReadingModeSettingsModalComponent,
-            initialBreakpoint: 0.5,
+            initialBreakpoint: 1,
             breakpoints: [0, 1],
             cssClass: 'core-modal-auto-height',
         });

src/core/features/viewer/components/reading-mode-settings/reading-mode-settings.html

@@ -7,7 +7,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<div class="content-auto-height">
     <ion-item lines="none">
         <ion-label class="flex-row">
             <div id="readingmode-range-label">{{ 'core.settings.fontsize' | translate }}</div>
@@ -29,7 +29,7 @@
     </ion-item>
     <ion-item>
         <ion-label>
-            Theme
+            {{ 'core.viewer.theme' | translate }}
         </ion-label>
     </ion-item>
     <ion-radio-group [(ngModel)]="settings.theme" (ionChange)="onSettingChange()">
@@ -50,4 +50,4 @@
         <ion-icon name="fas-book-open-reader" slot="start" aria-hidden="true" class="icon-slash" />
         {{ 'core.viewer.exitreadingmode' | translate }}
     </ion-button>
-</ion-content>
+</div>

src/core/features/viewer/lang.json

@@ -10,5 +10,6 @@
     "readingthemehcm": "High contrast",
     "readingthemelight": "Light",
     "readingthemesepia": "Sepia",
-    "showmedia": "Show images and media"
+    "showmedia": "Show images and media",
+    "theme": "Theme"
 }

src/theme/components/ion-modal.scss

@@ -124,17 +124,12 @@ ion-modal {
     }
 
     &.core-modal-auto-height {
+        --height: auto;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
 
-        &::part(content) {
-            position: relative;
-            display: block;
-            contain: content;
-        }
-
-        .inner-content {
+        .content-auto-height {
             max-height: 80vh;
             overflow: auto;
         }