From 884cee7951db6216f4d5e3d8dda99d04ec651d1b Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 8 Apr 2026 17:02:07 +0100
Subject: [PATCH] refactor(member-profile): migrate members/[id] to PageShell +
 ColumnsLayout

- Replace .profile-page wrapper with <PageShell>
- Replace <SidebarLayout> with <ColumnsLayout cols=events-sidebar>
- Drop .profile-page flex-chain CSS
- Leave bespoke .profile-hero alone (intentional two-col hero)
---
 app/pages/members/[id].vue | 23 +++++------------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/app/pages/members/[id].vue b/app/pages/members/[id].vue
index 68dd0d3..00011f8 100644
--- a/app/pages/members/[id].vue
+++ b/app/pages/members/[id].vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="profile-page">
+  <PageShell>
     <!-- Loading State -->
     <div v-if="pending" class="loading-state">
       <p>Loading profile...</p>
@@ -99,8 +99,8 @@
       </div>
       <!-- END HERO -->
 
-      <!-- SidebarLayout wraps all remaining sections -->
-      <SidebarLayout>
+      <!-- ColumnsLayout wraps all remaining sections -->
+      <ColumnsLayout cols="events-sidebar">
 
         <!-- Bio: parch (inverted) block -->
         <div v-if="member.bio" class="profile-section profile-section--parch">
@@ -213,10 +213,10 @@
           <NuxtLink to="/members" class="back-link">← Back to Members</NuxtLink>
         </div>
 
-      </SidebarLayout>
+      </ColumnsLayout>
 
     </template>
-  </div>
+  </PageShell>
 </template>
 
 <script setup>
@@ -361,19 +361,6 @@ useHead({
 </script>
 
 <style scoped>
-/* ====================================================
-   PROFILE PAGE
-   Full-bleed layout: no max-width, no centering.
-   Flex chain enables SidebarLayout's flex: 1 to work.
-   ==================================================== */
-
-.profile-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
 /* ---- LOADING STATE ---- */
 .loading-state {
   padding: 80px 32px;