diff --git a/CHANGELOG.md b/CHANGELOG.md index b8105625c70..7714b7f1b73 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss index 53036250240..837fcefbdfd 100644 --- a/src/web/assets/cp/src/css/_cp.scss +++ b/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 { diff --git a/src/web/assets/cp/src/css/_global-sidebar.scss b/src/web/assets/cp/src/css/_global-sidebar.scss index fce591df5e3..0a8ba3925b2 100644 --- a/src/web/assets/cp/src/css/_global-sidebar.scss +++ b/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 { diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss index 53f9933eadc..19040b3f191 100644 --- a/src/web/assets/cp/src/css/_main.scss +++ b/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)); } } }