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'; @import '~@payloadcms/ui/scss';
$tab-width: 16px; $tab-width: 24px;
@layer payload-default { @layer payload-default {
.query-inspector { .query-inspector {
--tab-width: 24px;
&__json-children { &__json-children {
position: relative; position: relative;
&--nested { &--nested {
& li { & 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 { &__list-wrap {
position: relative; position: relative;
} }
@@ -37,10 +47,16 @@ $tab-width: 16px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
position: relative; position: relative;
display: flex; display: flex;
gap: 10px; column-gap: 14px;
row-gap: 10px;
align-items: center; align-items: center;
left: -3px; left: 0;
width: calc(100% + 3px); 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 { svg .stroke {
stroke: var(--theme-elevation-400); stroke: var(--theme-elevation-400);
@@ -82,14 +98,32 @@ $tab-width: 16px;
&__bracket { &__bracket {
position: relative; position: relative;
&--nested {
margin-left: $tab-width;
}
&--position-end { &--position-end {
left: 1px; left: 2px;
width: calc(100% - 5px); 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;
}
}
}
} }
} }