Skip to content

fix: stop configurator clipping inside WP admin's layout chrome #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 2 commits into from
Jul 1, 2026
Merged

fix: stop configurator clipping inside WP admin's layout chrome #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b80767c
fix: stop configurator clipping inside WP admin's layout chrome
claude Jun 30, 2026
3d6662a
fix: re-sync hasWpBoot() layout fix, make app-page CSS notice-safe
claude Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 51 additions & 51 deletions SLASHED-for-WP/admin-app/.vendored-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,205 +3,205 @@
"description": "Files vendored from the SLASHED framework configurator. DO NOT edit directly — make changes in codeslash-dev/SLASHED → configurator/src/ and re-run npm run sync.",
"frameworkRepo": "https://github.com/codeslash-dev/SLASHED",
"configuratorSrc": "configurator/src/",
"source": "github:codeslash-dev/slashed@main",
"syncedAt": "2026-06-30T22:49:00.416Z"
"source": "local",
"syncedAt": "2026-06-30T23:25:43.548Z"
},
"vendoredFiles": [
{
"file": "src/app.css",
"source": "github:codeslash-dev/slashed/configurator/src/app.css@main"
"source": "local:configurator/src/app.css"
},
{
"file": "src/App.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/App.svelte@main"
"source": "local:configurator/src/App.svelte"
},
{
"file": "src/components/CommandPalette.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/CommandPalette.svelte@main"
"source": "local:configurator/src/components/CommandPalette.svelte"
},
{
"file": "src/components/DomainPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/DomainPanel.svelte@main"
"source": "local:configurator/src/components/DomainPanel.svelte"
},
{
"file": "src/components/inputs/ClampField.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ClampField.svelte@main"
"source": "local:configurator/src/components/inputs/ClampField.svelte"
},
{
"file": "src/components/inputs/ColorInput.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ColorInput.svelte@main"
"source": "local:configurator/src/components/inputs/ColorInput.svelte"
},
{
"file": "src/components/inputs/OklchColorDesk.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/OklchColorDesk.svelte@main"
"source": "local:configurator/src/components/inputs/OklchColorDesk.svelte"
},
{
"file": "src/components/inputs/PowerKnobRow.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/PowerKnobRow.svelte@main"
"source": "local:configurator/src/components/inputs/PowerKnobRow.svelte"
},
{
"file": "src/components/inputs/RangeWithNumber.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/RangeWithNumber.svelte@main"
"source": "local:configurator/src/components/inputs/RangeWithNumber.svelte"
},
{
"file": "src/components/inputs/SliderRow.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/SliderRow.svelte@main"
"source": "local:configurator/src/components/inputs/SliderRow.svelte"
},
{
"file": "src/components/inputs/TokenRow.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/TokenRow.svelte@main"
"source": "local:configurator/src/components/inputs/TokenRow.svelte"
},
{
"file": "src/components/panels/AllTokensTab.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/AllTokensTab.svelte@main"
"source": "local:configurator/src/components/panels/AllTokensTab.svelte"
},
{
"file": "src/components/panels/BordersPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/BordersPanel.svelte@main"
"source": "local:configurator/src/components/panels/BordersPanel.svelte"
},
{
"file": "src/components/panels/CheatsheetPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/CheatsheetPanel.svelte@main"
"source": "local:configurator/src/components/panels/CheatsheetPanel.svelte"
},
{
"file": "src/components/panels/ColorsPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ColorsPanel.svelte@main"
"source": "local:configurator/src/components/panels/ColorsPanel.svelte"
},
{
"file": "src/components/panels/EffectsPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/EffectsPanel.svelte@main"
"source": "local:configurator/src/components/panels/EffectsPanel.svelte"
},
{
"file": "src/components/panels/ExportPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ExportPanel.svelte@main"
"source": "local:configurator/src/components/panels/ExportPanel.svelte"
},
{
"file": "src/components/panels/GenericTokenPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/GenericTokenPanel.svelte@main"
"source": "local:configurator/src/components/panels/GenericTokenPanel.svelte"
},
{
"file": "src/components/panels/HomePanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/HomePanel.svelte@main"
"source": "local:configurator/src/components/panels/HomePanel.svelte"
},
{
"file": "src/components/panels/LayoutPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/LayoutPanel.svelte@main"
"source": "local:configurator/src/components/panels/LayoutPanel.svelte"
},
{
"file": "src/components/panels/MacrosPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/MacrosPanel.svelte@main"
"source": "local:configurator/src/components/panels/MacrosPanel.svelte"
},
{
"file": "src/components/panels/MiscPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/MiscPanel.svelte@main"
"source": "local:configurator/src/components/panels/MiscPanel.svelte"
},
{
"file": "src/components/panels/MotionPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/MotionPanel.svelte@main"
"source": "local:configurator/src/components/panels/MotionPanel.svelte"
},
{
"file": "src/components/panels/ShadowsPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ShadowsPanel.svelte@main"
"source": "local:configurator/src/components/panels/ShadowsPanel.svelte"
},
{
"file": "src/components/panels/SpacingPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/SpacingPanel.svelte@main"
"source": "local:configurator/src/components/panels/SpacingPanel.svelte"
},
{
"file": "src/components/panels/ThemesPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ThemesPanel.svelte@main"
"source": "local:configurator/src/components/panels/ThemesPanel.svelte"
},
{
"file": "src/components/panels/TypographyPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/TypographyPanel.svelte@main"
"source": "local:configurator/src/components/panels/TypographyPanel.svelte"
},
{
"file": "src/components/panels/WcagPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/WcagPanel.svelte@main"
"source": "local:configurator/src/components/panels/WcagPanel.svelte"
},
{
"file": "src/components/shell/PreviewPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/PreviewPanel.svelte@main"
"source": "local:configurator/src/components/shell/PreviewPanel.svelte"
},
{
"file": "src/components/shell/SidebarNav.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/SidebarNav.svelte@main"
"source": "local:configurator/src/components/shell/SidebarNav.svelte"
},
{
"file": "src/components/shell/StatusBar.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/StatusBar.svelte@main"
"source": "local:configurator/src/components/shell/StatusBar.svelte"
},
{
"file": "src/components/shell/StudioHeader.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/StudioHeader.svelte@main"
"source": "local:configurator/src/components/shell/StudioHeader.svelte"
},
{
"file": "src/data/api-index.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/api-index.generated.json@main"
"source": "local:configurator/src/data/api-index.generated.json"
},
{
"file": "src/data/bundles.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/bundles.generated.json@main"
"source": "local:configurator/src/data/bundles.generated.json"
},
{
"file": "src/data/classes.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/classes.generated.json@main"
"source": "local:configurator/src/data/classes.generated.json"
},
{
"file": "src/data/domain-patterns.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/domain-patterns.json@main"
"source": "local:configurator/src/data/domain-patterns.json"
},
{
"file": "src/data/token-registry.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/token-registry.generated.json@main"
"source": "local:configurator/src/data/token-registry.generated.json"
},
{
"file": "src/lib/basics.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/basics.ts@main"
"source": "local:configurator/src/lib/basics.ts"
},
{
"file": "src/lib/codec.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/codec.ts@main"
"source": "local:configurator/src/lib/codec.ts"
},
{
"file": "src/lib/colorUtils.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/colorUtils.ts@main"
"source": "local:configurator/src/lib/colorUtils.ts"
},
{
"file": "src/lib/domains.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/domains.ts@main"
"source": "local:configurator/src/lib/domains.ts"
},
{
"file": "src/lib/lumlockerPreview.svelte.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/lumlockerPreview.svelte.ts@main"
"source": "local:configurator/src/lib/lumlockerPreview.svelte.ts"
},
{
"file": "src/lib/persistence.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/persistence.ts@main"
"source": "local:configurator/src/lib/persistence.ts"
},
{
"file": "src/lib/powerKnobs.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/powerKnobs.ts@main"
"source": "local:configurator/src/lib/powerKnobs.ts"
},
{
"file": "src/lib/previewResolver.svelte.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/previewResolver.svelte.ts@main"
"source": "local:configurator/src/lib/previewResolver.svelte.ts"
},
{
"file": "src/lib/savedThemes.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/savedThemes.ts@main"
"source": "local:configurator/src/lib/savedThemes.ts"
},
{
"file": "src/main.ts",
"source": "github:codeslash-dev/slashed/configurator/src/main.ts@main"
"source": "local:configurator/src/main.ts"
},
{
"file": "src/types.ts",
"source": "github:codeslash-dev/slashed/configurator/src/types.ts@main"
"source": "local:configurator/src/types.ts"
},
{
"file": "src/vite-env.d.ts",
"source": "github:codeslash-dev/slashed/configurator/src/vite-env.d.ts@main"
"source": "local:configurator/src/vite-env.d.ts"
}
]
}
13 changes: 11 additions & 2 deletions SLASHED-for-WP/admin-app/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import PreviewPanel from './components/shell/PreviewPanel.svelte';
import DomainPanel from './components/DomainPanel.svelte';
import { fa } from './lib/codec';
import { loadInitialOverrides, injectLivePreview, saveOverrides } from './lib/persistence';
import { loadInitialOverrides, injectLivePreview, saveOverrides, hasWpBoot } from './lib/persistence';
import { domainOf } from './lib/domains';
import tokensRaw from './data/api-index.generated.json';
import CommandPalette from './components/CommandPalette.svelte';
Expand All @@ -31,6 +31,15 @@
return map;
}

// Embedded hosts (e.g. the WP admin page) mount us into a sized container in
// normal document flow, not the document body — w-screen/h-screen would then
// size to the viewport while still being offset by the host's own layout
// chrome, overflowing past its right edge. Standalone keeps viewport units
// since it owns the whole page. Uses hasWpBoot() (any host), not
// isEmbedded() (REST persistence specifically) — a host can mount us
// without configuring REST.
const embedded = hasWpBoot();

Comment thread
qodo-code-review[bot] marked this conversation as resolved.
// Core state
let overrides = $state<Record<string, string>>(loadInitialOverrides());
let past = $state<Record<string, string>[]>([]);
Expand Down Expand Up @@ -232,7 +241,7 @@
});
</script>

<div class="w-screen h-screen flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans">
<div class="{embedded ? 'w-full h-full' : 'w-screen h-screen'} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans">
<!-- Top header bar -->
<StudioHeader
{overridesCount}
Expand Down
10 changes: 10 additions & 0 deletions SLASHED-for-WP/admin-app/src/lib/persistence.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,16 @@ export function isEmbedded(): boolean {
return Boolean(wpBoot()?.rest?.url);
}

/**
* Whether a host (e.g. the WP admin page) mounted us into its own container,
* regardless of whether REST persistence is configured. This is the same
* boundary loadInitialOverrides() uses, and the one layout sizing needs —
* a host can supply window.slashedApp without `rest` per its typing.
*/
export function hasWpBoot(): boolean {
return Boolean(wpBoot());
}

export function loadInitialOverrides(): Record<string, string> {
if (typeof window === "undefined") return {};

Expand Down
156 changes: 78 additions & 78 deletions SLASHED-for-WP/assets/admin-app/app.js
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 42 additions & 0 deletions SLASHED-for-WP/includes/class-token-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,25 @@ class Slashed_Token_Page {
public function __construct() {
add_action( 'admin_menu', array( $this, 'register_menu' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
add_filter( 'admin_body_class', array( $this, 'add_body_class' ) );
}

/**
* Tag <body> with a page-specific class on the Tokens page only, so the
* layout CSS in enqueue_assets() can't leak onto other admin screens.
*
* @param string $classes Space-separated body classes.
* @return string
*/
public function add_body_class( $classes ) {
if ( '' === $this->hook_suffix ) {
return $classes;
}
$screen = get_current_screen();
if ( $screen && $screen->id === $this->hook_suffix ) {
$classes .= ' slashed-tokens-page';
}
return $classes;
}

/**
Expand Down Expand Up @@ -113,6 +132,29 @@ public function enqueue_assets( $hook_suffix ) {
$css_version
);

// The app shell fills its mount point edge-to-edge (it owns its own
// header/sidebar/scroll regions). Strip the WP admin page chrome's
// margin/padding around it and give its ancestor chain an explicit
// height, so the app's `w-full h-full` root actually has real
// dimensions to fill instead of overflowing past the right edge of
// the content area like raw viewport units would.
//
// #wpbody-content can also contain WP core/plugin admin notices,
// printed as siblings of .wrap *before* it. A plain fixed height on
// every ancestor would let a notice push .wrap (and the app inside
// it) past the bottom edge with no scroll to reach it. Using flex
// instead lets notices keep their natural height while .wrap claims
// only what's left.
wp_add_inline_style(
'slashed-admin-app',
'body.slashed-tokens-page #wpcontent { padding-left: 0; }' .
'body.slashed-tokens-page #wpbody-content { padding-bottom: 0; }' .
'body.slashed-tokens-page #wpcontent, body.slashed-tokens-page #wpbody, body.slashed-tokens-page #wpbody-content { height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); }' .
'body.slashed-tokens-page #wpbody-content { display: flex; flex-direction: column; overflow: auto; }' .
'body.slashed-tokens-page .wrap { margin: 0; flex: 1 1 auto; min-height: 0; display: flex; }' .
'body.slashed-tokens-page #slashed-admin-app { flex: 1 1 auto; min-height: 0; width: 100%; }'
);
Comment thread
qodo-code-review[bot] marked this conversation as resolved.

wp_enqueue_script(
'slashed-admin-app',
$plugin_url . 'assets/admin-app/app.js',
Expand Down