Skip to content

Commit 1b93c4b

Browse files
fix(ui): hide sidebar when no fields rendered (#13340)
1 parent 9031f3b commit 1b93c4b

File tree

1 file changed

+31
-11
lines changed

1 file changed

+31
-11
lines changed

packages/ui/src/elements/DocumentFields/index.scss

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,28 @@
1717
--main-gutter-h-right: var(--gutter-h);
1818
}
1919

20-
&--force-sidebar-wrap {
20+
&--force-sidebar-wrap,
21+
&:has(.document-fields__sidebar-wrap .render-fields:empty) {
2122
--sidebar-gutter-h-left: var(--gutter-h);
2223
--sidebar-gutter-h-right: var(--gutter-h);
2324
--main-gutter-h-left: var(--gutter-h);
2425
--main-gutter-h-right: var(--gutter-h);
2526
}
2627

2728
&--has-sidebar {
29+
--main-width: 66.66%;
30+
--main-border: 1px solid var(--theme-elevation-100);
31+
--main-field-margin: calc(var(--base) * -2);
32+
33+
&:has(.document-fields__sidebar-wrap .render-fields:empty) {
34+
--main-width: 100%;
35+
--main-border: none;
36+
--main-field-margin: initial;
37+
}
38+
2839
.document-fields {
2940
&__main {
30-
width: 66.66%;
41+
width: var(--main-width);
3142
}
3243

3344
&__edit {
@@ -36,20 +47,20 @@
3647
[dir='ltr'] & {
3748
top: 0;
3849
right: 0;
39-
border-right: 1px solid var(--theme-elevation-100);
50+
border-right: var(--main-border);
4051
}
4152

4253
[dir='rtl'] & {
4354
top: 0;
4455
left: 0;
45-
border-left: 1px solid var(--theme-elevation-100);
56+
border-left: var(--main-border);
4657
}
4758
}
4859

4960
&__fields {
5061
& > .tabs-field,
5162
& > .group-field {
52-
margin-right: calc(var(--base) * -2);
63+
margin-right: var(--main-field-margin);
5364
}
5465
}
5566
}
@@ -70,12 +81,21 @@
7081
}
7182

7283
&__sidebar-wrap {
73-
position: sticky;
74-
top: var(--doc-controls-height);
75-
width: 33.33%;
76-
height: calc(100vh - var(--doc-controls-height));
77-
min-width: var(--doc-sidebar-width);
78-
flex-shrink: 0;
84+
&:has(.render-fields:empty) {
85+
--sidebar-wrap-width: 0;
86+
--sidebar-wrap-min-width: 0;
87+
--sidebar-wrap-position: initial;
88+
--sidebar-wrap-top: initial;
89+
--sidebar-wrap-height: initial;
90+
--sidebar-wrap-flex-shrink: initial;
91+
}
92+
93+
position: var(--sidebar-wrap-position, sticky);
94+
top: var(--sidebar-wrap-top, 0);
95+
width: var(--sidebar-wrap-width, 33.33%);
96+
height: var(--sidebar-wrap-height, calc(100vh - var(--doc-controls-height)));
97+
min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
98+
flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
7999
}
80100

81101
&__sidebar {

0 commit comments

Comments
 (0)