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

fix(ui): misalignment of nested toggles on document API tab (#13424)

Browse Source 
Fixes the weird misalignment of toggles in the API tab


Before:
<img width="799" height="1011" alt="image"
src="https://github.com/user-attachments/assets/5fc9768c-24de-4d89-a1ba-6dd606f76bec"
/>


After:
<img width="815" height="1069" alt="image"
src="https://github.com/user-attachments/assets/253dfdaa-7fca-4d16-b61e-a91474b9d6c9"
/>
This commit is contained in:
Paul
2025-08-12 08:28:35 -07:00
committed by GitHub
parent 72f5763c25
commit 306b7f6943
1 changed files with 43 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/next/src/views/API/RenderJSON/index.scss
View File

@@ -1,15 +1,17 @@
@import '~@payloadcms/ui/scss';
$tab-width: 16px;
$tab-width: 24px;
@layer payload-default {
.query-inspector {
--tab-width: 24px;
&__json-children {
position: relative;
&--nested {
& li {
padding-left: $tab-width;
padding-left: 8px;
}
}
@@ -23,6 +25,14 @@ $tab-width: 16px;
}
}
&__row-line {
&--nested {
.query-inspector__json-children {
padding-left: var(--tab-width);
}
}
}
&__list-wrap {
position: relative;
}
@@ -37,10 +47,16 @@ $tab-width: 16px;
border-bottom-right-radius: 0;
position: relative;
display: flex;
gap: 10px;
column-gap: 14px;
row-gap: 10px;
align-items: center;
left: -3px;
left: 0;
width: calc(100% + 3px);
background-color: var(--theme-elevation-50);
&:not(.query-inspector__list-toggle--empty) {
margin-left: calc(var(--tab-width) * -1 - 10px);
}
svg .stroke {
stroke: var(--theme-elevation-400);
@@ -82,13 +98,31 @@ $tab-width: 16px;
&__bracket {
position: relative;
&--nested {
margin-left: $tab-width;
&--position-end {
left: 2px;
width: calc(100% - 5px);
}
}
&--position-end {
left: 1px;
width: calc(100% - 5px);
// Some specific rules targetting the very top of the nested JSON structure or very first items since they need slightly different styling
&__results {
& > .query-inspector__row-line--nested {
& > .query-inspector__list-toggle {
margin-left: 0;
column-gap: 6px;
.query-inspector__toggle-row-icon {
margin-left: -4px;
}
}
& > .query-inspector__json-children {
padding-left: calc(var(--base) * 1);
}
& > .query-inspector__bracket--nested > .query-inspector__bracket--position-end {
padding-left: 16px;
}
}
}
}