From 93ffdf58b95298156355d958c81db98e8136d939 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 21 Sep 2026 21:13:29 -0500
Subject: [PATCH 1/5] Force light theme for graphiql for the moment

---
 packages/craftcms-graphiql/src/graphiql-init.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/craftcms-graphiql/src/graphiql-init.js b/packages/craftcms-graphiql/src/graphiql-init.js
index 99899dc75f5..af03891d0a9 100644
--- a/packages/craftcms-graphiql/src/graphiql-init.js
+++ b/packages/craftcms-graphiql/src/graphiql-init.js
@@ -30,6 +30,10 @@ const CraftGraphiQL = ({endpoint, selectedSchema}) => {
 
   return React.createElement(GraphiQL, {
     fetcher: graphQLFetcher,
+    // The CP's own styling for GraphiQL is light-only, and GraphiQL otherwise
+    // follows the system preference. Forcing it also drops the theme picker
+    // from its settings dialog.
+    forcedTheme: 'light',
   });
 };
 

From 957776ae29bf7c2c81aab3d9eb2365cc38743be6 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 21 Sep 2026 21:13:40 -0500
Subject: [PATCH 2/5] Cleanup graphql pages

---
 resources/js/pages/graphql/Explore.vue       |   2 +-
 resources/js/pages/graphql/schemas/Edit.vue  | 153 ++++++-------
 resources/js/pages/graphql/schemas/Index.vue |   5 +-
 resources/js/pages/graphql/tokens/Edit.vue   | 226 +++++++++----------
 resources/js/pages/graphql/tokens/Index.vue  |   5 +-
 5 files changed, 194 insertions(+), 197 deletions(-)

diff --git a/resources/js/pages/graphql/Explore.vue b/resources/js/pages/graphql/Explore.vue
index 2aa0d45a1d0..bf06953f41a 100644
--- a/resources/js/pages/graphql/Explore.vue
+++ b/resources/js/pages/graphql/Explore.vue
@@ -42,7 +42,7 @@
 <template>
   <AppLayout>
     <template #page-main>
-      <main id="main" tabindex="-1" class="cp-graphiql">
+      <main id="main" tabindex="-1" class="cp-graphiql" data-theme="light">
         <div class="cp-graphiql__header">
           <h1>{{ t('Explore the GraphQL API') }}</h1>
           <form method="get" :action="exploreUrl" class="schema-selector">
diff --git a/resources/js/pages/graphql/schemas/Edit.vue b/resources/js/pages/graphql/schemas/Edit.vue
index 7120322c685..715f382848d 100644
--- a/resources/js/pages/graphql/schemas/Edit.vue
+++ b/resources/js/pages/graphql/schemas/Edit.vue
@@ -1,71 +1,66 @@
 <script setup lang="ts">
-  import {t} from '@craftcms/ui';
-  import {useAppLayout} from '@/common/composables/useAppLayout';
-  import LayoutSlot from '@/common/components/LayoutSlot.vue';
-  import CraftInput from '@craftcms/ui/vue/CraftInput.vue';
-  import CraftSwitch from '@craftcms/ui/vue/CraftSwitch.vue';
-  import PermissionTree from '@craftcms/ui/vue/CraftPermissionTree.vue';
-  import {useSettingsSave} from '@/modules/settings/composables/useSettingsSave';
-  import {store, update} from '@actions/Gql/SchemasController';
-  import {useForm} from '@inertiajs/vue3';
+import { t } from "@craftcms/ui";
+import { useAppLayout } from "@/common/composables/useAppLayout";
+import LayoutSlot from "@/common/components/LayoutSlot.vue";
+import CraftInput from "@craftcms/ui/vue/CraftInput.vue";
+import CraftSwitch from "@craftcms/ui/vue/CraftSwitch.vue";
+import PermissionTree from "@craftcms/ui/vue/CraftPermissionTree.vue";
+import { useSettingsSave } from "@/modules/settings/composables/useSettingsSave";
+import { store, update } from "@actions/Gql/SchemasController";
+import { useForm } from "@inertiajs/vue3";
+import CpContainer from "@/common/components/CpContainer.vue";
 
-  type TokenData = Pick<
-    CraftCms.Cms.Gql.Data.GqlToken,
-    'id' | 'enabled' | 'expiryDate'
-  >;
+type TokenData = Pick<CraftCms.Cms.Gql.Data.GqlToken, "id" | "enabled" | "expiryDate">;
 
-  interface SchemaForm {
-    name: string;
-    permissions: Array<string>;
-    enabled: boolean;
-    expiryDate: string;
-  }
-
-  type PermissionGroup = Omit<
-    CraftCms.Cms.User.Data.PermissionGroup,
-    'permissions'
-  > & {
-    permissions: Record<string, CraftCms.Cms.User.Data.Permission>;
-  };
+interface SchemaForm {
+  name: string;
+  permissions: Array<string>;
+  enabled: boolean;
+  expiryDate: string;
+}
 
-  const props = defineProps<{
-    schema: CraftCms.Cms.Gql.Data.GqlSchema;
-    token: TokenData | null;
-    permissions: Array<PermissionGroup>;
-    readOnly?: boolean;
-  }>();
+type PermissionGroup = Omit<CraftCms.Cms.User.Data.PermissionGroup, "permissions"> & {
+  permissions: Record<string, CraftCms.Cms.User.Data.Permission>;
+};
 
-  const form = useForm<SchemaForm>({
-    name: props.schema.name ?? '',
-    permissions: props.schema.scope ?? [],
-    enabled: props.token?.enabled ?? true,
-    expiryDate: props.token?.expiryDate ?? '',
-  });
-  const initialPermissions = new Set(form.permissions);
+const props = defineProps<{
+  schema: CraftCms.Cms.Gql.Data.GqlSchema;
+  token: TokenData | null;
+  permissions: Array<PermissionGroup>;
+  readOnly?: boolean;
+}>();
 
-  const routeAction = () => {
-    if (!props.schema.id) {
-      return store();
-    }
+const form = useForm<SchemaForm>({
+  name: props.schema.name ?? "",
+  permissions: props.schema.scope ?? [],
+  enabled: props.token?.enabled ?? true,
+  expiryDate: props.token?.expiryDate ?? "",
+});
+const initialPermissions = new Set(form.permissions);
 
-    return update({
-      schemaId: props.schema.isPublic ? 'public' : props.schema.id,
-    });
-  };
+const routeAction = () => {
+  if (!props.schema.id) {
+    return store();
+  }
 
-  const {save} = useSettingsSave(form, routeAction, {
-    passwordConfirmation: {
-      required: ({permissions}) =>
-        permissions.length !== initialPermissions.size ||
-        permissions.some((permission) => !initialPermissions.has(permission)),
-    },
+  return update({
+    schemaId: props.schema.isPublic ? "public" : props.schema.id,
   });
+};
+
+const { save } = useSettingsSave(form, routeAction, {
+  passwordConfirmation: {
+    required: ({ permissions }) =>
+      permissions.length !== initialPermissions.size ||
+      permissions.some((permission) => !initialPermissions.has(permission)),
+  },
+});
 
-  useAppLayout({form, onSave: save});
+useAppLayout({ form, onSave: save });
 </script>
 
 <template>
-  <craft-pane appearance="raised">
+  <CpContainer>
     <div class="grid gap-3">
       <CraftInput
         v-if="!schema.isPublic"
@@ -84,36 +79,36 @@
 
       <section class="grid gap-3">
         <h2 class="text-base">
-          {{ t('Choose the available content for querying with this schema:') }}
+          {{ t("Choose the available content for querying with this schema:") }}
         </h2>
 
-        <PermissionTree
-          :groups="permissions"
-          v-model="form.permissions"
-          :disabled="readOnly"
-        />
+        <PermissionTree :groups="permissions" v-model="form.permissions" :disabled="readOnly" />
       </section>
     </div>
-  </craft-pane>
+  </CpContainer>
 
   <LayoutSlot v-if="schema.isPublic" name="content-details">
-    <CraftSwitch
-      :label="t('Enabled')"
-      id="enabled"
-      name="enabled"
-      v-model="form.enabled"
-      :disabled="readOnly"
-      :error="form.errors.enabled"
-    />
+    <div class="p-lg">
+      <craft-field-group>
+        <CraftSwitch
+          :label="t('Enabled')"
+          id="enabled"
+          name="enabled"
+          v-model="form.enabled"
+          :disabled="readOnly"
+          :error="form.errors.enabled"
+        />
 
-    <CraftInput
-      :label="t('Expiry Date')"
-      id="expiryDate"
-      name="expiryDate"
-      type="datetime-local"
-      v-model="form.expiryDate"
-      :disabled="readOnly"
-      :error="form.errors.expiryDate"
-    />
+        <CraftInput
+          :label="t('Expiry Date')"
+          id="expiryDate"
+          name="expiryDate"
+          type="datetime-local"
+          v-model="form.expiryDate"
+          :disabled="readOnly"
+          :error="form.errors.expiryDate"
+        />
+      </craft-field-group>
+    </div>
   </LayoutSlot>
 </template>
diff --git a/resources/js/pages/graphql/schemas/Index.vue b/resources/js/pages/graphql/schemas/Index.vue
index 6afac397451..6b2bdb17210 100644
--- a/resources/js/pages/graphql/schemas/Index.vue
+++ b/resources/js/pages/graphql/schemas/Index.vue
@@ -9,6 +9,7 @@
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
   import {router} from '@inertiajs/vue3';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import CpContainer from '@/common/components/CpContainer.vue';
 
   interface SchemaData {
     id: number;
@@ -93,7 +94,7 @@
       >{{ t('New schema') }}</CpLink
     >
   </LayoutSlot>
-  <craft-pane padding="0" appearance="raised">
+  <CpContainer>
     <AdminTable :table="table" />
-  </craft-pane>
+  </CpContainer>
 </template>
diff --git a/resources/js/pages/graphql/tokens/Edit.vue b/resources/js/pages/graphql/tokens/Edit.vue
index 8a3c503b53d..21b93cecf26 100644
--- a/resources/js/pages/graphql/tokens/Edit.vue
+++ b/resources/js/pages/graphql/tokens/Edit.vue
@@ -1,96 +1,96 @@
 <script setup lang="ts">
-  import {computed, nextTick, ref} from 'vue';
-  import {t} from '@craftcms/ui';
-  import LayoutSlot from '@/common/components/LayoutSlot.vue';
-  import Select from '@/common/form/Select.vue';
-  import type {BaseOption} from '@/common/types';
-  import CraftInput from '@craftcms/ui/vue/CraftInput.vue';
-  import CraftSwitch from '@craftcms/ui/vue/CraftSwitch.vue';
-  import {useAppLayout} from '@/common/composables/useAppLayout';
-  import {useSettingsSave} from '@/modules/settings/composables/useSettingsSave';
-  import {
-    accessToken as revealAccessToken,
-    generate,
-    store,
-    update,
-  } from '@actions/Gql/TokensController';
-  import {useForm, useHttp} from '@inertiajs/vue3';
-  import {elevatedSessionManager} from '@/modules/auth/elevated-session';
-
-  type TokenData = Pick<
-    CraftCms.Cms.Gql.Data.GqlToken,
-    'id' | 'uid' | 'name' | 'schemaId' | 'enabled' | 'expiryDate'
-  >;
-
-  type CopyButtonElement = HTMLElement & {copyValue: () => Promise<void>};
-
-  type TokenResponse = {
-    accessToken: string;
-  };
-
-  const maskedToken = '••••••••••••••••••••••••••••••••';
-
-  const props = defineProps<{
-    token: TokenData;
-    accessToken: string | null;
-    schemaOptions: Array<BaseOption>;
-    readOnly?: boolean;
-  }>();
-
-  const copyButton = ref<CopyButtonElement | null>(null);
-  const visibleAccessToken = ref(props.accessToken);
-  const tokenRequest = useHttp<Record<string, never>, TokenResponse>({});
-  const loadingToken = computed(() => tokenRequest.processing);
-
-  const form = useForm({
-    name: props.token.name ?? '',
-    schema: props.token.schemaId?.toString() ?? '',
-    enabled: props.token.enabled,
-    expiryDate: props.token.expiryDate ?? '',
-    accessToken: props.accessToken ?? '',
-  });
-
-  const authorizationHeader = computed(
-    () => `Authorization: Bearer ${visibleAccessToken.value ?? maskedToken}`
-  );
-
-  const routeAction = () =>
-    props.token.id ? update({tokenId: props.token.id}) : store();
-
-  const {save} = useSettingsSave(form, routeAction, {
-    passwordConfirmation: {required: () => true},
-  });
-
-  useAppLayout({form, onSave: save});
-
-  async function revealToken(tokenId: number) {
-    const data = await tokenRequest.post(revealAccessToken({tokenId}).url);
-    visibleAccessToken.value = data.accessToken;
-
-    return data.accessToken;
+import { computed, nextTick, ref } from "vue";
+import { t } from "@craftcms/ui";
+import LayoutSlot from "@/common/components/LayoutSlot.vue";
+import Select from "@/common/form/Select.vue";
+import type { BaseOption } from "@/common/types";
+import CraftInput from "@craftcms/ui/vue/CraftInput.vue";
+import CraftSwitch from "@craftcms/ui/vue/CraftSwitch.vue";
+import { useAppLayout } from "@/common/composables/useAppLayout";
+import { useSettingsSave } from "@/modules/settings/composables/useSettingsSave";
+import {
+  accessToken as revealAccessToken,
+  generate,
+  store,
+  update,
+} from "@actions/Gql/TokensController";
+import { useForm, useHttp } from "@inertiajs/vue3";
+import { elevatedSessionManager } from "@/modules/auth/elevated-session";
+import CpContainer from "@/common/components/CpContainer.vue";
+
+type TokenData = Pick<
+  CraftCms.Cms.Gql.Data.GqlToken,
+  "id" | "uid" | "name" | "schemaId" | "enabled" | "expiryDate"
+>;
+
+type CopyButtonElement = HTMLElement & { copyValue: () => Promise<void> };
+
+type TokenResponse = {
+  accessToken: string;
+};
+
+const maskedToken = "••••••••••••••••••••••••••••••••";
+
+const props = defineProps<{
+  token: TokenData;
+  accessToken: string | null;
+  schemaOptions: Array<BaseOption>;
+  readOnly?: boolean;
+}>();
+
+const copyButton = ref<CopyButtonElement | null>(null);
+const visibleAccessToken = ref(props.accessToken);
+const tokenRequest = useHttp<Record<string, never>, TokenResponse>({});
+const loadingToken = computed(() => tokenRequest.processing);
+
+const form = useForm({
+  name: props.token.name ?? "",
+  schema: props.token.schemaId?.toString() ?? "",
+  enabled: props.token.enabled,
+  expiryDate: props.token.expiryDate ?? "",
+  accessToken: props.accessToken ?? "",
+});
+
+const authorizationHeader = computed(
+  () => `Authorization: Bearer ${visibleAccessToken.value ?? maskedToken}`,
+);
+
+const routeAction = () => (props.token.id ? update({ tokenId: props.token.id }) : store());
+
+const { save } = useSettingsSave(form, routeAction, {
+  passwordConfirmation: { required: () => true },
+});
+
+useAppLayout({ form, onSave: save });
+
+async function revealToken(tokenId: number) {
+  const data = await tokenRequest.post(revealAccessToken({ tokenId }).url);
+  visibleAccessToken.value = data.accessToken;
+
+  return data.accessToken;
+}
+
+async function copyHeader() {
+  const tokenId = props.token.id;
+
+  if (!visibleAccessToken.value && tokenId) {
+    await elevatedSessionManager.run(async () => {
+      await revealToken(tokenId);
+      await nextTick();
+      await copyButton.value?.copyValue();
+    });
   }
+}
 
-  async function copyHeader() {
-    const tokenId = props.token.id;
-
-    if (!visibleAccessToken.value && tokenId) {
-      await elevatedSessionManager.run(async () => {
-        await revealToken(tokenId);
-        await nextTick();
-        await copyButton.value?.copyValue();
-      });
-    }
-  }
-
-  async function regenerateToken() {
-    const data = await tokenRequest.post(generate().url);
-    visibleAccessToken.value = data.accessToken;
-    form.accessToken = data.accessToken;
-  }
+async function regenerateToken() {
+  const data = await tokenRequest.post(generate().url);
+  visibleAccessToken.value = data.accessToken;
+  form.accessToken = data.accessToken;
+}
 </script>
 
 <template>
-  <craft-pane appearance="raised">
+  <CpContainer>
     <div class="grid gap-3">
       <CraftInput
         :label="t('Name')"
@@ -107,9 +107,7 @@
       <template v-if="schemaOptions.length">
         <Select
           :label="t('GraphQL Schema')"
-          :help-text="
-            t('Choose which GraphQL schema this token has access to.')
-          "
+          :help-text="t('Choose which GraphQL schema this token has access to.')"
           id="schema"
           name="schema"
           v-model="form.schema"
@@ -120,7 +118,7 @@
       </template>
 
       <craft-callout v-else data-color="warning">
-        {{ t('No schemas exist yet to assign to this token.') }}
+        {{ t("No schemas exist yet to assign to this token.") }}
       </craft-callout>
 
       <hr />
@@ -130,7 +128,7 @@
           :label="t('Authorization Header')"
           :help-text="
             t(
-              'The `Authorization` header that should be sent with GraphQL API requests to use this token.'
+              'The `Authorization` header that should be sent with GraphQL API requests to use this token.',
             )
           "
           id="auth-header"
@@ -149,7 +147,7 @@
             @click="copyHeader"
           >
             <craft-icon name="copy" slot="prefix"></craft-icon>
-            {{ t('Copy') }}
+            {{ t("Copy") }}
           </craft-button>
 
           <craft-copy-button
@@ -168,30 +166,32 @@
           :disabled="readOnly || loadingToken"
           @click="regenerateToken"
         >
-          {{ t('Regenerate') }}
+          {{ t("Regenerate") }}
         </craft-button>
       </div>
     </div>
-  </craft-pane>
+  </CpContainer>
 
   <LayoutSlot name="content-details">
-    <CraftSwitch
-      :label="t('Enabled')"
-      id="enabled"
-      name="enabled"
-      v-model="form.enabled"
-      :disabled="readOnly"
-      :error="form.errors.enabled"
-    />
-
-    <CraftInput
-      :label="t('Expiry Date')"
-      id="expiryDate"
-      name="expiryDate"
-      type="datetime-local"
-      v-model="form.expiryDate"
-      :disabled="readOnly"
-      :error="form.errors.expiryDate"
-    />
+    <craft-field-group class="p-lg">
+      <CraftSwitch
+        :label="t('Enabled')"
+        id="enabled"
+        name="enabled"
+        v-model="form.enabled"
+        :disabled="readOnly"
+        :error="form.errors.enabled"
+      />
+
+      <CraftInput
+        :label="t('Expiry Date')"
+        id="expiryDate"
+        name="expiryDate"
+        type="datetime-local"
+        v-model="form.expiryDate"
+        :disabled="readOnly"
+        :error="form.errors.expiryDate"
+      />
+    </craft-field-group>
   </LayoutSlot>
 </template>
diff --git a/resources/js/pages/graphql/tokens/Index.vue b/resources/js/pages/graphql/tokens/Index.vue
index ae6c84b8553..df1f2f2b53f 100644
--- a/resources/js/pages/graphql/tokens/Index.vue
+++ b/resources/js/pages/graphql/tokens/Index.vue
@@ -10,6 +10,7 @@
   import {create, destroy, edit} from '@actions/Gql/TokensController';
   import Empty from '@/common/components/Empty.vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import CpContainer from '@/common/components/CpContainer.vue';
 
   export interface TokenData {
     id: number;
@@ -99,7 +100,7 @@
       >{{ t('New token') }}</CpLink
     >
   </LayoutSlot>
-  <craft-pane padding="0" appearance="raised">
+  <CpContainer>
     <AdminTable :table="table">
       <template #empty-row>
         <Empty :label="t('No GraphQL tokens exist yet.')">
@@ -109,5 +110,5 @@
         </Empty>
       </template>
     </AdminTable>
-  </craft-pane>
+  </CpContainer>
 </template>

From e658e00be5621c4485965451c778071081e73b9e Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 21 Sep 2026 21:13:57 -0500
Subject: [PATCH 3/5] Add data-theme="light" styling

---
 packages/craftcms-ui/scripts/generate-color-palette.js   | 5 ++++-
 packages/craftcms-ui/src/styles/shared/color-palette.css | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/craftcms-ui/scripts/generate-color-palette.js b/packages/craftcms-ui/scripts/generate-color-palette.js
index bc4d280e3bc..96302675660 100644
--- a/packages/craftcms-ui/scripts/generate-color-palette.js
+++ b/packages/craftcms-ui/scripts/generate-color-palette.js
@@ -45,7 +45,10 @@ function printStyles() {
   );
 
   lines.push(comment());
-  lines.push('\n:root,\n:host {');
+  // `[data-theme='light']` alongside the root, so a light subtree inside a dark
+  // one re-declares the palette. Without it only dark themes a subtree, and a
+  // light marker keeps inheriting whatever it sits in.
+  lines.push("\n:root,\n:host,\n[data-theme='light'] {");
   lines.push(lightColors);
   lines.push(`  /* Static colors */\n`);
   lines.push(staticColors);
diff --git a/packages/craftcms-ui/src/styles/shared/color-palette.css b/packages/craftcms-ui/src/styles/shared/color-palette.css
index 00f6a78f08c..54dafa4da2a 100644
--- a/packages/craftcms-ui/src/styles/shared/color-palette.css
+++ b/packages/craftcms-ui/src/styles/shared/color-palette.css
@@ -1,7 +1,8 @@
 /* Auto-generated by scripts/generate-color-palette.js — do not edit manually */
 
 :root,
-:host {
+:host,
+[data-theme='light'] {
   --color-gray-50: #eaecef;
   --color-gray-100: #d4d7dd;
   --color-gray-200: #c2c6ce;

From 36997e3d73283af1e65c450eca6bd2b2685b7cfd Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 22 Sep 2026 15:27:11 -0500
Subject: [PATCH 4/5] Height fixes

---
 resources/js/common/components/CpSidebar.vue  |  1 +
 .../js/common/layouts/screens/PageScreen.vue  | 25 ++++++++++++++++++-
 resources/js/common/layouts/screens/types.ts  |  6 +++++
 resources/js/pages/graphql/Explore.vue        |  4 +--
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/resources/js/common/components/CpSidebar.vue b/resources/js/common/components/CpSidebar.vue
index b67b7603760..f827d02fcbd 100644
--- a/resources/js/common/components/CpSidebar.vue
+++ b/resources/js/common/components/CpSidebar.vue
@@ -110,6 +110,7 @@
 
   .cp-sidebar[data-mode='docked'] {
     height: calc(100dvh - var(--cp-debug-bar-height, 0px));
+    max-height: 100%;
     transform: none;
     position: sticky;
     inset-block-start: 0;
diff --git a/resources/js/common/layouts/screens/PageScreen.vue b/resources/js/common/layouts/screens/PageScreen.vue
index 4821f9b3b86..8d89b7247b3 100644
--- a/resources/js/common/layouts/screens/PageScreen.vue
+++ b/resources/js/common/layouts/screens/PageScreen.vue
@@ -59,6 +59,7 @@ const props = withDefaults(defineProps<ScreenProps>(), {
   defaultFormActions: () => ["saveAndContinueEditing"],
   formAdditionalButtons: () => [],
   contentMaxWidth: false,
+  fillViewport: false,
 });
 
 const slots = defineSlots<ScreenSlots>();
@@ -177,7 +178,7 @@ useActionRedirect();
 <template>
   <Head :title="pageTitle" />
   <ScreenSkipLinks :has-sidebar="hasSidebar" :additional-skip-links="additionalSkipLinks" />
-  <div class="bg-header">
+  <div :class="{ 'page-screen': true, 'page-screen--fill-viewport': fillViewport }">
     <CpTopBar :crumbs="crumbs" :has-context-menu="hasContextMenu" />
     <div class="cp">
       <div class="cp__sidebar">
@@ -373,6 +374,28 @@ main,
   height: 100%;
 }
 
+.page-screen {
+  background-color: var(--c-surface-header);
+}
+
+/* The top bar keeps its height and the shell takes the rest. */
+.page-screen--fill-viewport {
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - var(--cp-debug-bar-height, 0px));
+
+  .cp {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .cp__main {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 /**
 Page
  */
diff --git a/resources/js/common/layouts/screens/types.ts b/resources/js/common/layouts/screens/types.ts
index ded5e95d06a..ce3099416bb 100644
--- a/resources/js/common/layouts/screens/types.ts
+++ b/resources/js/common/layouts/screens/types.ts
@@ -41,6 +41,12 @@ export interface ScreenProps {
    * slideout is narrow already.
    */
   contentMaxWidth?: boolean | string;
+  /**
+   * Fits the shell to the viewport instead of letting the document scroll,
+   * so `page-main` gets a definite height to fill (e.g. a full-bleed editor).
+   * Full pages only; a slideout is bounded already.
+   */
+  fillViewport?: boolean;
 }
 
 export interface ScreenEmits {
diff --git a/resources/js/pages/graphql/Explore.vue b/resources/js/pages/graphql/Explore.vue
index bf06953f41a..61924e0df24 100644
--- a/resources/js/pages/graphql/Explore.vue
+++ b/resources/js/pages/graphql/Explore.vue
@@ -40,7 +40,7 @@
 </script>
 
 <template>
-  <AppLayout>
+  <AppLayout fill-viewport>
     <template #page-main>
       <main id="main" tabindex="-1" class="cp-graphiql" data-theme="light">
         <div class="cp-graphiql__header">
@@ -78,7 +78,7 @@
   .cp-graphiql {
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
-    height: 100dvh;
+    height: 100%;
     min-height: 0;
     overflow: hidden;
   }

From d46ef3a98981588e99d721b494b68ca910dd26c1 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 22 Sep 2026 15:28:40 -0500
Subject: [PATCH 5/5] Format

---
 .../js/common/layouts/screens/PageScreen.vue  |  46 ++---
 resources/js/pages/graphql/schemas/Edit.vue   | 112 ++++++-----
 resources/js/pages/graphql/tokens/Edit.vue    | 185 +++++++++---------
 3 files changed, 179 insertions(+), 164 deletions(-)

diff --git a/resources/js/common/layouts/screens/PageScreen.vue b/resources/js/common/layouts/screens/PageScreen.vue
index 4bb08ff008d..6f430273c8c 100644
--- a/resources/js/common/layouts/screens/PageScreen.vue
+++ b/resources/js/common/layouts/screens/PageScreen.vue
@@ -60,10 +60,10 @@
   const props = withDefaults(defineProps<ScreenProps>(), {
     form: null,
     defaultFormActions: () => ['saveAndContinueEditing'],
-  formAdditionalButtons: () => [],
-  contentMaxWidth: false,
-  fillViewport: false,
-});
+    formAdditionalButtons: () => [],
+    contentMaxWidth: false,
+    fillViewport: false,
+  });
 
   const slots = defineSlots<ScreenSlots>();
 
@@ -200,7 +200,9 @@
     :has-sidebar="hasSidebar"
     :additional-skip-links="additionalSkipLinks"
   />
-  <div :class="{ 'page-screen': true, 'page-screen--fill-viewport': fillViewport }">
+  <div
+    :class="{'page-screen': true, 'page-screen--fill-viewport': fillViewport}"
+  >
     <CpTopBar :crumbs="crumbs" :has-context-menu="hasContextMenu" />
     <div class="cp">
       <div class="cp__sidebar">
@@ -423,28 +425,28 @@ Main App shell
   }
 
   .page-screen {
-  background-color: var(--c-surface-header);
-}
-
-/* The top bar keeps its height and the shell takes the rest. */
-.page-screen--fill-viewport {
-  display: flex;
-  flex-direction: column;
-  height: calc(100dvh - var(--cp-debug-bar-height, 0px));
+    background-color: var(--c-surface-header);
+  }
 
-  .cp {
+  /* The top bar keeps its height and the shell takes the rest. */
+  .page-screen--fill-viewport {
     display: flex;
-    flex: 1;
-    min-height: 0;
-  }
+    flex-direction: column;
+    height: calc(100dvh - var(--cp-debug-bar-height, 0px));
 
-  .cp__main {
-    flex: 1;
-    min-width: 0;
+    .cp {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .cp__main {
+      flex: 1;
+      min-width: 0;
+    }
   }
-}
 
-/**
+  /**
 Page
  */
   .cp-page {
diff --git a/resources/js/pages/graphql/schemas/Edit.vue b/resources/js/pages/graphql/schemas/Edit.vue
index 715f382848d..e05018f8e6d 100644
--- a/resources/js/pages/graphql/schemas/Edit.vue
+++ b/resources/js/pages/graphql/schemas/Edit.vue
@@ -1,62 +1,68 @@
 <script setup lang="ts">
-import { t } from "@craftcms/ui";
-import { useAppLayout } from "@/common/composables/useAppLayout";
-import LayoutSlot from "@/common/components/LayoutSlot.vue";
-import CraftInput from "@craftcms/ui/vue/CraftInput.vue";
-import CraftSwitch from "@craftcms/ui/vue/CraftSwitch.vue";
-import PermissionTree from "@craftcms/ui/vue/CraftPermissionTree.vue";
-import { useSettingsSave } from "@/modules/settings/composables/useSettingsSave";
-import { store, update } from "@actions/Gql/SchemasController";
-import { useForm } from "@inertiajs/vue3";
-import CpContainer from "@/common/components/CpContainer.vue";
+  import {t} from '@craftcms/ui';
+  import {useAppLayout} from '@/common/composables/useAppLayout';
+  import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import CraftInput from '@craftcms/ui/vue/CraftInput.vue';
+  import CraftSwitch from '@craftcms/ui/vue/CraftSwitch.vue';
+  import PermissionTree from '@craftcms/ui/vue/CraftPermissionTree.vue';
+  import {useSettingsSave} from '@/modules/settings/composables/useSettingsSave';
+  import {store, update} from '@actions/Gql/SchemasController';
+  import {useForm} from '@inertiajs/vue3';
+  import CpContainer from '@/common/components/CpContainer.vue';
 
-type TokenData = Pick<CraftCms.Cms.Gql.Data.GqlToken, "id" | "enabled" | "expiryDate">;
+  type TokenData = Pick<
+    CraftCms.Cms.Gql.Data.GqlToken,
+    'id' | 'enabled' | 'expiryDate'
+  >;
 
-interface SchemaForm {
-  name: string;
-  permissions: Array<string>;
-  enabled: boolean;
-  expiryDate: string;
-}
+  interface SchemaForm {
+    name: string;
+    permissions: Array<string>;
+    enabled: boolean;
+    expiryDate: string;
+  }
 
-type PermissionGroup = Omit<CraftCms.Cms.User.Data.PermissionGroup, "permissions"> & {
-  permissions: Record<string, CraftCms.Cms.User.Data.Permission>;
-};
+  type PermissionGroup = Omit<
+    CraftCms.Cms.User.Data.PermissionGroup,
+    'permissions'
+  > & {
+    permissions: Record<string, CraftCms.Cms.User.Data.Permission>;
+  };
 
-const props = defineProps<{
-  schema: CraftCms.Cms.Gql.Data.GqlSchema;
-  token: TokenData | null;
-  permissions: Array<PermissionGroup>;
-  readOnly?: boolean;
-}>();
+  const props = defineProps<{
+    schema: CraftCms.Cms.Gql.Data.GqlSchema;
+    token: TokenData | null;
+    permissions: Array<PermissionGroup>;
+    readOnly?: boolean;
+  }>();
 
-const form = useForm<SchemaForm>({
-  name: props.schema.name ?? "",
-  permissions: props.schema.scope ?? [],
-  enabled: props.token?.enabled ?? true,
-  expiryDate: props.token?.expiryDate ?? "",
-});
-const initialPermissions = new Set(form.permissions);
+  const form = useForm<SchemaForm>({
+    name: props.schema.name ?? '',
+    permissions: props.schema.scope ?? [],
+    enabled: props.token?.enabled ?? true,
+    expiryDate: props.token?.expiryDate ?? '',
+  });
+  const initialPermissions = new Set(form.permissions);
 
-const routeAction = () => {
-  if (!props.schema.id) {
-    return store();
-  }
+  const routeAction = () => {
+    if (!props.schema.id) {
+      return store();
+    }
 
-  return update({
-    schemaId: props.schema.isPublic ? "public" : props.schema.id,
-  });
-};
+    return update({
+      schemaId: props.schema.isPublic ? 'public' : props.schema.id,
+    });
+  };
 
-const { save } = useSettingsSave(form, routeAction, {
-  passwordConfirmation: {
-    required: ({ permissions }) =>
-      permissions.length !== initialPermissions.size ||
-      permissions.some((permission) => !initialPermissions.has(permission)),
-  },
-});
+  const {save} = useSettingsSave(form, routeAction, {
+    passwordConfirmation: {
+      required: ({permissions}) =>
+        permissions.length !== initialPermissions.size ||
+        permissions.some((permission) => !initialPermissions.has(permission)),
+    },
+  });
 
-useAppLayout({ form, onSave: save });
+  useAppLayout({form, onSave: save});
 </script>
 
 <template>
@@ -79,10 +85,14 @@ useAppLayout({ form, onSave: save });
 
       <section class="grid gap-3">
         <h2 class="text-base">
-          {{ t("Choose the available content for querying with this schema:") }}
+          {{ t('Choose the available content for querying with this schema:') }}
         </h2>
 
-        <PermissionTree :groups="permissions" v-model="form.permissions" :disabled="readOnly" />
+        <PermissionTree
+          :groups="permissions"
+          v-model="form.permissions"
+          :disabled="readOnly"
+        />
       </section>
     </div>
   </CpContainer>
diff --git a/resources/js/pages/graphql/tokens/Edit.vue b/resources/js/pages/graphql/tokens/Edit.vue
index 21b93cecf26..6e1bb105a64 100644
--- a/resources/js/pages/graphql/tokens/Edit.vue
+++ b/resources/js/pages/graphql/tokens/Edit.vue
@@ -1,92 +1,93 @@
 <script setup lang="ts">
-import { computed, nextTick, ref } from "vue";
-import { t } from "@craftcms/ui";
-import LayoutSlot from "@/common/components/LayoutSlot.vue";
-import Select from "@/common/form/Select.vue";
-import type { BaseOption } from "@/common/types";
-import CraftInput from "@craftcms/ui/vue/CraftInput.vue";
-import CraftSwitch from "@craftcms/ui/vue/CraftSwitch.vue";
-import { useAppLayout } from "@/common/composables/useAppLayout";
-import { useSettingsSave } from "@/modules/settings/composables/useSettingsSave";
-import {
-  accessToken as revealAccessToken,
-  generate,
-  store,
-  update,
-} from "@actions/Gql/TokensController";
-import { useForm, useHttp } from "@inertiajs/vue3";
-import { elevatedSessionManager } from "@/modules/auth/elevated-session";
-import CpContainer from "@/common/components/CpContainer.vue";
-
-type TokenData = Pick<
-  CraftCms.Cms.Gql.Data.GqlToken,
-  "id" | "uid" | "name" | "schemaId" | "enabled" | "expiryDate"
->;
-
-type CopyButtonElement = HTMLElement & { copyValue: () => Promise<void> };
-
-type TokenResponse = {
-  accessToken: string;
-};
-
-const maskedToken = "••••••••••••••••••••••••••••••••";
-
-const props = defineProps<{
-  token: TokenData;
-  accessToken: string | null;
-  schemaOptions: Array<BaseOption>;
-  readOnly?: boolean;
-}>();
-
-const copyButton = ref<CopyButtonElement | null>(null);
-const visibleAccessToken = ref(props.accessToken);
-const tokenRequest = useHttp<Record<string, never>, TokenResponse>({});
-const loadingToken = computed(() => tokenRequest.processing);
-
-const form = useForm({
-  name: props.token.name ?? "",
-  schema: props.token.schemaId?.toString() ?? "",
-  enabled: props.token.enabled,
-  expiryDate: props.token.expiryDate ?? "",
-  accessToken: props.accessToken ?? "",
-});
-
-const authorizationHeader = computed(
-  () => `Authorization: Bearer ${visibleAccessToken.value ?? maskedToken}`,
-);
-
-const routeAction = () => (props.token.id ? update({ tokenId: props.token.id }) : store());
-
-const { save } = useSettingsSave(form, routeAction, {
-  passwordConfirmation: { required: () => true },
-});
-
-useAppLayout({ form, onSave: save });
-
-async function revealToken(tokenId: number) {
-  const data = await tokenRequest.post(revealAccessToken({ tokenId }).url);
-  visibleAccessToken.value = data.accessToken;
-
-  return data.accessToken;
-}
-
-async function copyHeader() {
-  const tokenId = props.token.id;
-
-  if (!visibleAccessToken.value && tokenId) {
-    await elevatedSessionManager.run(async () => {
-      await revealToken(tokenId);
-      await nextTick();
-      await copyButton.value?.copyValue();
-    });
+  import {computed, nextTick, ref} from 'vue';
+  import {t} from '@craftcms/ui';
+  import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import Select from '@/common/form/Select.vue';
+  import type {BaseOption} from '@/common/types';
+  import CraftInput from '@craftcms/ui/vue/CraftInput.vue';
+  import CraftSwitch from '@craftcms/ui/vue/CraftSwitch.vue';
+  import {useAppLayout} from '@/common/composables/useAppLayout';
+  import {useSettingsSave} from '@/modules/settings/composables/useSettingsSave';
+  import {
+    accessToken as revealAccessToken,
+    generate,
+    store,
+    update,
+  } from '@actions/Gql/TokensController';
+  import {useForm, useHttp} from '@inertiajs/vue3';
+  import {elevatedSessionManager} from '@/modules/auth/elevated-session';
+  import CpContainer from '@/common/components/CpContainer.vue';
+
+  type TokenData = Pick<
+    CraftCms.Cms.Gql.Data.GqlToken,
+    'id' | 'uid' | 'name' | 'schemaId' | 'enabled' | 'expiryDate'
+  >;
+
+  type CopyButtonElement = HTMLElement & {copyValue: () => Promise<void>};
+
+  type TokenResponse = {
+    accessToken: string;
+  };
+
+  const maskedToken = '••••••••••••••••••••••••••••••••';
+
+  const props = defineProps<{
+    token: TokenData;
+    accessToken: string | null;
+    schemaOptions: Array<BaseOption>;
+    readOnly?: boolean;
+  }>();
+
+  const copyButton = ref<CopyButtonElement | null>(null);
+  const visibleAccessToken = ref(props.accessToken);
+  const tokenRequest = useHttp<Record<string, never>, TokenResponse>({});
+  const loadingToken = computed(() => tokenRequest.processing);
+
+  const form = useForm({
+    name: props.token.name ?? '',
+    schema: props.token.schemaId?.toString() ?? '',
+    enabled: props.token.enabled,
+    expiryDate: props.token.expiryDate ?? '',
+    accessToken: props.accessToken ?? '',
+  });
+
+  const authorizationHeader = computed(
+    () => `Authorization: Bearer ${visibleAccessToken.value ?? maskedToken}`
+  );
+
+  const routeAction = () =>
+    props.token.id ? update({tokenId: props.token.id}) : store();
+
+  const {save} = useSettingsSave(form, routeAction, {
+    passwordConfirmation: {required: () => true},
+  });
+
+  useAppLayout({form, onSave: save});
+
+  async function revealToken(tokenId: number) {
+    const data = await tokenRequest.post(revealAccessToken({tokenId}).url);
+    visibleAccessToken.value = data.accessToken;
+
+    return data.accessToken;
   }
-}
 
-async function regenerateToken() {
-  const data = await tokenRequest.post(generate().url);
-  visibleAccessToken.value = data.accessToken;
-  form.accessToken = data.accessToken;
-}
+  async function copyHeader() {
+    const tokenId = props.token.id;
+
+    if (!visibleAccessToken.value && tokenId) {
+      await elevatedSessionManager.run(async () => {
+        await revealToken(tokenId);
+        await nextTick();
+        await copyButton.value?.copyValue();
+      });
+    }
+  }
+
+  async function regenerateToken() {
+    const data = await tokenRequest.post(generate().url);
+    visibleAccessToken.value = data.accessToken;
+    form.accessToken = data.accessToken;
+  }
 </script>
 
 <template>
@@ -107,7 +108,9 @@ async function regenerateToken() {
       <template v-if="schemaOptions.length">
         <Select
           :label="t('GraphQL Schema')"
-          :help-text="t('Choose which GraphQL schema this token has access to.')"
+          :help-text="
+            t('Choose which GraphQL schema this token has access to.')
+          "
           id="schema"
           name="schema"
           v-model="form.schema"
@@ -118,7 +121,7 @@ async function regenerateToken() {
       </template>
 
       <craft-callout v-else data-color="warning">
-        {{ t("No schemas exist yet to assign to this token.") }}
+        {{ t('No schemas exist yet to assign to this token.') }}
       </craft-callout>
 
       <hr />
@@ -128,7 +131,7 @@ async function regenerateToken() {
           :label="t('Authorization Header')"
           :help-text="
             t(
-              'The `Authorization` header that should be sent with GraphQL API requests to use this token.',
+              'The `Authorization` header that should be sent with GraphQL API requests to use this token.'
             )
           "
           id="auth-header"
@@ -147,7 +150,7 @@ async function regenerateToken() {
             @click="copyHeader"
           >
             <craft-icon name="copy" slot="prefix"></craft-icon>
-            {{ t("Copy") }}
+            {{ t('Copy') }}
           </craft-button>
 
           <craft-copy-button
@@ -166,7 +169,7 @@ async function regenerateToken() {
           :disabled="readOnly || loadingToken"
           @click="regenerateToken"
         >
-          {{ t("Regenerate") }}
+          {{ t('Regenerate') }}
         </craft-button>
       </div>
     </div>