319d3355de
This PR introduces a few changes to improve turbopack compatibility and ensure e2e tests pass with turbopack enabled ## Changes to improve turbopack compatibility - Use correct sideEffects configuration to fix scss issues - Import scss directly instead of duplicating our scss rules - Fix some scss rules that are not supported by turbopack - Bump Next.js and all other dependencies used to build payload ## Changes to get tests to pass For an unknown reason, flaky tests flake a lot more often in turbopack. This PR does the following to get them to pass: - add more `wait`s - fix actual flakes by ensuring previous operations are properly awaited ## Blocking turbopack bugs - [X] https://github.com/vercel/next.js/issues/76464 - Fix PR: https://github.com/vercel/next.js/pull/76545 - Once fixed: change `"sideEffectsDisabled":` back to `"sideEffects":` ## Non-blocking turbopack bugs - [ ] https://github.com/vercel/next.js/issues/76956 ## Related PRs https://github.com/payloadcms/payload/pull/12653 https://github.com/payloadcms/payload/pull/12652
120 lines
2.3 KiB
SCSS
120 lines
2.3 KiB
SCSS
@import '~@payloadcms/ui/scss';
|
|
|
|
@layer payload-default {
|
|
.query-inspector {
|
|
--string-color: var(--color-success-450);
|
|
--number-color: var(--color-warning-450);
|
|
display: flex;
|
|
gap: calc(var(--base) * 2);
|
|
align-items: flex-start;
|
|
|
|
ul {
|
|
padding-left: calc(var(--base) * 1);
|
|
}
|
|
|
|
&--fullscreen {
|
|
padding-left: 0;
|
|
.query-inspector__configuration {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__configuration {
|
|
margin-top: calc(var(--base) * 2);
|
|
width: 60%;
|
|
position: sticky;
|
|
top: var(--base);
|
|
}
|
|
|
|
&__api-url {
|
|
margin-bottom: calc(var(--base) * 1.5);
|
|
|
|
a {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__form-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--base);
|
|
}
|
|
|
|
&__label {
|
|
color: var(--theme-elevation-400);
|
|
}
|
|
|
|
&__filter-query-checkboxes {
|
|
display: flex;
|
|
gap: var(--base);
|
|
}
|
|
|
|
&__results-wrapper {
|
|
font-family: var(--font-mono);
|
|
width: 100%;
|
|
ul {
|
|
margin: 0;
|
|
}
|
|
li {
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
&__toggle-fullscreen-button-container {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
|
|
@include mid-break {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__toggle-fullscreen-button {
|
|
position: absolute;
|
|
right: calc(var(--base) * 0.5);
|
|
top: calc(var(--base) * 0.5);
|
|
padding: calc(var(--base) * 0.25);
|
|
background-color: var(--theme-elevation-0);
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
color: var(--theme-elevation-300);
|
|
&:hover {
|
|
color: var(--theme-elevation-700);
|
|
}
|
|
}
|
|
|
|
&__results {
|
|
padding-top: calc(var(--base) * 0.5);
|
|
padding-left: calc(var(--base) * 0.5);
|
|
padding-bottom: calc(var(--base) * 0.5);
|
|
background-color: var(--theme-elevation-50);
|
|
overflow: auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@include mid-break {
|
|
flex-direction: column;
|
|
padding-left: 0;
|
|
|
|
.query-inspector__configuration {
|
|
position: relative;
|
|
width: 100%;
|
|
top: 0;
|
|
padding-inline-end: var(--gutter-h);
|
|
}
|
|
}
|
|
}
|
|
}
|