From 5d96c5a33947cb067740c0b3af41619a2ec348f8 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Wed, 20 Mar 2024 09:27:55 +0100
Subject: [PATCH] MOBILE-2768 policy: Fix table width

---
 .../policy/pages/acceptances/acceptances.html | 40 ++++++++++---------
 .../policy/pages/acceptances/acceptances.scss |  3 +-
 .../report-detail/report-detail.html          |  6 +--
 src/theme/theme.base.scss                     | 10 ++---
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/core/features/policy/pages/acceptances/acceptances.html b/src/core/features/policy/pages/acceptances/acceptances.html
index d9a123a62..478a5abf6 100644
--- a/src/core/features/policy/pages/acceptances/acceptances.html
+++ b/src/core/features/policy/pages/acceptances/acceptances.html
@@ -28,26 +28,28 @@
             </ion-card>
         </div>
 
-        <table *ngIf="isTablet && policies.length" class="core-table x-scrollable core-policy-tablet-container">
-            <thead>
-                <tr>
-                    <th>{{ 'core.policy.policydocname' | translate }}</th>
-                    <th>{{ 'core.policy.policydocrevision' | translate }}</th>
-                    <th>{{ 'core.policy.response' | translate }}</th>
-                    <th>{{ 'core.policy.responseon' | translate }}</th>
-                    <ng-container *ngIf="hasOnBehalf">
-                        <th>{{ 'core.policy.responseby' | translate }}</th>
-                        <th>{{ 'core.policy.acceptancenote' | translate }}</th>
+        <div class="x-scrollable core-policy-tablet-container">
+            <table *ngIf="isTablet && policies.length" class="core-table">
+                <thead>
+                    <tr>
+                        <th>{{ 'core.policy.policydocname' | translate }}</th>
+                        <th>{{ 'core.policy.policydocrevision' | translate }}</th>
+                        <th>{{ 'core.policy.response' | translate }}</th>
+                        <th>{{ 'core.policy.responseon' | translate }}</th>
+                        <ng-container *ngIf="hasOnBehalf">
+                            <th>{{ 'core.policy.responseby' | translate }}</th>
+                            <th>{{ 'core.policy.acceptancenote' | translate }}</th>
+                        </ng-container>
+                    </tr>
+                </thead>
+                <tbody class="auto-striped">
+                    <ng-container *ngFor="let policy of policies">
+                        <ng-container
+                            *ngTemplateOutlet="policyTabletTemplate; context: {policy: policy, isPreviousVersion: false, hidden: false}" />
                     </ng-container>
-                </tr>
-            </thead>
-            <tbody class="auto-striped">
-                <ng-container *ngFor="let policy of policies">
-                    <ng-container
-                        *ngTemplateOutlet="policyTabletTemplate; context: {policy: policy, isPreviousVersion: false, hidden: false}" />
-                </ng-container>
-            </tbody>
-        </table>
+                </tbody>
+            </table>
+        </div>
 
         <div *ngIf="!isTablet && policies.length" class="core-policy-mobile-container">
             <ng-container *ngFor="let policy of policies">
diff --git a/src/core/features/policy/pages/acceptances/acceptances.scss b/src/core/features/policy/pages/acceptances/acceptances.scss
index eca3e66bd..e638029c7 100644
--- a/src/core/features/policy/pages/acceptances/acceptances.scss
+++ b/src/core/features/policy/pages/acceptances/acceptances.scss
@@ -75,7 +75,7 @@
         }
     }
 
-    table.core-policy-tablet-container {
+    .core-policy-tablet-container table {
         th {
             &:first-child {
                 @include padding-horizontal(24px, 0px);
@@ -83,7 +83,6 @@
         }
 
         th, td {
-            min-width: 200px;
             text-wrap: nowrap;
         }
 
diff --git a/src/core/features/reportbuilder/components/report-detail/report-detail.html b/src/core/features/reportbuilder/components/report-detail/report-detail.html
index d05ddfcdc..594e4eb65 100644
--- a/src/core/features/reportbuilder/components/report-detail/report-detail.html
+++ b/src/core/features/reportbuilder/components/report-detail/report-detail.html
@@ -21,8 +21,8 @@
                 </ion-card>
             </ng-container>
 
-            <ng-container *ngIf="!isCardLayout">
-                <table class="core-table x-scrollable">
+            <div *ngIf="!isCardLayout" class="x-scrollable">
+                <table class="core-table">
                     <thead>
                         <tr>
                             <th *ngFor="let header of state.report.data.headers">
@@ -40,7 +40,7 @@
                         </tr>
                     </tbody>
                 </table>
-            </ng-container>
+            </div>
 
         </ng-container>
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 9b77bdcd2..c674fc16a 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -2031,6 +2031,11 @@ ion-datetime-button p {
     margin-bottom: 4px;
 }
 
+.x-scrollable {
+    overflow-x: auto;
+    display: block;
+}
+
 // Table App styles
 table.core-table {
     border-collapse: collapse;
@@ -2039,11 +2044,6 @@ table.core-table {
     margin: 1em auto;
     color: var(--text-color);
 
-    &.x-scrollable {
-        overflow-x: auto;
-        display: block;
-    }
-
     thead th {
         vertical-align: bottom;
         font-weight: bold;