Merge pull request #14315 from craftcms/bugfix/wide-tables

Wide tables

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Fixed a bug where querying elements with `eagerly()` wasn’t working across element types.
 - Fixed a SQL error that could occur when querying relations with `eagerly()`.
 - Fixed a bug where element actions weren’t working for elements that were added to a relational field.
+- Fixed a bug where very wide tables could bleed off the page.
 
 ## 5.0.0-alpha.13 - 2024-02-06
 

src/web/assets/cp/src/css/_cp.scss

@@ -22,6 +22,7 @@ $badgeColor: var(--gray-800);
   --padding: var(--xl);
   --neg-padding: calc(var(--padding) * -1);
   --sidebar-width: #{$sidebarWidth};
+  --global-sidebar-width: #{$sidebarWidth};
   --max-width: 1920px;
 }
 
@@ -1015,27 +1016,13 @@ li.breadcrumb-toggle-wrapper {
 }
 
 #content-container {
-  flex: 1;
-
-  #main-content:not(.has-sidebar):not(.has-details) & {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  #main-content.has-sidebar & {
-    width: calc(100% - #{$sidebarWidth - 24});
-    max-width: calc(100% - #{$sidebarWidth - 24});
-  }
-
-  #main-content.has-details & {
-    width: calc(100% - #{$detailsWidth} - var(--m));
-    max-width: calc(100% - #{$detailsWidth} - var(--m));
-  }
-
-  #main-content.has-sidebar.has-details {
-    width: calc(100% - #{$sidebarWidth} - #{$detailsWidth} - 38px);
-    max-width: calc(100% - #{$sidebarWidth} - #{$detailsWidth} - 38px);
-  }
+  flex: 1 1 auto;
+  /*
+  Admittedly I'm not totally sure why this is necessary, but it seems to be.
+  We have to give #content-container some kind of "hard" width for it to properly
+  clip the content when table cells are long.
+   */
+  width: 400px;
 }
 
 #content-heading {

src/web/assets/cp/src/css/_global-sidebar.scss

@@ -1,6 +1,5 @@
 .global-sidebar {
   --is-always-visible: true;
-  --collapsed-width: 50px;
   --prefix-size: 30px;
   --prefix-ratio: 1;
 
@@ -14,7 +13,7 @@
   -webkit-overflow-scrolling: touch;
   background-color: transparent;
   border-right: 1px solid var(--hairline-color);
-  width: var(--sidebar-width);
+  width: var(--global-sidebar-width);
 
   a {
     text-decoration: none;
@@ -258,7 +257,7 @@ States
 @media only screen and (min-width: $minFullUiWidth) {
   [data-sidebar='collapsed'] {
     .global-sidebar {
-      width: var(--collapsed-width);
+      --global-sidebar-width: 50px;
     }
 
     .nav-item__indicator {

src/web/assets/cp/src/css/_main.scss

@@ -2652,7 +2652,7 @@ h2 + .actions {
     th,
     td {
       &:first-child {
-        @include padding-left(24px);
+        @include padding-left(var(--m));
       }
     }
   }