From b2e623acc449c8c3b928a190c26643a8c40e3c4e Mon Sep 17 00:00:00 2001 From: Kirill Kolesnikov Date: Sat, 5 Sep 2026 16:11:26 +0700 Subject: [PATCH] Give App Shell and Document Layout regions the padding/background/border they never had You pointed at a real screenshot: App Shell's sidebar and Document Layout's sidebar/aside had their content sitting flush against the edge, no visible panel around it at all. Checked why rather than guessing at a fix -- .cm-app-shell__sidebar, __aside, __content, __header, __subheader, and __footer, and the equivalent five regions in document-layout.css, had never had padding, and the sidebar/aside additionally never had a background or border. This predates the fidelity-restoration PR that just merged (#22): that PR fixed positioning, responsiveness, and sticky behavior for both files but left this specific gap, because I verified those changes by checking for console warnings and correct attribute/behavior state, not by looking hard enough at what was actually on screen. VueForge's fd793696 had exactly this chrome: .vf-sidebar-area / .vf-aside-area carried sidebarBackground/sidebarBorder and asidePaddingBlock/Inline, and .vf-content-area carried its own padding. Added the same shape here, using this package's own tokens rather than porting VueForge's token names: --cm-space-3 padding and --cm-color-background-surface on sidebar/aside/content, with border-inline-end on the sidebar and border-inline-start on the aside (--cm-color-border-subtle, matching every other border already in both files); --cm-space-2 --cm-space-3 padding on header/subheader/footer, matching the padding shorthand admin-layout.css and admin-shell.css already use for their own header/footer. Verified live against the real dev server, not by reading the diff: screenshotted both layouts after rebuilding, at the viewport width from your screenshot, and confirmed sidebar/aside now render as distinct panels with visible backgrounds and borders, with their slot content no longer touching the edges. npm run verify passes in full. --- packages/css/src/components/app-shell.css | 14 ++++++++++++++ packages/css/src/components/document-layout.css | 14 ++++++++++++++ .../assets/css/css/components/app-shell.css | 14 ++++++++++++++ .../assets/css/css/components/document-layout.css | 14 ++++++++++++++ packages/razor/resources/assets/manifest.json | 4 ++-- 5 files changed, 58 insertions(+), 2 deletions(-) diff --git a/packages/css/src/components/app-shell.css b/packages/css/src/components/app-shell.css index b03cbf4d..f3141e8b 100644 --- a/packages/css/src/components/app-shell.css +++ b/packages/css/src/components/app-shell.css @@ -11,6 +11,7 @@ } .cm-app-shell__header { + padding: var(--cm-space-2) var(--cm-space-3); border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-surface); } @@ -25,6 +26,7 @@ position: sticky; inset-block-start: var(--cm-sticky-header-offset, 0); z-index: var(--cm-z-index-sticky, 10); + padding: var(--cm-space-2) var(--cm-space-3); border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-surface-subtle); } @@ -55,13 +57,25 @@ max-block-size: calc(100dvb - var(--cm-sticky-top-offset, 0)); overflow-y: auto; min-inline-size: 0; + padding: var(--cm-space-3); + background: var(--cm-color-background-surface); +} + +.cm-app-shell__sidebar { + border-inline-end: var(--cm-border-width) solid var(--cm-color-border-subtle); +} + +.cm-app-shell__aside { + border-inline-start: var(--cm-border-width) solid var(--cm-color-border-subtle); } .cm-app-shell__content { min-inline-size: 0; + padding: var(--cm-space-3); } .cm-app-shell__footer { + padding: var(--cm-space-2) var(--cm-space-3); border-block-start: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-surface); } diff --git a/packages/css/src/components/document-layout.css b/packages/css/src/components/document-layout.css index 30b261a3..3e22ea06 100644 --- a/packages/css/src/components/document-layout.css +++ b/packages/css/src/components/document-layout.css @@ -22,6 +22,7 @@ position: sticky; inset-block-start: 0; z-index: var(--cm-z-index-sticky, 10); + padding: var(--cm-space-2) var(--cm-space-3); border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-canvas); } @@ -30,6 +31,7 @@ position: sticky; inset-block-start: var(--cm-sticky-header-offset, 0); z-index: var(--cm-z-index-sticky, 10); + padding: var(--cm-space-2) var(--cm-space-3); background: var(--cm-color-background-canvas); } @@ -56,13 +58,25 @@ max-block-size: calc(100dvb - var(--cm-sticky-top-offset, 0)); overflow-y: auto; min-inline-size: 0; + padding: var(--cm-space-3); + background: var(--cm-color-background-surface); +} + +.cm-document-layout__sidebar { + border-inline-end: var(--cm-border-width) solid var(--cm-color-border-subtle); +} + +.cm-document-layout__aside { + border-inline-start: var(--cm-border-width) solid var(--cm-color-border-subtle); } .cm-document-layout__main { min-inline-size: 0; + padding: var(--cm-space-3); } .cm-document-layout__footer { + padding: var(--cm-space-2) var(--cm-space-3); border-block-start: var(--cm-border-width) solid var(--cm-color-border-subtle); } diff --git a/packages/razor/resources/assets/css/css/components/app-shell.css b/packages/razor/resources/assets/css/css/components/app-shell.css index b03cbf4d..f3141e8b 100644 --- a/packages/razor/resources/assets/css/css/components/app-shell.css +++ b/packages/razor/resources/assets/css/css/components/app-shell.css @@ -11,6 +11,7 @@ } .cm-app-shell__header { + padding: var(--cm-space-2) var(--cm-space-3); border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-surface); } @@ -25,6 +26,7 @@ position: sticky; inset-block-start: var(--cm-sticky-header-offset, 0); z-index: var(--cm-z-index-sticky, 10); + padding: var(--cm-space-2) var(--cm-space-3); border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-surface-subtle); } @@ -55,13 +57,25 @@ max-block-size: calc(100dvb - var(--cm-sticky-top-offset, 0)); overflow-y: auto; min-inline-size: 0; + padding: var(--cm-space-3); + background: var(--cm-color-background-surface); +} + +.cm-app-shell__sidebar { + border-inline-end: var(--cm-border-width) solid var(--cm-color-border-subtle); +} + +.cm-app-shell__aside { + border-inline-start: var(--cm-border-width) solid var(--cm-color-border-subtle); } .cm-app-shell__content { min-inline-size: 0; + padding: var(--cm-space-3); } .cm-app-shell__footer { + padding: var(--cm-space-2) var(--cm-space-3); border-block-start: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-surface); } diff --git a/packages/razor/resources/assets/css/css/components/document-layout.css b/packages/razor/resources/assets/css/css/components/document-layout.css index 30b261a3..3e22ea06 100644 --- a/packages/razor/resources/assets/css/css/components/document-layout.css +++ b/packages/razor/resources/assets/css/css/components/document-layout.css @@ -22,6 +22,7 @@ position: sticky; inset-block-start: 0; z-index: var(--cm-z-index-sticky, 10); + padding: var(--cm-space-2) var(--cm-space-3); border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle); background: var(--cm-color-background-canvas); } @@ -30,6 +31,7 @@ position: sticky; inset-block-start: var(--cm-sticky-header-offset, 0); z-index: var(--cm-z-index-sticky, 10); + padding: var(--cm-space-2) var(--cm-space-3); background: var(--cm-color-background-canvas); } @@ -56,13 +58,25 @@ max-block-size: calc(100dvb - var(--cm-sticky-top-offset, 0)); overflow-y: auto; min-inline-size: 0; + padding: var(--cm-space-3); + background: var(--cm-color-background-surface); +} + +.cm-document-layout__sidebar { + border-inline-end: var(--cm-border-width) solid var(--cm-color-border-subtle); +} + +.cm-document-layout__aside { + border-inline-start: var(--cm-border-width) solid var(--cm-color-border-subtle); } .cm-document-layout__main { min-inline-size: 0; + padding: var(--cm-space-3); } .cm-document-layout__footer { + padding: var(--cm-space-2) var(--cm-space-3); border-block-start: var(--cm-border-width) solid var(--cm-color-border-subtle); } diff --git a/packages/razor/resources/assets/manifest.json b/packages/razor/resources/assets/manifest.json index 3e0c527c..a9db3cbd 100644 --- a/packages/razor/resources/assets/manifest.json +++ b/packages/razor/resources/assets/manifest.json @@ -144,7 +144,7 @@ "css:components/app-shell.css": { "path": "css/css/components/app-shell.css", "mediaType": "text/css", - "sha256": "02ef5a296b291b7facb43faff5ff936eeae1f90caab7333245128c5f77548c63", + "sha256": "5fbbce236e0cd0c54c9430e19a52e99e5798d254c4cf696ab66579697ae51577", "source": { "package": "@codemonster-ru/ui-css", "version": "2.0.0-dev.0", @@ -284,7 +284,7 @@ "css:components/document-layout.css": { "path": "css/css/components/document-layout.css", "mediaType": "text/css", - "sha256": "70622e2f555352d091da40cf06e9327bf9ecb8d4d4b2eba6e142204a8472180d", + "sha256": "0774b82a04942a8479cdda74ac3f9d486a977b1dd4b87e7cdb25d9d4fa9e08a2", "source": { "package": "@codemonster-ru/ui-css", "version": "2.0.0-dev.0",