From 53b4426952a26ac02081fc54518ee314373456d5 Mon Sep 17 00:00:00 2001 From: John Philip Date: Wed, 20 Aug 2025 11:36:00 -0400 Subject: [PATCH 1/4] revert sidebar css changes Signed-off-by: John Philip --- .../transformers/styles/rules/layout.ts | 26 +++++++------------ .../reader/transformers/styles/rules/types.ts | 4 --- .../reader/transformers/styles/transformer.ts | 20 ++------------ 3 files changed, 11 insertions(+), 39 deletions(-) diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts index 43d3112a73..b99fb0b020 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts @@ -16,21 +16,10 @@ import { RuleOptions } from './types'; -export default ({ theme, sidebar }: RuleOptions) => { - const sidebarWidth = sidebar.isPresent ? `${sidebar.width}px` : '0px'; - const sidebarMargin = sidebar.isPresent ? '16rem' : '0'; +const SIDEBAR_WIDTH = '224px'; - // Calculate the sidebar position for mobile layouts - let sidebarLeftPosition; - if (!sidebar.isPresent) { - sidebarLeftPosition = '-16rem'; - } else if (sidebar.isPinned) { - sidebarLeftPosition = `calc(-16rem + ${sidebarWidth})`; - } else { - sidebarLeftPosition = 'calc(-16rem + 72px)'; - } +export default ({ theme, sidebar }: RuleOptions) => ` - return ` /*================== Layout ==================*/ /* mkdocs material v9 compat */ @@ -134,12 +123,12 @@ export default ({ theme, sidebar }: RuleOptions) => { .md-content { max-width: calc(100% - 16rem * 2); - margin-left: ${sidebarMargin}; + margin-left: 16rem; margin-bottom: 50px; } .md-content > .md-sidebar { - left: ${sidebarMargin}; + left: 16rem; } .md-footer { @@ -221,7 +210,11 @@ export default ({ theme, sidebar }: RuleOptions) => { .md-sidebar--primary { width: 16rem !important; z-index: 200; - left: ${sidebarLeftPosition} !important; + left: ${ + sidebar.isPinned + ? `calc(-16rem + ${SIDEBAR_WIDTH})` + : 'calc(-16rem + 72px)' + } !important; } .md-sidebar--secondary:not([hidden]) { display: none; @@ -277,4 +270,3 @@ export default ({ theme, sidebar }: RuleOptions) => { } } `; -}; diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/types.ts b/plugins/techdocs/src/reader/transformers/styles/rules/types.ts index 1b6b86cccd..e2747ad85a 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/types.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/types.ts @@ -22,10 +22,6 @@ import { Theme } from '@material-ui/core/styles'; type BackstageSidebar = { /** Tracks whether the user pinned the sidebar or not. */ isPinned: boolean; - /** Tracks whether a Backstage sidebar is actually present in the DOM. */ - isPresent: boolean; - /** The actual width of the sidebar in pixels, if present. */ - width: number; }; /** diff --git a/plugins/techdocs/src/reader/transformers/styles/transformer.ts b/plugins/techdocs/src/reader/transformers/styles/transformer.ts index fdcb5a2e73..b1b1b437c2 100644 --- a/plugins/techdocs/src/reader/transformers/styles/transformer.ts +++ b/plugins/techdocs/src/reader/transformers/styles/transformer.ts @@ -20,26 +20,10 @@ import { useSidebarPinState } from '@backstage/core-components'; import { Transformer } from '../transformer'; import { rules } from './rules'; -const SIDEBAR_WIDTH = 224; /** - * Enhanced sidebar state that detects presence through CSS environment. + * Sidebar pinned state to be used in computing style injections. */ -const useSidebar = () => { - const pinState = useSidebarPinState(); - - const hasSidebar = useMemo( - () => - typeof window !== 'undefined' && - Boolean(document.querySelector('[class*="BackstageSidebar"]')), - [], - ); - - return { - isPinned: pinState.isPinned, - isPresent: hasSidebar, - width: SIDEBAR_WIDTH, - }; -}; +const useSidebar = () => useSidebarPinState(); /** * Process all rules and concatenate their definitions into a single style. From 1dfee196b84b76cca793906de849a80cd85d363c Mon Sep 17 00:00:00 2001 From: John Philip Date: Wed, 20 Aug 2025 11:45:04 -0400 Subject: [PATCH 2/4] changeset for css revert Signed-off-by: John Philip --- .changeset/sixty-pans-prove.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sixty-pans-prove.md diff --git a/.changeset/sixty-pans-prove.md b/.changeset/sixty-pans-prove.md new file mode 100644 index 0000000000..52a978a893 --- /dev/null +++ b/.changeset/sixty-pans-prove.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Reverts a change in CSS layout for techdocs From 8846b8d0e86b59b42c84436d620c08de3e60e31e Mon Sep 17 00:00:00 2001 From: John Philip Date: Wed, 20 Aug 2025 15:32:13 -0400 Subject: [PATCH 3/4] Update sixty-pans-prove.md Signed-off-by: John Philip --- .changeset/sixty-pans-prove.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/sixty-pans-prove.md b/.changeset/sixty-pans-prove.md index 52a978a893..0aa2468281 100644 --- a/.changeset/sixty-pans-prove.md +++ b/.changeset/sixty-pans-prove.md @@ -2,4 +2,4 @@ '@backstage/plugin-techdocs': patch --- -Reverts a change in CSS layout for techdocs +Reverts a change in CSS layout that shifted the content of the Techdocs too far to the left. From f2b50e80a025bdd5d8737fa46fd846b0f64a6b9e Mon Sep 17 00:00:00 2001 From: John Philip Date: Wed, 20 Aug 2025 16:09:55 -0400 Subject: [PATCH 4/4] retrigger ci Signed-off-by: John Philip