tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): hide sidebar when no fields rendered (#13340)

Browse Source
This commit is contained in:
Jarrod Flesch
2025-07-30 23:59:46 -04:00
committed by GitHub
parent 9031f3bf23
commit 1b93c4becc
1 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/ui/src/elements/DocumentFields/index.scss
View File

@@ -17,7 +17,8 @@
--main-gutter-h-right: var(--gutter-h); --main-gutter-h-right: var(--gutter-h);
} }
&--force-sidebar-wrap { &--force-sidebar-wrap,
&:has(.document-fields__sidebar-wrap .render-fields:empty) {
--sidebar-gutter-h-left: var(--gutter-h); --sidebar-gutter-h-left: var(--gutter-h);
--sidebar-gutter-h-right: var(--gutter-h); --sidebar-gutter-h-right: var(--gutter-h);
--main-gutter-h-left: var(--gutter-h); --main-gutter-h-left: var(--gutter-h);
@@ -25,9 +26,19 @@
} }
&--has-sidebar { &--has-sidebar {
--main-width: 66.66%;
--main-border: 1px solid var(--theme-elevation-100);
--main-field-margin: calc(var(--base) * -2);
&:has(.document-fields__sidebar-wrap .render-fields:empty) {
--main-width: 100%;
--main-border: none;
--main-field-margin: initial;
}
.document-fields { .document-fields {
&__main { &__main {
width: 66.66%; width: var(--main-width);
} }
&__edit { &__edit {
@@ -36,20 +47,20 @@
[dir='ltr'] & { [dir='ltr'] & {
top: 0; top: 0;
right: 0; right: 0;
border-right: 1px solid var(--theme-elevation-100); border-right: var(--main-border);
} }
[dir='rtl'] & { [dir='rtl'] & {
top: 0; top: 0;
left: 0; left: 0;
border-left: 1px solid var(--theme-elevation-100); border-left: var(--main-border);
} }
} }
&__fields { &__fields {
& > .tabs-field, & > .tabs-field,
& > .group-field { & > .group-field {
margin-right: calc(var(--base) * -2); margin-right: var(--main-field-margin);
} }
} }
} }
@@ -70,12 +81,21 @@
} }
&__sidebar-wrap { &__sidebar-wrap {
position: sticky; &:has(.render-fields:empty) {
top: var(--doc-controls-height); --sidebar-wrap-width: 0;
width: 33.33%; --sidebar-wrap-min-width: 0;
height: calc(100vh - var(--doc-controls-height)); --sidebar-wrap-position: initial;
min-width: var(--doc-sidebar-width); --sidebar-wrap-top: initial;
flex-shrink: 0; --sidebar-wrap-height: initial;
--sidebar-wrap-flex-shrink: initial;
}
position: var(--sidebar-wrap-position, sticky);
top: var(--sidebar-wrap-top, 0);
width: var(--sidebar-wrap-width, 33.33%);
height: var(--sidebar-wrap-height, calc(100vh - var(--doc-controls-height)));
min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
} }
&__sidebar { &__sidebar {