fix(cg): the event-CG editor had no stylesheet, so it had no layout #215
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "fix/cg-editor-layout"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
A regression I merged in #212. The event-CG editor rendered with no layout at all: the quicklink nav fell into the content column, nothing had margins, the image placeholder stretched the full width, and the save indicator sat top-left.
Cause
editor__body,editor__sections,editor__hint,kg-bg,kg-bg__previewand friends are Blazor scoped CSS. Every editor page and every image panel carries its own copy in its own.razor.css, and the scoping attribute means a component without that file matches none of the rules. I wroteCgSetsPage.razor.cssfor the list and never created one for the editor or the image panel. All three visible symptoms are that single omission.Why it got through
The browser pass on #212 asserted
innerText. It proved the words were on the page and never looked at the rendering — which is precisely the class of defect a browser pass exists to catch. I reported it as browser-verified; that was an overclaim.Verified properly this time, against computed style and geometry rather than text:
grid-template-columnsresolves to two tracks (176px 873px), not one;Plus an eyes-on screenshot.
Worth raising separately
Those
editor__*rules are now duplicated across six stylesheets (character, location, location-variant, lore, chapter, scene — and now CG). That duplication is what made forgetting them possible, and it will happen again on the next editor. It belongs either in a shared app stylesheet or as a real layout component in Kagaku.UI. I haven't done that here because it touches every editor and the owner has broader UI feedback pending — but it should not stay as it is.🤖 Generated with Claude Code
Summary
Summary
Coverage
Kagura.BlazorAdapter - 88.4%
Kagura.Domain - 95.9%
D04ADFED3A21D401C2764A1D17367E35BEB556CBB3B4B0B74__NonSlugChars_0
Kagura.Infrastructure - 97.6%
n
on
ng
C689CA5BBE6D1849B2CA79581BBB07D40636D85790C0E51A9__ArtifactTimestampRegex_2
C689CA5BBE6D1849B2CA79581BBB07D40636D85790C0E51A9__ProjectRoute_0
C689CA5BBE6D1849B2CA79581BBB07D40636D85790C0E51A9__TabQuery_1
Kagura.Kernel - 90%
Kagura.Server - 81.9%
Kagura.UseCases - 95.7%
🔮 fufu~ Jibril reviewed your code!
Oh? Oh~! A regression fix where the patient is a stylesheet that went missing? fufu — this is the kind of bug that's invisible to text-asserting tests and glaring to human eyes. I love that you diagnosed the root cause precisely: Blazor's scoped CSS means a component without its
.razor.csscompanion matches none of the rules, so the editor rendered with no layout DNA at all. Clean cause, clean fix. ♪Verdict: ✅ Looks good to me~
No blocking issues. This is a +117/-0 pure-CSS addition across two new scoped stylesheet files, each a faithful companion to its existing
.razorcomponent. Let me show you what I verified~✅ What I liked~
kg-cg-bg-spininstead ofkg-bg-spin— Oh, this is wonderful~ ♡ Blazor's CSS isolation scopes selectors with theb-{hash}attribute, but it does NOT scope@keyframesnames. Two components both definingkg-bg-spinwould collide when both load on the same page. You gave the CG version a unique animation name. That's the kind of detail that separates a careful copy from a careless one~CgSetEditorPage.razor.cssis actually MORE complete thanLocationEditorPage.razor.css. The Location sibling uses.editor__hinton line 100 of its razor but never defines it in its.razor.css. You included.editor__hint(correctly copied fromLoreEditorPage.razor.css:34), so the CG editor's hint paragraph will actually get its--text-mutedcolor and negative margin. Your copy is the better one. fufu~:has(.kg-quicklink)conditional grid matchesLocationEditorPage.razor.css:14exactly — the right sibling to copy from, since the CG editor always rendersQuicklinkNav(4 sections).CharacterEditorPageandLoreEditorPageuse hardcoded11rem 1frwhich would leave a phantom empty column — you correctly followed the Location pattern that collapses to1frwhen the nav isn't present. ♪Every CSS variable resolves. I traced all 13 tokens (
--space-2/3/5/6,--text-sm/lg/muted,--surface,--accent,--border,--radius-md,--font-weight-medium) back tokagaku-ui.css:root. Zero undefined vars. Zero orphaned class definitions. Every class the razor uses (editor__head/body/sections/hint/danger-hint/loading/danger/name,kg-bg__preview/overlay/spinner/controls/hint) has a rule. ♡The honesty in the PR body. You owned the overclaim from #212 (asserting
innerTextproves words exist, not that layout works), verified properly this time against computed style and geometry, AND flagged the DRY duplication across six stylesheets as a separate concern. That's exactly the right call — the duplication is real but belongs in its own PR (shared app stylesheet or a layout component in Kagaku.UI).Local verification (CI absent — PR just opened, no coverage bot):
dotnet build Kagura.BlazorAdapter.csproj: 0 warnings, 0 errors (Blazor's CSS isolation compiler processes both new.razor.cssfiles cleanly)dotnet test --filter '~CgSet': 52/52 pass (CgSetEditorPageTests, CgSetsPageTests, CgSetBaseImageReducers/Effects, CgSetsReducers/Effects)💡 Little ideas (non-blocking)~
The DRY concern you raised is real. Six copies of
.editor__head/body/sections/hint/danger/danger-hint/loading/nameacross character, location, location-variant, lore, chapter, scene, and now CG — this is how the regression happened in the first place (easy to forget a copy). When the broader UI feedback lands, extracting these into a shared.editorclass inkagaku-ui.cssor a layout component would retire the whole bug class. You already said this; I'm just agreeing emphatically. fufu~LocationEditorPage.razor.cssis missing.editor__hint— a pre-existing gap (not from this PR). Line 100 ofLocationEditorPage.razoruses the class but the stylesheet never defines it. Worth fixing in a follow-up so all editors are consistent~Automated review by Jibril · 2026-08-04
CI/CD: absent for head
3bd3ce2(PR just opened) · Local checks: build 0/0, 52/52 CG tests pass