fix: Write page frontmatter sidebar toggle now works outside focus mode

TASK.md

@@ -4,10 +4,16 @@
 
 ## Current Status
 
-v2.8.6 ready. Fork configuration script now updates 14 files for complete site branding.
+v2.8.7 ready. Write page frontmatter sidebar toggle now works outside focus mode.
 
 ## Completed
 
+- [x] Write page frontmatter sidebar toggle fix
+  - [x] Added CSS rules for `.write-layout.frontmatter-collapsed` to adjust grid when sidebar collapsed
+  - [x] Added CSS rules for `.write-layout.sidebar-collapsed.frontmatter-collapsed` for both sidebars collapsed
+  - [x] Added responsive tablet styles for frontmatter collapsed state
+  - [x] Frontmatter toggle now works consistently in both focus mode and normal mode
+
 - [x] Fork configuration improvements
   - [x] Updated `scripts/configure-fork.ts` to update 3 additional files (DocsPage.tsx, mcp.ts, send-newsletter.ts)
   - [x] Improved `updateOpenApiYaml()` to handle all example URLs in OpenAPI spec

changelog.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [2.8.7] - 2026-01-04
+
+### Fixed
+
+- Write page frontmatter sidebar toggle now works outside focus mode
+  - Grid layout adjusts properly when frontmatter sidebar is collapsed
+  - Previously only worked in focus mode due to missing CSS rules
+
+### Technical
+
+- Added `.write-layout.frontmatter-collapsed` CSS rule (grid-template-columns: 220px 1fr 56px)
+- Added `.write-layout.sidebar-collapsed.frontmatter-collapsed` CSS rule for both sidebars collapsed
+- Added responsive tablet styles for frontmatter collapsed state
+
 ## [2.8.6] - 2026-01-04
 
 ### Changed

content/pages/changelog-page.md

@@ -11,6 +11,25 @@ docsSectionOrder: 4
 
 All notable changes to this project.
 
+## v2.8.7
+
+Released January 4, 2026
+
+**Write page frontmatter sidebar toggle fix**
+
+- Frontmatter sidebar toggle now works outside focus mode
+  - Grid layout adjusts properly when frontmatter sidebar is collapsed
+  - Previously only worked in focus mode due to missing CSS rules
+  - Both sidebars can now be collapsed independently or together
+
+**Technical details:**
+
+- Added `.write-layout.frontmatter-collapsed` CSS rule (grid-template-columns: 220px 1fr 56px)
+- Added `.write-layout.sidebar-collapsed.frontmatter-collapsed` CSS rule for both sidebars collapsed
+- Added responsive tablet styles for frontmatter collapsed state
+
+Updated files: `src/styles/global.css`
+
 ## v2.8.6
 
 Released January 4, 2026

src/styles/global.css

@@ -5686,6 +5686,14 @@ body {
   grid-template-columns: 56px 1fr 280px;
 }
 
+.write-layout.frontmatter-collapsed {
+  grid-template-columns: 220px 1fr 56px;
+}
+
+.write-layout.sidebar-collapsed.frontmatter-collapsed {
+  grid-template-columns: 56px 1fr 56px;
+}
+
 .write-sidebar-left.collapsed {
   width: 56px;
 }
@@ -5875,6 +5883,14 @@ body {
   .write-layout.sidebar-collapsed {
     grid-template-columns: 56px 1fr 240px;
   }
+
+  .write-layout.frontmatter-collapsed {
+    grid-template-columns: 200px 1fr 56px;
+  }
+
+  .write-layout.sidebar-collapsed.frontmatter-collapsed {
+    grid-template-columns: 56px 1fr 56px;
+  }
 }
 
 /* Responsive: Mobile */