fix: tables overflowing in page renderer

Verseghy · Jan 5, 2023 · 04c1179 · 04c1179
1 parent 8fa5386
commit 04c1179
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/apps/frontend/src/app/modules/pages/components/page/page.component.scss b/apps/frontend/src/app/modules/pages/components/page/page.component.scss
@@ -1,6 +1,7 @@
 :host {
-  max-width: 1000px;
-  padding: 0 20px;
+  --padding: 20px;
+  max-width: min(1000px, calc(100vw - 2 * var(--padding)));
+  padding: 0 var(--padding);
   margin: 0 auto;
   display: block;
 }
diff --git a/apps/frontend/src/app/modules/shared/components/page-renderer/page-renderer.component.scss b/apps/frontend/src/app/modules/shared/components/page-renderer/page-renderer.component.scss
@@ -87,12 +87,10 @@
       font-size: 1.6rem;
       box-sizing: border-box;
       border-collapse: collapse;
-      overflow-x: scroll;
+      overflow-x: auto;
       white-space: nowrap;
       display: block;
-      width: min-content;
-      max-width: min(100%, var(--content-page-width-wide));
-      min-width: var(--content-page-width);
+      width: clap(var(--content-page-width), 100%, var(--content-page-width-wide));
 
       tbody {
         display: table;