From 83411ec1b2d72bce9ba5338fdfcf2658d4c600dd Mon Sep 17 00:00:00 2001
From: Wayne Sutton <waynesutton@users.noreply.github.com>
Date: Sun, 4 Jan 2026 11:01:26 -0800
Subject: [PATCH] fix: Write page frontmatter sidebar toggle now works outside
 focus mode

---
 TASK.md                         |  8 +++++++-
 changelog.md                    | 14 ++++++++++++++
 content/pages/changelog-page.md | 19 +++++++++++++++++++
 src/styles/global.css           | 16 ++++++++++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/TASK.md b/TASK.md
index 0133790..01b3d5c 100644
--- a/TASK.md
+++ b/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
diff --git a/changelog.md b/changelog.md
index ed5440d..83cd555 100644
--- a/changelog.md
+++ b/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
diff --git a/content/pages/changelog-page.md b/content/pages/changelog-page.md
index 4ce3cd6..57540e2 100644
--- a/content/pages/changelog-page.md
+++ b/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
diff --git a/src/styles/global.css b/src/styles/global.css
index ca349c1..1f4ea9c 100644
--- a/src/styles/global.css
+++ b/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 */