From 0d10c43af64a68f55c8a31c712acc13246d9cc5d Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 8 Apr 2026 17:00:46 +0100
Subject: [PATCH] refactor(about): migrate about page to PageShell +
 ColumnsLayout

- Replace .about-page wrapper with <PageShell>
- Replace <SidebarLayout> with <ColumnsLayout cols=events-sidebar :limit=3>
- Drop .about-page flex-chain CSS
- Leave bespoke .about-hero alone (intentional two-column hero)
---
 app/pages/about.vue | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 738a02a..e3a8b6f 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="about-page">
+  <PageShell>
     <!-- ABOUT HERO (side by side) -->
     <div class="about-hero">
       <div class="about-hero-left">
@@ -31,7 +31,7 @@
     </div>
 
     <!-- CONTENT AREA WITH EVENTS SIDEBAR -->
-    <SidebarLayout>
+    <ColumnsLayout cols="events-sidebar" :limit="3">
       <!-- THE CIRCLES -->
       <div class="about-section" id="circles">
         <div class="section-label">The Circles</div>
@@ -111,21 +111,13 @@
           >
         </p>
       </div>
-    </SidebarLayout>
-  </div>
+    </ColumnsLayout>
+  </PageShell>
 </template>
 
 <script setup></script>
 
 <style scoped>
-/* Flex chain from layout .main-body: hero + grid grow so sidebar column matches main height */
-.about-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
 /* ---- ABOUT HERO ---- */
 .about-hero {
   display: grid;