diff --git a/src/addons/badges/pages/issued-badge/issued-badge.html b/src/addons/badges/pages/issued-badge/issued-badge.html
index fde877cb2..5f233087f 100644
--- a/src/addons/badges/pages/issued-badge/issued-badge.html
+++ b/src/addons/badges/pages/issued-badge/issued-badge.html
@@ -9,11 +9,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="badges">
+<ion-content [core-swipe-navigation]="badges" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="badgeLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="badgeLoaded">
         <ion-item-group *ngIf="badge">
             <ion-item class="ion-text-wrap ion-text-center">
                 <ion-label>
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index a22f3d549..b4f800003 100644
--- a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <ion-item class="ion-text-wrap" *ngFor="let entry of entries" detail="true" button (click)="gotoCoureListModType(entry)">
         <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false">
         </core-mod-icon>
diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index 8131987f4..3718ea8e7 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -20,7 +20,7 @@
         </div>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
 
     <ion-row class="ion-justify-content-between ion-align-items-center addon-block-myoverview-filter" *ngIf="hasCourses">
         <ion-col size="auto" *ngIf="filters.enabled">
diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 93b5c04f7..d4b28ea36 100644
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -7,7 +7,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
         [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index cacc174c9..bdab2ad19 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -7,7 +7,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <div [id]="scrollElementId" [hidden]="!items || items.length === 0" class="core-horizontal-scroll"
         (scroll)="scrollControls.updateScrollPosition()">
         <div *ngIf="items" (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
diff --git a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index fa38b0bc3..11bc7d2b8 100644
--- a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper">
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
             <ion-label>
diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 02398a668..88e7fdfce 100644
--- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -7,7 +7,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
         [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
index b652282e9..949692cb2 100644
--- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center">
         <ion-col size="auto" class="ion-no-padding">
             <core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
@@ -57,11 +57,11 @@
         </ion-col>
     </ion-row>
 
-    <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
+    <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'">
         <addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"
             [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
     </core-loading>
-    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" [fullscreen]="false" class="safe-area-page">
+    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'">
         <ng-container *ngFor="let course of timelineCourses.courses">
             <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMore(course)"
                 [course]="course" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index d1a56b3c0..06d703932 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -11,11 +11,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-item *ngIf="showMyEntriesToggle">
             <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
             <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)"></ion-toggle>
diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index 39466f120..21d0bc83d 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -7,7 +7,7 @@
     </core-context-menu>
 </core-navbar-buttons>
 
-<core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-full-height">
+<core-loading [hideUntil]="loaded">
     <div class="core-swipe-slides-container">
         <!-- Period name and arrows to navigate. -->
         <ion-grid class="ion-no-padding addon-calendar-navigation">
diff --git a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
index e5a295569..ef63f7816 100644
--- a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
+++ b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
@@ -1,8 +1,8 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar" [message]="'addon.calendar.noevents' | translate">
     </core-empty-box>
 
-    <ion-list *ngIf="filteredEvents && filteredEvents.length" class="ion-no-margin">
+    <ion-list *ngIf="filteredEvents && filteredEvents.length" class="list-item-limited-width">
         <ng-container *ngFor="let event of filteredEvents">
             <ion-card>
                 <ion-item class="ion-text-wrap addon-calendar-event" [attr.aria-label]="event.name" (click)="eventClicked(event)" button
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 67bdbd8b1..fba17f45a 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -27,7 +27,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded" class="core-loading-full-height">
+    <core-loading [hideUntil]="loaded">
         <div class="core-swipe-slides-container">
             <!-- Period name and arrows to navigate. -->
             <ion-grid class="ion-no-padding safe-area-padding">
@@ -50,9 +50,9 @@
 
             <core-swipe-slides [manager]="manager">
                 <ng-template let-day="item">
-                    <core-loading [hideUntil]="day.loaded" class="safe-area-padding list-item-limited-width">
+                    <core-loading [hideUntil]="day.loaded">
                         <!-- There is data to be synchronized -->
-                        <ion-card class="core-warning-card" *ngIf="day.hasOffline">
+                        <ion-card class="core-warning-card list-item-limited-width" *ngIf="day.hasOffline">
                             <ion-item>
                                 <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
                                 <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
@@ -63,7 +63,7 @@
                             [message]="'addon.calendar.noevents' | translate">
                         </core-empty-box>
 
-                        <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="ion-no-margin">
+                        <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="list-item-limited-width">
                             <ng-container *ngFor="let event of day.filteredEvents">
                                 <ion-card>
                                     <ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html
index 194bef3ca..f8a03e245 100644
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@@ -10,11 +10,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="competencies">
+<ion-content [core-swipe-navigation]="competencies" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>
diff --git a/src/addons/competency/pages/competencysummary/competencysummary.html b/src/addons/competency/pages/competencysummary/competencysummary.html
index b5314d334..57d59228e 100644
--- a/src/addons/competency/pages/competencysummary/competencysummary.html
+++ b/src/addons/competency/pages/competencysummary/competencysummary.html
@@ -10,11 +10,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="competency">
             <ion-item class="ion-text-wrap" *ngIf="competency.competency.description">
                 <ion-label>
diff --git a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
index 6ca87f8af..daea95879 100644
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshCourseCompetencies($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencies.loaded">
         <ion-card *ngIf="!user && courseCompetencies && courseCompetencies.statistics.competencycount > 0">
             <ng-container *ngIf="courseCompetencies.cangradecompetencies">
                 <ion-item class="ion-text-wrap" *ngIf="courseCompetencies.settings.pushratingstouserplans">
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index 1f2275c70..055972527 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="plans">
+<ion-content [core-swipe-navigation]="plans" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshLearningPlan($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencies.loaded">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <ion-label>
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index 2eb15f375..924b36f7b 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -57,8 +57,8 @@
         </core-context-menu>
     </core-navbar-buttons>
 </ion-header>
-<ion-content class="has-footer" (ionScroll)="scrollFunction()">
-    <core-loading [hideUntil]="loaded" class="safe-area-padding-horizontal">
+<ion-content (ionScroll)="scrollFunction()">
+    <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError">
         </core-infinite-loading>
diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index d5aef9734..c58552c55 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index 5da98c6d8..7cd548372 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -1,316 +1,92 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
+    <div class="list-item-limited-width">
+        <!-- User and status of the submission. -->
+        <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
+            [attr.aria-label]="user!.fullname">
+            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
+            <ion-label>
+                <h2>{{ user!.fullname }}</h2>
+                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+            </ion-label>
+        </ion-item>
 
-    <!-- User and status of the submission. -->
-    <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
-        [attr.aria-label]="user!.fullname">
-        <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
-        <ion-label>
-            <h2>{{ user!.fullname }}</h2>
-            <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
-        </ion-label>
-    </ion-item>
+        <!-- Status of the submission if user is blinded. -->
+        <ion-item class="ion-text-wrap" *ngIf="blindMarking && !user">
+            <ion-label>
+                <h2>{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</h2>
+                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+            </ion-label>
+        </ion-item>
 
-    <!-- Status of the submission if user is blinded. -->
-    <ion-item class="ion-text-wrap" *ngIf="blindMarking && !user">
-        <ion-label>
-            <h2>{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</h2>
-            <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
-        </ion-label>
-    </ion-item>
+        <!-- Status of the submission in the rest of cases. -->
+        <ion-item class="ion-text-wrap" *ngIf="(blindMarking && user) || (!blindMarking && !user)">
+            <ion-label>
+                <h2>{{ 'addon.mod_assign.submissionstatus' | translate }}</h2>
+                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+            </ion-label>
+        </ion-item>
 
-    <!-- Status of the submission in the rest of cases. -->
-    <ion-item class="ion-text-wrap" *ngIf="(blindMarking && user) || (!blindMarking && !user)">
-        <ion-label>
-            <h2>{{ 'addon.mod_assign.submissionstatus' | translate }}</h2>
-            <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
-        </ion-label>
-    </ion-item>
+        <!-- Tabs: see the submission or grade it. -->
+        <core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded" parentScrollable="true" (ionChange)="tabSelected($event)">
+            <!-- View the submission tab. -->
+            <core-tab [title]="'addon.mod_assign.submission' | translate" id="submission">
+                <ng-template>
+                    <addon-mod-assign-submission-plugin *ngFor="let plugin of submissionPlugins" [assign]="assign"
+                        [submission]="userSubmission" [plugin]="plugin">
+                    </addon-mod-assign-submission-plugin>
 
-    <!-- Tabs: see the submission or grade it. -->
-    <core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded" parentScrollable="true" (ionChange)="tabSelected($event)">
-        <!-- View the submission tab. -->
-        <core-tab [title]="'addon.mod_assign.submission' | translate" id="submission">
-            <ng-template>
-                <addon-mod-assign-submission-plugin *ngFor="let plugin of submissionPlugins" [assign]="assign" [submission]="userSubmission"
-                    [plugin]="plugin">
-                </addon-mod-assign-submission-plugin>
+                    <!-- Render some data about the submission. -->
+                    <ion-item class="ion-text-wrap"
+                        *ngIf="userSubmission && userSubmission!.status != statusNew && userSubmission!.timemodified">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.timemodified' | translate }}</h2>
+                            <p>{{ userSubmission!.timemodified * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
 
-                <!-- Render some data about the submission. -->
-                <ion-item class="ion-text-wrap"
-                    *ngIf="userSubmission && userSubmission!.status != statusNew && userSubmission!.timemodified">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.timemodified' | translate }}</h2>
-                        <p>{{ userSubmission!.timemodified * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
+                    <ion-item class="ion-text-wrap" *ngIf="timeRemaining" [ngClass]="[timeRemainingClass]">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.timeremaining' | translate }}</h2>
+                            <p [innerHTML]="timeRemaining"></p>
+                        </ion-label>
+                    </ion-item>
 
-                <ion-item class="ion-text-wrap" *ngIf="timeRemaining" [ngClass]="[timeRemainingClass]">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.timeremaining' | translate }}</h2>
-                        <p [innerHTML]="timeRemaining"></p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="showDates && fromDate && !isSubmittedForGrading">
-                    <ion-label>
-                        <p *ngIf="assign!.intro"
-                            [innerHTML]="'addon.mod_assign.allowsubmissionsfromdatesummary' | translate: {'$a': fromDate}">
-                        </p>
-                        <p *ngIf="!assign!.intro" [innerHTML]="'addon.mod_assign.allowsubmissionsanddescriptionfromdatesummary' | translate:
+                    <ion-item class="ion-text-wrap" *ngIf="showDates && fromDate && !isSubmittedForGrading">
+                        <ion-label>
+                            <p *ngIf="assign!.intro"
+                                [innerHTML]="'addon.mod_assign.allowsubmissionsfromdatesummary' | translate: {'$a': fromDate}">
+                            </p>
+                            <p *ngIf="!assign!.intro" [innerHTML]="'addon.mod_assign.allowsubmissionsanddescriptionfromdatesummary' | translate:
                                 {'$a': fromDate}">
-                        </p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="showDates && assign!.duedate && !isSubmittedForGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.duedate' | translate }}</h2>
-                        <p *ngIf="assign!.duedate">{{ assign!.duedate * 1000 | coreFormatDate }}</p>
-                        <p *ngIf="!assign!.duedate">{{ 'addon.mod_assign.duedateno' | translate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && assign!.cutoffdate && isSubmittedForGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.cutoffdate' | translate }}</h2>
-                        <p>{{ assign!.cutoffdate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && lastAttempt?.extensionduedate && !isSubmittedForGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.extensionduedate' | translate }}</h2>
-                        <p>{{ lastAttempt!.extensionduedate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="currentAttempt && !isGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.attemptnumber' | translate }}</h2>
-                        <p *ngIf="assign!.maxattempts == unlimitedAttempts">
-                            {{ 'addon.mod_assign.outof' | translate :
-                            {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
-                        </p>
-                        <p *ngIf="assign!.maxattempts != unlimitedAttempts">
-                            {{ 'addon.mod_assign.outof' | translate :
-                            {'$a': {'current': currentAttempt, 'total': assign!.maxattempts} } }}
-                        </p>
-                    </ion-label>
-                </ion-item>
-
-                <!-- Add or edit submission. -->
-                <ion-item class="ion-text-wrap" *ngIf="canEdit">
-                    <ion-label>
-                        <div *ngIf="!unsupportedEditPlugins.length && !showErrorStatementEdit">
-                            <!-- If has offline data, show edit. -->
-                            <ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
-                                {{ 'addon.mod_assign.editsubmission' | translate }}
-                            </ion-button>
-                            <!-- If no submission or is new, show add submission. -->
-                            <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
-                                    (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
-                                {{ 'addon.mod_assign.addsubmission' | translate }}
-                            </ion-button>
-                            <!-- If reopened, show addfromprevious and addnewattempt. -->
-                            <ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
-                                <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap" (click)="copyPrevious()">
-                                    {{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
-                                </ion-button>
-                                <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
-                                    {{ 'addon.mod_assign.addnewattempt' | translate }}
-                                </ion-button>
-                            </ng-container>
-                            <!-- Else show editsubmission. -->
-                            <ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline &&
-                                    userSubmission && userSubmission!.status &&
-                                    userSubmission!.status != statusNew &&
-                                    userSubmission!.status != statusReopened" (click)="goToEdit()">
-                                {{ 'addon.mod_assign.editsubmission' | translate }}
-                            </ion-button>
-                        </div>
-                        <div *ngIf="unsupportedEditPlugins && unsupportedEditPlugins.length && !showErrorStatementEdit">
-                            <p class="core-danger-item">{{ 'addon.mod_assign.erroreditpluginsnotsupported' | translate }}</p>
-                            <p class="core-danger-item" *ngFor="let name of unsupportedEditPlugins">{{ name }}</p>
-                        </div>
-                        <div *ngIf="showErrorStatementEdit">
-                            <p class="core-danger-item">{{ 'addon.mod_assign.cannoteditduetostatementsubmission' | translate }}</p>
-                        </div>
-                    </ion-label>
-                </ion-item>
-
-                <!-- Submit for grading form. -->
-                <ng-container *ngIf="canSubmit">
-                    <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
-                        <ion-label>
-                            <core-format-text [text]="submissionStatement" [filter]="false"></core-format-text>
-                        </ion-label>
-                        <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement">
-                        </ion-checkbox>
-                    </ion-item>
-                    <!-- Submit button. -->
-                    <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
-                        <ion-label>
-                            <ion-button expand="block" class="ion-text-wrap" (click)="submitForGrading(acceptStatement)">
-                                {{ 'addon.mod_assign.submitassignment' | translate }}
-                            </ion-button>
-                            <p>{{ 'addon.mod_assign.submitassignment_help' | translate }}</p>
-                        </ion-label>
-                    </ion-item>
-                    <!-- Error because we lack submissions statement. -->
-                    <ion-item class="ion-text-wrap" *ngIf="showErrorStatementSubmit">
-                        <ion-label>
-                            <p class="core-danger-item">
-                                {{ 'addon.mod_assign.cannotsubmitduetostatementsubmission' | translate }}
                             </p>
                         </ion-label>
                     </ion-item>
-                </ng-container>
 
-                <!-- Team members that need to submit it too. -->
-                <ion-item-divider class="ion-text-wrap" *ngIf="membersToSubmit && membersToSubmit.length > 0">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
-                    </ion-label>
-                </ion-item-divider>
-                <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && !blindMarking">
-                    <ng-container *ngFor="let user of membersToSubmit">
-                        <ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
-                            [attr.aria-label]="user.fullname">
-                            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
-                            <ion-label>
-                                <h2>{{ user.fullname }}</h2>
-                            </ion-label>
-                        </ion-item>
-                    </ng-container>
-                </ng-container>
-                <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && blindMarking">
-                    <ng-container *ngFor="let blindId of membersToSubmitBlind">
-                        <ion-item class="ion-text-wrap">
-                            <ion-label>{{ 'addon.mod_assign.hiddenuser' | translate }} {{ blindId }}</ion-label>
-                        </ion-item>
-                    </ng-container>
-                </ng-container>
-
-                <!-- Submission is locked. -->
-                <ion-item class="ion-text-wrap" *ngIf="lastAttempt?.locked">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.submissionslocked' | translate }}</h2>
-                    </ion-label>
-                </ion-item>
-
-                <!-- Editing status. -->
-                <ion-item class="ion-text-wrap" *ngIf="lastAttempt && isSubmittedForGrading && lastAttempt!.caneditowner !== undefined"
-                    [ngClass]="{submissioneditable: lastAttempt!.caneditowner, submissionnoteditable: !lastAttempt!.caneditowner}">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.editingstatus' | translate }}</h2>
-                        <p *ngIf="lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissioneditable' | translate }}</p>
-                        <p *ngIf="!lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissionnoteditable' | translate }}</p>
-                    </ion-label>
-                </ion-item>
-            </ng-template>
-        </core-tab>
-
-        <!-- Grade the submission tab. -->
-        <core-tab [title]="'addon.mod_assign.grade' | translate" *ngIf="feedback || isGrading" id="grade">
-            <ng-template>
-                <!-- Current grade if method is advanced. -->
-                <ion-item class="ion-text-wrap core-grading-summary"
-                    *ngIf="feedback?.gradefordisplay && (!isGrading || grade.method != 'simple')">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
-                        <p>
-                            <core-format-text [text]="feedback!.gradefordisplay" [filter]="false"></core-format-text>
-                        </p>
-                    </ion-label>
-                    <ion-button slot="end" *ngIf="feedback!.advancedgrade" (click)="showAdvancedGrade()"
-                        [attr.aria-label]="'core.showadvanced' |translate">
-                        <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
-                    </ion-button>
-                </ion-item>
-
-                <ng-container *ngIf="isGrading">
-                    <!-- Numeric grade.
-                        Use a text input because otherwise we cannot readthe value if it has an invalid character. -->
-                    <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && !grade.scale">
-                        <ion-label position="stacked">
-                            <h2>{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</h2>
-                        </ion-label>
-                        <ion-input *ngIf="!grade.disabled" type="text" [(ngModel)]="grade.grade" min="0" [max]="gradeInfo!.grade"
-                            [lang]="grade.lang">
-                        </ion-input>
-                        <p *ngIf="grade.disabled">{{ 'addon.mod_assign.gradelocked' | translate }}</p>
-                    </ion-item>
-
-                    <!-- Grade using a scale. -->
-                    <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && grade.scale">
+                    <ion-item class="ion-text-wrap" *ngIf="showDates && assign!.duedate && !isSubmittedForGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.grade' | translate }}</h2>
-                        </ion-label>
-                        <ion-select [(ngModel)]="grade.grade" interface="action-sheet" [disabled]="grade.disabled"
-                            [interfaceOptions]="{header: 'addon.mod_assign.grade' | translate}">
-                            <ion-select-option *ngFor="let grade of grade.scale" [value]="grade.value">
-                                {{grade.label}}
-                            </ion-select-option>
-                        </ion-select>
-                    </ion-item>
-
-                    <!-- Outcomes. -->
-                    <ion-item class="ion-text-wrap" *ngFor="let outcome of gradeInfo!.outcomes">
-                        <ion-label>
-                            <h2>{{ outcome.name }}</h2>
-                        </ion-label>
-                        <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId" interface="action-sheet"
-                            [disabled]="gradeInfo!.disabled" [interfaceOptions]="{header: outcome.name }">
-                            <ion-select-option *ngFor="let grade of outcome.options" [value]="grade.value">
-                                {{grade.label}}
-                            </ion-select-option>
-                        </ion-select>
-                        <p *ngIf="!canSaveGrades || !outcome.itemNumber">{{ outcome.selected }}</p>
-                    </ion-item>
-
-                    <!-- Gradebook grade for simple grading. -->
-                    <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple'">
-                        <ion-label>
-                            <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
-                            <p *ngIf="grade.gradebookGrade && !grade.scale">
-                                {{ grade.gradebookGrade }}
-                            </p>
-                            <p *ngIf="grade.gradebookGrade && grade.scale">
-                                {{ grade.scale[grade.gradebookGrade].label }}
-                            </p>
-                            <p *ngIf="!grade.gradebookGrade">-</p>
+                            <h2>{{ 'addon.mod_assign.duedate' | translate }}</h2>
+                            <p *ngIf="assign!.duedate">{{ assign!.duedate * 1000 | coreFormatDate }}</p>
+                            <p *ngIf="!assign!.duedate">{{ 'addon.mod_assign.duedateno' | translate }}</p>
                         </ion-label>
                     </ion-item>
-                </ng-container>
 
-                <ng-container *ngIf="feedback">
-                    <addon-mod-assign-feedback-plugin *ngFor="let plugin of feedback.plugins" [assign]="assign"
-                        [submission]="userSubmission" [userId]="submitId" [plugin]="plugin" [canEdit]="canSaveGrades">
-                    </addon-mod-assign-feedback-plugin>
-                </ng-container>
-
-                <!-- Workflow status. -->
-                <ion-item class="ion-text-wrap" *ngIf="workflowStatusTranslationId">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.markingworkflowstate' | translate }}</h2>
-                        <p>{{ workflowStatusTranslationId | translate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <!--- Apply grade to all team members. -->
-                <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</h2>
-                        <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
-                    </ion-label>
-                    <ion-toggle [(ngModel)]="grade.applyToAll"></ion-toggle>
-                </ion-item>
-
-                <!-- Attempt status. -->
-                <ng-container *ngIf="isGrading && assign!.attemptreopenmethod != attemptReopenMethodNone">
-                    <ion-item class="ion-text-wrap">
+                    <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && assign!.cutoffdate && isSubmittedForGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
+                            <h2>{{ 'addon.mod_assign.cutoffdate' | translate }}</h2>
+                            <p>{{ assign!.cutoffdate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && lastAttempt?.extensionduedate && !isSubmittedForGrading">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.extensionduedate' | translate }}</h2>
+                            <p>{{ lastAttempt!.extensionduedate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <ion-item class="ion-text-wrap" *ngIf="currentAttempt && !isGrading">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.attemptnumber' | translate }}</h2>
                             <p *ngIf="assign!.maxattempts == unlimitedAttempts">
                                 {{ 'addon.mod_assign.outof' | translate :
                                 {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
@@ -319,53 +95,279 @@
                                 {{ 'addon.mod_assign.outof' | translate :
                                 {'$a': {'current': currentAttempt, 'total': assign!.maxattempts} } }}
                             </p>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Add or edit submission. -->
+                    <ion-item class="ion-text-wrap" *ngIf="canEdit">
+                        <ion-label>
+                            <div *ngIf="!unsupportedEditPlugins.length && !showErrorStatementEdit">
+                                <!-- If has offline data, show edit. -->
+                                <ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
+                                    {{ 'addon.mod_assign.editsubmission' | translate }}
+                                </ion-button>
+                                <!-- If no submission or is new, show add submission. -->
+                                <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
+                                    (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
+                                    {{ 'addon.mod_assign.addsubmission' | translate }}
+                                </ion-button>
+                                <!-- If reopened, show addfromprevious and addnewattempt. -->
+                                <ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
+                                    <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap"
+                                        (click)="copyPrevious()">
+                                        {{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
+                                    </ion-button>
+                                    <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
+                                        {{ 'addon.mod_assign.addnewattempt' | translate }}
+                                    </ion-button>
+                                </ng-container>
+                                <!-- Else show editsubmission. -->
+                                <ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline &&
+                                    userSubmission && userSubmission!.status &&
+                                    userSubmission!.status != statusNew &&
+                                    userSubmission!.status != statusReopened" (click)="goToEdit()">
+                                    {{ 'addon.mod_assign.editsubmission' | translate }}
+                                </ion-button>
+                            </div>
+                            <div *ngIf="unsupportedEditPlugins && unsupportedEditPlugins.length && !showErrorStatementEdit">
+                                <p class="core-danger-item">{{ 'addon.mod_assign.erroreditpluginsnotsupported' | translate }}</p>
+                                <p class="core-danger-item" *ngFor="let name of unsupportedEditPlugins">{{ name }}</p>
+                            </div>
+                            <div *ngIf="showErrorStatementEdit">
+                                <p class="core-danger-item">{{ 'addon.mod_assign.cannoteditduetostatementsubmission' | translate }}</p>
+                            </div>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Submit for grading form. -->
+                    <ng-container *ngIf="canSubmit">
+                        <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
+                            <ion-label>
+                                <core-format-text [text]="submissionStatement" [filter]="false"></core-format-text>
+                            </ion-label>
+                            <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement">
+                            </ion-checkbox>
+                        </ion-item>
+                        <!-- Submit button. -->
+                        <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
+                            <ion-label>
+                                <ion-button expand="block" class="ion-text-wrap" (click)="submitForGrading(acceptStatement)">
+                                    {{ 'addon.mod_assign.submitassignment' | translate }}
+                                </ion-button>
+                                <p>{{ 'addon.mod_assign.submitassignment_help' | translate }}</p>
+                            </ion-label>
+                        </ion-item>
+                        <!-- Error because we lack submissions statement. -->
+                        <ion-item class="ion-text-wrap" *ngIf="showErrorStatementSubmit">
+                            <ion-label>
+                                <p class="core-danger-item">
+                                    {{ 'addon.mod_assign.cannotsubmitduetostatementsubmission' | translate }}
+                                </p>
+                            </ion-label>
+                        </ion-item>
+                    </ng-container>
+
+                    <!-- Team members that need to submit it too. -->
+                    <ion-item-divider class="ion-text-wrap" *ngIf="membersToSubmit && membersToSubmit.length > 0">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
+                        </ion-label>
+                    </ion-item-divider>
+                    <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && !blindMarking">
+                        <ng-container *ngFor="let user of membersToSubmit">
+                            <ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
+                                [attr.aria-label]="user.fullname">
+                                <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
+                                <ion-label>
+                                    <h2>{{ user.fullname }}</h2>
+                                </ion-label>
+                            </ion-item>
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && blindMarking">
+                        <ng-container *ngFor="let blindId of membersToSubmitBlind">
+                            <ion-item class="ion-text-wrap">
+                                <ion-label>{{ 'addon.mod_assign.hiddenuser' | translate }} {{ blindId }}</ion-label>
+                            </ion-item>
+                        </ng-container>
+                    </ng-container>
+
+                    <!-- Submission is locked. -->
+                    <ion-item class="ion-text-wrap" *ngIf="lastAttempt?.locked">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.submissionslocked' | translate }}</h2>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Editing status. -->
+                    <ion-item class="ion-text-wrap" *ngIf="lastAttempt && isSubmittedForGrading && lastAttempt!.caneditowner !== undefined"
+                        [ngClass]="{submissioneditable: lastAttempt!.caneditowner, submissionnoteditable: !lastAttempt!.caneditowner}">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.editingstatus' | translate }}</h2>
+                            <p *ngIf="lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissioneditable' | translate }}</p>
+                            <p *ngIf="!lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissionnoteditable' | translate }}</p>
+                        </ion-label>
+                    </ion-item>
+                </ng-template>
+            </core-tab>
+
+            <!-- Grade the submission tab. -->
+            <core-tab [title]="'addon.mod_assign.grade' | translate" *ngIf="feedback || isGrading" id="grade">
+                <ng-template>
+                    <!-- Current grade if method is advanced. -->
+                    <ion-item class="ion-text-wrap core-grading-summary"
+                        *ngIf="feedback?.gradefordisplay && (!isGrading || grade.method != 'simple')">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
                             <p>
-                                {{ 'addon.mod_assign.attemptreopenmethod' | translate }}:
-                                {{ 'addon.mod_assign.attemptreopenmethod_' + assign!.attemptreopenmethod | translate }}
+                                <core-format-text [text]="feedback!.gradefordisplay" [filter]="false"></core-format-text>
                             </p>
                         </ion-label>
+                        <ion-button slot="end" *ngIf="feedback!.advancedgrade" (click)="showAdvancedGrade()"
+                            [attr.aria-label]="'core.showadvanced' |translate">
+                            <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
+                        </ion-button>
                     </ion-item>
-                    <ion-item *ngIf="canSaveGrades && allowAddAttempt">
-                        <ion-label>{{ 'addon.mod_assign.addattempt' | translate }}</ion-label>
-                        <ion-toggle [(ngModel)]="grade.addAttempt"></ion-toggle>
-                    </ion-item>
-                </ng-container>
 
-                <!-- Data about the grader (teacher who graded). -->
-                <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
-                    [attr.aria-label]="grader!.fullname" detail="true">
-                    <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
-                        <h2>{{ grader!.fullname }}</h2>
-                        <p *ngIf="feedback!.gradeddate">{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
+                    <ng-container *ngIf="isGrading">
+                        <!-- Numeric grade.
+                        Use a text input because otherwise we cannot readthe value if it has an invalid character. -->
+                        <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && !grade.scale">
+                            <ion-label position="stacked">
+                                <h2>{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</h2>
+                            </ion-label>
+                            <ion-input *ngIf="!grade.disabled" type="text" [(ngModel)]="grade.grade" min="0" [max]="gradeInfo!.grade"
+                                [lang]="grade.lang">
+                            </ion-input>
+                            <p *ngIf="grade.disabled">{{ 'addon.mod_assign.gradelocked' | translate }}</p>
+                        </ion-item>
 
-                <!-- Grader is hidden, display only the grade date. -->
-                <ion-item class="ion-text-wrap" *ngIf="!grader && feedback?.gradeddate">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.gradedon' | translate }}</h2>
-                        <p>{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
+                        <!-- Grade using a scale. -->
+                        <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && grade.scale">
+                            <ion-label>
+                                <h2>{{ 'addon.mod_assign.grade' | translate }}</h2>
+                            </ion-label>
+                            <ion-select [(ngModel)]="grade.grade" interface="action-sheet" [disabled]="grade.disabled"
+                                [interfaceOptions]="{header: 'addon.mod_assign.grade' | translate}">
+                                <ion-select-option *ngFor="let grade of grade.scale" [value]="grade.value">
+                                    {{grade.label}}
+                                </ion-select-option>
+                            </ion-select>
+                        </ion-item>
 
-                <!-- Warning message if cannot save grades. -->
-                <ion-card *ngIf="isGrading && !canSaveGrades" class="core-warning-card">
-                    <ion-item>
-                        <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+                        <!-- Outcomes. -->
+                        <ion-item class="ion-text-wrap" *ngFor="let outcome of gradeInfo!.outcomes">
+                            <ion-label>
+                                <h2>{{ outcome.name }}</h2>
+                            </ion-label>
+                            <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId"
+                                interface="action-sheet" [disabled]="gradeInfo!.disabled" [interfaceOptions]="{header: outcome.name }">
+                                <ion-select-option *ngFor="let grade of outcome.options" [value]="grade.value">
+                                    {{grade.label}}
+                                </ion-select-option>
+                            </ion-select>
+                            <p *ngIf="!canSaveGrades || !outcome.itemNumber">{{ outcome.selected }}</p>
+                        </ion-item>
+
+                        <!-- Gradebook grade for simple grading. -->
+                        <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple'">
+                            <ion-label>
+                                <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
+                                <p *ngIf="grade.gradebookGrade && !grade.scale">
+                                    {{ grade.gradebookGrade }}
+                                </p>
+                                <p *ngIf="grade.gradebookGrade && grade.scale">
+                                    {{ grade.scale[grade.gradebookGrade].label }}
+                                </p>
+                                <p *ngIf="!grade.gradebookGrade">-</p>
+                            </ion-label>
+                        </ion-item>
+                    </ng-container>
+
+                    <ng-container *ngIf="feedback">
+                        <addon-mod-assign-feedback-plugin *ngFor="let plugin of feedback.plugins" [assign]="assign"
+                            [submission]="userSubmission" [userId]="submitId" [plugin]="plugin" [canEdit]="canSaveGrades">
+                        </addon-mod-assign-feedback-plugin>
+                    </ng-container>
+
+                    <!-- Workflow status. -->
+                    <ion-item class="ion-text-wrap" *ngIf="workflowStatusTranslationId">
                         <ion-label>
-                            <p>{{ 'addon.mod_assign.cannotgradefromapp' | translate }}</p>
-                            <ion-button expand="block" *ngIf="gradeUrl" [href]="gradeUrl" core-link [showBrowserWarning]="false">
-                                {{ 'core.openinbrowser' | translate }}
-                                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
-                            </ion-button>
+                            <h2>{{ 'addon.mod_assign.markingworkflowstate' | translate }}</h2>
+                            <p>{{ workflowStatusTranslationId | translate }}</p>
                         </ion-label>
                     </ion-item>
-                </ion-card>
-            </ng-template>
-        </core-tab>
-    </core-tabs>
+
+                    <!--- Apply grade to all team members. -->
+                    <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</h2>
+                            <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
+                        </ion-label>
+                        <ion-toggle [(ngModel)]="grade.applyToAll"></ion-toggle>
+                    </ion-item>
+
+                    <!-- Attempt status. -->
+                    <ng-container *ngIf="isGrading && assign!.attemptreopenmethod != attemptReopenMethodNone">
+                        <ion-item class="ion-text-wrap">
+                            <ion-label>
+                                <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
+                                <p *ngIf="assign!.maxattempts == unlimitedAttempts">
+                                    {{ 'addon.mod_assign.outof' | translate :
+                                    {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
+                                </p>
+                                <p *ngIf="assign!.maxattempts != unlimitedAttempts">
+                                    {{ 'addon.mod_assign.outof' | translate :
+                                    {'$a': {'current': currentAttempt, 'total': assign!.maxattempts} } }}
+                                </p>
+                                <p>
+                                    {{ 'addon.mod_assign.attemptreopenmethod' | translate }}:
+                                    {{ 'addon.mod_assign.attemptreopenmethod_' + assign!.attemptreopenmethod | translate }}
+                                </p>
+                            </ion-label>
+                        </ion-item>
+                        <ion-item *ngIf="canSaveGrades && allowAddAttempt">
+                            <ion-label>{{ 'addon.mod_assign.addattempt' | translate }}</ion-label>
+                            <ion-toggle [(ngModel)]="grade.addAttempt"></ion-toggle>
+                        </ion-item>
+                    </ng-container>
+
+                    <!-- Data about the grader (teacher who graded). -->
+                    <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
+                        [attr.aria-label]="grader!.fullname" detail="true">
+                        <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
+                            <h2>{{ grader!.fullname }}</h2>
+                            <p *ngIf="feedback!.gradeddate">{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Grader is hidden, display only the grade date. -->
+                    <ion-item class="ion-text-wrap" *ngIf="!grader && feedback?.gradeddate">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.gradedon' | translate }}</h2>
+                            <p>{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Warning message if cannot save grades. -->
+                    <ion-card *ngIf="isGrading && !canSaveGrades" class="core-warning-card">
+                        <ion-item>
+                            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+                            <ion-label>
+                                <p>{{ 'addon.mod_assign.cannotgradefromapp' | translate }}</p>
+                                <ion-button expand="block" *ngIf="gradeUrl" [href]="gradeUrl" core-link [showBrowserWarning]="false">
+                                    {{ 'core.openinbrowser' | translate }}
+                                    <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
+                                </ion-button>
+                            </ion-label>
+                        </ion-item>
+                    </ion-card>
+                </ng-template>
+            </core-tab>
+        </core-tabs>
+    </div>
 </core-loading>
 
 <!-- Template to render some data regarding the submission status. -->
diff --git a/src/addons/mod/assign/pages/index/index.html b/src/addons/mod/assign/pages/index/index.html
index 71f69b398..2d3f9be93 100644
--- a/src/addons/mod/assign/pages/index/index.html
+++ b/src/addons/mod/assign/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index f3047f77a..8003d0166 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-page list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/bigbluebuttonbn/pages/index/index.html b/src/addons/mod/bigbluebuttonbn/pages/index/index.html
index f6e0e524e..273ff5994 100644
--- a/src/addons/mod/bigbluebuttonbn/pages/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/book/components/index/addon-mod-book-index.html b/src/addons/mod/book/components/index/addon-mod-book-index.html
index 4727f8e6c..380582d58 100644
--- a/src/addons/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addons/mod/book/components/index/addon-mod-book-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/book/pages/contents/contents.scss b/src/addons/mod/book/pages/contents/contents.scss
index 823126ed0..87e3729a3 100644
--- a/src/addons/mod/book/pages/contents/contents.scss
+++ b/src/addons/mod/book/pages/contents/contents.scss
@@ -1,10 +1,4 @@
 :host {
-    core-loading ::ng-deep .core-loading-content {
-        min-height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
     .core-swipe-slides-container {
         ion-card {
             flex: none;
diff --git a/src/addons/mod/book/pages/index/index.html b/src/addons/mod/book/pages/index/index.html
index fb3db333b..5e55e1db3 100644
--- a/src/addons/mod/book/pages/index/index.html
+++ b/src/addons/mod/book/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/chat/components/index/addon-mod-chat-index.html b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
index e9c2590d3..6e928b3fe 100644
--- a/src/addons/mod/chat/components/index/addon-mod-chat-index.html
+++ b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index 92e022753..cc3112b5b 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -16,8 +16,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content class="has-footer">
-    <core-loading [hideUntil]="loaded" class="safe-area-padding">
+<ion-content>
+    <core-loading [hideUntil]="loaded">
         <ion-list class="addon-messages-discussion-container" aria-live="polite">
             <ng-container *ngFor="let message of messages; index as index; last as last">
 
diff --git a/src/addons/mod/chat/pages/index/index.html b/src/addons/mod/chat/pages/index/index.html
index bc5f254eb..5f2cec7ce 100644
--- a/src/addons/mod/chat/pages/index/index.html
+++ b/src/addons/mod/chat/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/chat/pages/session-messages/session-messages.html b/src/addons/mod/chat/pages/session-messages/session-messages.html
index 501e76cf8..9e18962a8 100644
--- a/src/addons/mod/chat/pages/session-messages/session-messages.html
+++ b/src/addons/mod/chat/pages/session-messages/session-messages.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshMessages($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="safe-area-padding">
+    <core-loading [hideUntil]="loaded">
         <ion-list class="addon-messages-discussion-container">
             <ng-container *ngFor="let message of messages; index as index;">
 
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index cc554ee45..19cea320a 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -7,66 +7,63 @@
 
 <!-- Content. -->
 <core-loading [hideUntil]="!showLoading">
-    <div class="list-item-limited-width">
-        <!-- Activity info. -->
-        <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-            [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-        </core-course-module-info>
+    <!-- Activity info. -->
+    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
+        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
+    </core-course-module-info>
 
-        <!-- Activity availability messages -->
-        <ion-card class="core-info-card" *ngIf="choiceNotOpenYet">
-            <ion-item>
-                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+    <!-- Activity availability messages -->
+    <ion-card class="core-info-card" *ngIf="choiceNotOpenYet">
+        <ion-item>
+            <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p *ngIf="options.length">{{ 'addon.mod_choice.previewonly' | translate:{$a: openTimeReadable} }}</p>
+                <p *ngIf="!options.length">{{ 'addon.mod_choice.notopenyet' | translate:{$a: openTimeReadable} }}</p>
+            </ion-label>
+        </ion-item>
+    </ion-card>
+
+    <ion-card class="core-info-card" *ngIf="choiceClosed">
+        <ion-item>
+            <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p *ngIf="options.length">
+                    {{ 'addon.mod_choice.yourselection' | translate }}
+                    <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                    </core-format-text>
+                </p>
+                <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
+            </ion-label>
+        </ion-item>
+    </ion-card>
+
+    <!-- Inform what will happen with the choices. -->
+    <ion-card class="core-info-card" *ngIf="canEdit && publishInfo && options.length">
+        <ion-item>
+            <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ publishInfo | translate }}</ion-label>
+        </ion-item>
+    </ion-card>
+
+    <!-- Choice options -->
+    <ion-card *ngIf="options.length && choice">
+        <ng-container *ngIf="choice.allowmultiple">
+            <ion-item class="ion-text-wrap" *ngFor="let option of options">
                 <ion-label>
-                    <p *ngIf="options.length">{{ 'addon.mod_choice.previewonly' | translate:{$a: openTimeReadable} }}</p>
-                    <p *ngIf="!options.length">{{ 'addon.mod_choice.notopenyet' | translate:{$a: openTimeReadable} }}</p>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
                 </ion-label>
+                <ion-checkbox slot="end" [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit"></ion-checkbox>
             </ion-item>
-        </ion-card>
-
-        <ion-card class="core-info-card" *ngIf="choiceClosed">
-            <ion-item>
-                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+        </ng-container>
+        <ion-radio-group *ngIf="!choice.allowmultiple" [(ngModel)]="selectedOption.id">
+            <ion-item class="ion-text-wrap" *ngFor="let option of options">
                 <ion-label>
-                    <p *ngIf="options.length">
-                        {{ 'addon.mod_choice.yourselection' | translate }}
-                        <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id"
-                            [courseId]="courseId">
-                        </core-format-text>
-                    </p>
-                    <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
                 </ion-label>
+                <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit"></ion-radio>
             </ion-item>
-        </ion-card>
-
-        <!-- Inform what will happen with the choices. -->
-        <ion-card class="core-info-card" *ngIf="canEdit && publishInfo && options.length">
-            <ion-item>
-                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>{{ publishInfo | translate }}</ion-label>
-            </ion-item>
-        </ion-card>
-
-        <!-- Choice options -->
-        <ion-card *ngIf="options.length && choice">
-            <ng-container *ngIf="choice.allowmultiple">
-                <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                    <ion-label>
-                        <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
-                    </ion-label>
-                    <ion-checkbox slot="end" [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit"></ion-checkbox>
-                </ion-item>
-            </ng-container>
-            <ion-radio-group *ngIf="!choice.allowmultiple" [(ngModel)]="selectedOption.id">
-                <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                    <ion-label>
-                        <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
-                    </ion-label>
-                    <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit"></ion-radio>
-                </ion-item>
-            </ion-radio-group>
-        </ion-card>
-    </div>
+        </ion-radio-group>
+    </ion-card>
     <!-- Choice results -->
     <div *ngIf="canSeeResults && choice">
         <ion-item-divider>
diff --git a/src/addons/mod/choice/pages/index/index.html b/src/addons/mod/choice/pages/index/index.html
index b5a04c2a6..82d3899af 100644
--- a/src/addons/mod/choice/pages/index/index.html
+++ b/src/addons/mod/choice/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index d8eef7e45..6a6b4724f 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@@ -18,7 +18,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index 72c1598a7..a7be272a4 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -11,13 +11,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!entryLoaded || !(isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
         (ionRefresh)="refreshDatabase($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
-        class="list-item-limited-width">
+    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)">
         <!-- Database entries found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="entry && entry.hasOffline">
             <ion-item>
diff --git a/src/addons/mod/data/pages/index/index.html b/src/addons/mod/data/pages/index/index.html
index ff9ed701e..4d0cd6995 100644
--- a/src/addons/mod/data/pages/index/index.html
+++ b/src/addons/mod/data/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index 38fab03e8..8a72abe19 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index 597335624..6ca2f58d8 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -11,8 +11,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer">
         <ng-container *ngIf="items && items.length">
             <ion-list class="ion-no-margin has-spacer">
                 <ion-item class="ion-text-wrap">
diff --git a/src/addons/mod/feedback/pages/index/index.html b/src/addons/mod/feedback/pages/index/index.html
index 6996000e4..091b40c1c 100644
--- a/src/addons/mod/feedback/pages/index/index.html
+++ b/src/addons/mod/feedback/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/folder/components/index/addon-mod-folder-index.html b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
index d9e0cf63d..eea0df71e 100644
--- a/src/addons/mod/folder/components/index/addon-mod-folder-index.html
+++ b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info *ngIf="!subfolder" [module]="module" [description]="description" [component]="component"
diff --git a/src/addons/mod/folder/pages/index/index.html b/src/addons/mod/folder/pages/index/index.html
index b83a186f5..66812df13 100644
--- a/src/addons/mod/folder/pages/index/index.html
+++ b/src/addons/mod/folder/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="subfolder || activityComponent?.showLoading"
         (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
diff --git a/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss b/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss
index 4ef3e574f..c09597ff5 100644
--- a/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss
+++ b/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss
@@ -1,11 +1,4 @@
-:host {
-    core-loading:not(.core-loading-loaded) > .core-loading-container {
-        position: relative !important;
-        padding-top: 10px !important;
-        padding-bottom: 10px !important;
-        overflow: hidden;
-    }
-    core-loading > .core-loading-container .core-loading-message {
-        display: none;
-    }
+core-loading {
+    --loading-inline-min-height: 48px;
+    --loading-display-message: none;
 }
diff --git a/src/addons/mod/forum/pages/discussion/discussion.html b/src/addons/mod/forum/pages/discussion/discussion.html
index 37157efb5..542fefeda 100644
--- a/src/addons/mod/forum/pages/discussion/discussion.html
+++ b/src/addons/mod/forum/pages/discussion/discussion.html
@@ -55,12 +55,12 @@
         </core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
-<ion-content [core-swipe-navigation]="discussions">
+<ion-content [core-swipe-navigation]="discussions" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!discussionLoaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="discussionLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="discussionLoaded">
         <!-- Discussion replies found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="postHasOffline || hasOfflineRatings">
             <ion-item>
diff --git a/src/addons/mod/glossary/pages/entry/entry.html b/src/addons/mod/glossary/pages/entry/entry.html
index 3965b0f64..ee112af6e 100644
--- a/src/addons/mod/glossary/pages/entry/entry.html
+++ b/src/addons/mod/glossary/pages/entry/entry.html
@@ -11,12 +11,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="entries">
+<ion-content [core-swipe-navigation]="entries" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="entry && loaded">
             <ion-item class="ion-text-wrap" *ngIf="showAuthor">
                 <core-user-avatar [user]="entry" slot="start"></core-user-avatar>
diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
index f12d47baf..41245df1a 100644
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@@ -16,7 +16,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
index 67c59580d..183e62461 100644
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/imscp/pages/index/index.html b/src/addons/mod/imscp/pages/index/index.html
index 712346154..12b3a7f08 100644
--- a/src/addons/mod/imscp/pages/index/index.html
+++ b/src/addons/mod/imscp/pages/index/index.html
@@ -15,6 +15,6 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <addon-mod-imscp-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-imscp-index>
 </ion-content>
diff --git a/src/addons/mod/imscp/pages/view/view.html b/src/addons/mod/imscp/pages/view/view.html
index 0611d34f8..e37142791 100644
--- a/src/addons/mod/imscp/pages/view/view.html
+++ b/src/addons/mod/imscp/pages/view/view.html
@@ -19,7 +19,7 @@
 </ion-header>
 <ion-content>
     <!-- Content. -->
-    <core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-full-height">
+    <core-loading [hideUntil]="loaded">
 
         <ion-card class="core-warning-card" *ngIf="warning">
             <ion-item>
diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index ea987e830..d039f0303 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
     <core-tabs [hideUntil]="!showLoading" [selectedIndex]="selectedTab">
         <!-- Index/Preview tab. -->
         <core-tab [title]="'addon.mod_lesson.preview' | translate" (ionSelect)="indexSelected()">
diff --git a/src/addons/mod/lesson/pages/index/index.html b/src/addons/mod/lesson/pages/index/index.html
index fec01e323..f83508304 100644
--- a/src/addons/mod/lesson/pages/index/index.html
+++ b/src/addons/mod/lesson/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index 90b910843..f0a46750e 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -17,8 +17,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <!-- Info messages. Only show the first one. -->
         <ion-card class="core-info-card" *ngIf="lesson && messages?.length">
             <ion-item class="ion-text-wrap">
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index 722c6a495..41e59c571 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -8,12 +8,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <div *ngIf="student">
             <!-- Student data. -->
             <ion-item class="ion-text-wrap" core-user-link [userId]="student.id" [courseId]="courseId" [attr.aria-label]="student.fullname">
diff --git a/src/addons/mod/lti/components/index/addon-mod-lti-index.html b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
index 1a9fb4164..db82dfce0 100644
--- a/src/addons/mod/lti/components/index/addon-mod-lti-index.html
+++ b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
diff --git a/src/addons/mod/lti/pages/index/index.html b/src/addons/mod/lti/pages/index/index.html
index 38ce5fc89..566f57401 100644
--- a/src/addons/mod/lti/pages/index/index.html
+++ b/src/addons/mod/lti/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/page/components/index/addon-mod-page-index.html b/src/addons/mod/page/components/index/addon-mod-page-index.html
index b93d43391..c629090b0 100644
--- a/src/addons/mod/page/components/index/addon-mod-page-index.html
+++ b/src/addons/mod/page/components/index/addon-mod-page-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
diff --git a/src/addons/mod/page/components/index/index.scss b/src/addons/mod/page/components/index/index.scss
deleted file mode 100644
index f769c305d..000000000
--- a/src/addons/mod/page/components/index/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Solves iframe height */
-.core-loading-content > div[padding] {
-    height: 100%;
-}
-
-core-format-text > .no-overflow {
-    display: inline;
-}
diff --git a/src/addons/mod/page/components/index/index.ts b/src/addons/mod/page/components/index/index.ts
index dd9dc2ff7..37d2f0b8e 100644
--- a/src/addons/mod/page/components/index/index.ts
+++ b/src/addons/mod/page/components/index/index.ts
@@ -27,7 +27,6 @@ import { AddonModPageHelper } from '../../services/page-helper';
 @Component({
     selector: 'addon-mod-page-index',
     templateUrl: 'addon-mod-page-index.html',
-    styleUrls: ['index.scss'],
 })
 export class AddonModPageIndexComponent extends CoreCourseModuleMainResourceComponent implements OnInit {
 
diff --git a/src/addons/mod/page/pages/index/index.html b/src/addons/mod/page/pages/index/index.html
index fc6dc2f86..8cc1affc1 100644
--- a/src/addons/mod/page/pages/index/index.html
+++ b/src/addons/mod/page/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
index a8b1b7988..d8feca57d 100644
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/quiz/pages/attempt/attempt.html b/src/addons/mod/quiz/pages/attempt/attempt.html
index 3df9ad96f..e7dfbdead 100644
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@@ -12,11 +12,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="attempt">
             <ion-item class="ion-text-wrap">
                 <ion-label>
diff --git a/src/addons/mod/quiz/pages/index/index.html b/src/addons/mod/quiz/pages/index/index.html
index 233973f4f..83bd934c9 100644
--- a/src/addons/mod/quiz/pages/index/index.html
+++ b/src/addons/mod/quiz/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index 9e787ecaf..d74bcc8b2 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -30,8 +30,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="has-spacer list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <!-- Button to start attempting. -->
         <ion-button *ngIf="!attempt" expand="block" class="ion-margin" (click)="start()">
             {{ 'addon.mod_quiz.startattempt' | translate }}
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index 43fc2206f..0ab6d7c5d 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -15,11 +15,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
 
         <!-- Review summary -->
         <ion-card *ngIf="attempt">
diff --git a/src/addons/mod/resource/components/index/addon-mod-resource-index.html b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
index fd4d8b5b5..213d21523 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"
diff --git a/src/addons/mod/resource/pages/index/index.html b/src/addons/mod/resource/pages/index/index.html
index 4bfe3e2a6..8413a0de5 100644
--- a/src/addons/mod/resource/pages/index/index.html
+++ b/src/addons/mod/resource/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading || activityComponent?.mode == 'iframe'"
         (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
index 5d3f06b43..d2b0c257f 100644
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/scorm/pages/index/index.html b/src/addons/mod/scorm/pages/index/index.html
index 00e1aa739..837e79cfb 100644
--- a/src/addons/mod/scorm/pages/index/index.html
+++ b/src/addons/mod/scorm/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/scorm/pages/player/player.html b/src/addons/mod/scorm/pages/player/player.html
index 343397a9b..85093fb51 100644
--- a/src/addons/mod/scorm/pages/player/player.html
+++ b/src/addons/mod/scorm/pages/player/player.html
@@ -20,7 +20,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded" class="core-loading-full-height">
+    <core-loading [hideUntil]="loaded">
         <core-iframe *ngIf="loaded && src" [src]="src" [iframeWidth]="scormWidth" [iframeHeight]="scormHeight"
             [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true">
         </core-iframe>
diff --git a/src/addons/mod/survey/components/index/addon-mod-survey-index.html b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
index b4370e1f6..6d04fab7c 100644
--- a/src/addons/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
diff --git a/src/addons/mod/survey/pages/index/index.html b/src/addons/mod/survey/pages/index/index.html
index 02673c75d..38ed35fea 100644
--- a/src/addons/mod/survey/pages/index/index.html
+++ b/src/addons/mod/survey/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/url/components/index/addon-mod-url-index.html b/src/addons/mod/url/components/index/addon-mod-url-index.html
index 6b29fa18c..0e7fa1baa 100644
--- a/src/addons/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addons/mod/url/components/index/addon-mod-url-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
diff --git a/src/addons/mod/url/pages/index/index.html b/src/addons/mod/url/pages/index/index.html
index f940549ef..5de9e34ee 100644
--- a/src/addons/mod/url/pages/index/index.html
+++ b/src/addons/mod/url/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
index f4fd30532..4c220849f 100644
--- a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
@@ -27,7 +27,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/wiki/pages/index/index.html b/src/addons/mod/wiki/pages/index/index.html
index 0c013169c..fd6c31ce6 100644
--- a/src/addons/mod/wiki/pages/index/index.html
+++ b/src/addons/mod/wiki/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html b/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
index 90e393f77..8c0388f09 100644
--- a/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
+++ b/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
     <ion-item class="ion-text-wrap" [detail]="canViewAssessment && !canSelfAssess" (click)="gotoAssessment($event)"
         [button]="canViewAssessment && !canSelfAssess">
         <core-user-avatar [user]="profile" slot="start" [courseId]="courseId" [userId]="profile?.id"></core-user-avatar>
diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
index 9ccdc53bc..9b98b2660 100644
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
diff --git a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
index ee7f08609..f69d312a9 100644
--- a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
+++ b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
     <div *ngIf="!summary">
         <ion-item class="ion-text-wrap addon-workshop-submission-title">
             <core-user-avatar [user]="profile" [courseId]="courseId" [userId]="profile?.id" slot="start">
diff --git a/src/addons/mod/workshop/pages/index/index.html b/src/addons/mod/workshop/pages/index/index.html
index c9fdc573a..b28ffdd39 100644
--- a/src/addons/mod/workshop/pages/index/index.html
+++ b/src/addons/mod/workshop/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index 754b7456a..294fdb3af 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -20,7 +20,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshSubmission($event.target)"
         *ngIf="!((assessmentId && access.assessingallowed) || canAddFeedback)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
diff --git a/src/addons/notes/pages/list/list.html b/src/addons/notes/pages/list/list.html
index db1ee143d..6c58feff3 100644
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@@ -25,12 +25,12 @@
             [closeOnClick]="false"></core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!notesLoaded" (ionRefresh)="refreshNotes(false, $event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="notesLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="notesLoaded">
         <ion-item class="ion-text-wrap" *ngIf="user">
             <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
             <ion-label>
diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html
index a3555462f..ec245c9cd 100644
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@@ -8,13 +8,13 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!filesLoaded || (!showPrivateFiles && !showSiteFiles)"
         (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles" class="list-item-limited-width">
+    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
         <!-- Allow selecting the files to see: private or site. -->
         <core-combobox [selection]="root" (onChange)="rootChanged($event)" *ngIf="showPrivateFiles && showSiteFiles && !path">
             <ion-select-option class="ion-text-wrap" value="my">
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 35b3f2b8f..b6353dd6c 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -8,8 +8,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <p>{{ 'addon.storagemanager.courseinfo' | translate }}</p>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 4c4f3217f..a0d9bc1eb 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -8,8 +8,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <div class="ion-padding-horizontal ion-text-wrap" *ngIf="spaceUsage">
             <h2>{{ 'addon.storagemanager.alldata' | translate }}</h2>
         </div>
diff --git a/src/core/components/attachments/attachments.scss b/src/core/components/attachments/attachments.scss
index 4582f0e2b..c6955211f 100644
--- a/src/core/components/attachments/attachments.scss
+++ b/src/core/components/attachments/attachments.scss
@@ -1,5 +1,3 @@
-:host {
-    core-loading {
-        --loading-inline-min-height: 60px;
-    }
+core-loading {
+    --loading-inline-min-height: 60px;
 }
diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index e9664f6d3..28ce77c89 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -1,5 +1,4 @@
-<div [class.core-loading-container]="loading || !safeUrl" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}">
-
+<core-loading [hideUntil]="!loading && safeUrl">
     <core-navbar-buttons slot="end" prepend *ngIf="initialized && showFullscreenOnToolbar">
         <ion-button fill="clear" (click)="toggleFullscreen()"
             [attr.aria-label]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
@@ -17,8 +16,4 @@
         class="core-button-as-link core-iframe-help">
         {{ 'core.iframehelp' | translate }}
     </ion-button>
-
-    <span class="core-loading-spinner">
-        <ion-spinner *ngIf="loading" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
-    </span>
-</div>
+</core-loading>
diff --git a/src/core/components/iframe/iframe.scss b/src/core/components/iframe/iframe.scss
index 23c1cfd68..bc8a94691 100644
--- a/src/core/components/iframe/iframe.scss
+++ b/src/core/components/iframe/iframe.scss
@@ -9,27 +9,6 @@
         max-width: 100%;
         background-color: var(--ion-background-color);
     }
-
-    .core-loading-container {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        display: table;
-        height: 100%;
-        width: 100%;
-        z-index: 1;
-        margin: 0;
-        padding: 0;
-        clear: both;
-
-        .core-loading-spinner {
-            display: table-cell;
-            text-align: center;
-            vertical-align: middle;
-        }
-    }
 }
 
 :host-context(.core-iframe-fullscreen) {
diff --git a/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html b/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
index aa42eeadb..1e960e8a8 100644
--- a/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
+++ b/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
@@ -1,4 +1,6 @@
-<core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+<div class="list-item-limited-width">
+    <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+</div>
 
 <core-block-side-blocks-button slot="fixed" *ngIf="course && hasBlocks" [courseId]="course.id">
 </core-block-side-blocks-button>
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index e25f768db..642782ee5 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -18,11 +18,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="has-spacer list-item-limited-width">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
             [componentId]="module.id" [expandDescription]="true" [showAvailabilityInfo]="true" (completionChanged)="onCompletionChange()"
             [showManualCompletion]="showManualCompletion">
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 30e043ec3..de30057bd 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!columns || !rows" (ionRefresh)="refreshGrades($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="columns && rows" class="safe-area-padding">
+    <core-loading [hideUntil]="columns && rows">
         <core-empty-box *ngIf="rows && rows.length === 0" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
         </core-empty-box>
         <div *ngIf="rows && rows.length > 0" class="core-grades-container">
diff --git a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
index c60f30592..b09ea0ef2 100644
--- a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
+++ b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-padding">
+<core-loading [hideUntil]="iframeSrc" [fullscreen]="false">
     <core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()"
         [showFullscreenOnToolbar]="enableInAppFullscreen" [autoFullscreenOnRotate]="enableInAppFullscreen">
     </core-iframe>
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index e8703bdfa..94e021f17 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -15,8 +15,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content class="ion-padding">
-    <core-loading [hideUntil]="pageLoaded" class="list-item-limited-width">
+<ion-content class="ion-padding limited-width">
+    <core-loading [hideUntil]="pageLoaded">
         <div class="ion-text-wrap ion-text-center ion-margin-bottom">
             <div class="core-login-site-logo">
                 <!-- Show site logo or a default image. -->
diff --git a/src/core/features/login/pages/site-policy/site-policy.html b/src/core/features/login/pages/site-policy/site-policy.html
index dbef122e6..25f2f27de 100644
--- a/src/core/features/login/pages/site-policy/site-policy.html
+++ b/src/core/features/login/pages/site-policy/site-policy.html
@@ -10,7 +10,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="policyLoaded" class="core-loading-full-height">
+    <core-loading [hideUntil]="policyLoaded">
         <ion-list *ngIf="sitePolicy">
             <ion-item class="ion-text-wrap">
                 <ion-label>
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index c1e6cadf3..6b97ae897 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -19,8 +19,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-list class="core-sitelist">
             <ion-card *ngFor="let sites of accountsList.otherSites">
                 <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
diff --git a/src/core/features/settings/pages/licenses/licenses.html b/src/core/features/settings/pages/licenses/licenses.html
index e33be5446..1221ab37e 100644
--- a/src/core/features/settings/pages/licenses/licenses.html
+++ b/src/core/features/settings/pages/licenses/licenses.html
@@ -9,8 +9,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterChanged($event.target)" (ionCancel)="filterChanged($event.target)"
             [placeholder]="'core.filter' | translate">
         </ion-searchbar>
diff --git a/src/core/features/settings/pages/space-usage/space-usage.html b/src/core/features/settings/pages/space-usage/space-usage.html
index 38c8c0f61..ad5ce1a50 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -12,11 +12,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher [disabled]="!loaded" (ionRefresh)="refreshData($event.target)" slot="fixed">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-list>
             <ion-item *ngFor="let site of sites" [class.item-current]="site.id == currentSiteId">
                 <ion-label class="ion-text-wrap">
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index 6dc4c3d51..7e4911b89 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -15,8 +15,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="sitesLoaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="sitesLoaded">
         <ion-list>
             <ion-item-divider>
                 <ion-label>
diff --git a/src/core/features/tag/pages/index-area/index-area.html b/src/core/features/tag/pages/index-area/index-area.html
index 9cb089c17..a23e1f352 100644
--- a/src/core/features/tag/pages/index-area/index-area.html
+++ b/src/core/features/tag/pages/index-area/index-area.html
@@ -10,14 +10,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
-        <ng-container *ngIf="loaded">
-            <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
-        </ng-container>
+    <core-loading [hideUntil]="loaded">
+        <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError">
         </core-infinite-loading>
     </core-loading>
diff --git a/src/core/features/tag/pages/search/search.html b/src/core/features/tag/pages/search/search.html
index bf4568ef6..6126aa8c3 100644
--- a/src/core/features/tag/pages/search/search.html
+++ b/src/core/features/tag/pages/search/search.html
@@ -32,7 +32,7 @@
             </ion-col>
         </ion-row>
     </ion-grid>
-    <core-loading [hideUntil]="loaded && !searching" class="safe-area-padding">
+    <core-loading [hideUntil]="loaded && !searching">
         <core-empty-box *ngIf="!cloud || !cloud!.tags || !cloud!.tags.length" icon="fas-tags"
             [message]="'core.tag.notagsfound' | translate: {$a: query}"></core-empty-box>
 
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 62028bf62..751d3dd52 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index 5dbb82b82..52d71a6cf 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="users">
+<ion-content [core-swipe-navigation]="users" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 59edeadaf..e3db5d413 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -817,12 +817,18 @@ ion-card {
 
 ion-list.core-course-module-list-wrapper,
 .list-item-limited-width,
-.core-course-module-list-wrapper {
+.core-course-module-list-wrapper,
+ion-content.limited-width > :not([slot]) {
     max-width: var(--list-item-max-width);
     margin-left: auto !important;
     margin-right: auto !important;
 }
 
+ion-content.limited-width > :not([slot]) {
+    display: flex;
+    flex-direction: column;
+}
+
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
     padding: 4px;