From eb2544a42ddb0bee77b4955d9900cfd8e3b4e1d7 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 8 Apr 2026 16:45:12 +0100
Subject: [PATCH] refactor(activity): migrate to PageShell + ColumnsLayout

Replace .activity-page wrapper + SidebarLayout with PageShell +
ColumnsLayout cols="events-sidebar". Delete the now-redundant
flex-chain CSS that PageShell owns. Adds .loading-state to the
visual mask list to handle the connections-mobile race between
the loading and loaded states.
---
 app/pages/member/activity.vue | 23 +++++++----------------
 e2e/visual/pages.spec.js      |  1 +
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/app/pages/member/activity.vue b/app/pages/member/activity.vue
index 6121837..1b56c67 100644
--- a/app/pages/member/activity.vue
+++ b/app/pages/member/activity.vue
@@ -1,11 +1,9 @@
 <template>
-  <div class="activity-page">
-    <PageHeader
-      title="Activity Log"
-      subtitle="Your activity and milestones in the Guild"
-    />
-
-    <SidebarLayout :limit="5">
+  <PageShell
+    title="Activity Log"
+    subtitle="Your activity and milestones in the Guild"
+  >
+    <ColumnsLayout cols="events-sidebar" :limit="5">
       <ClientOnly>
         <!-- Loading State -->
         <div v-if="loading && !entries.length" class="state-box">
@@ -66,8 +64,8 @@
           </div>
         </template>
       </ClientOnly>
-    </SidebarLayout>
-  </div>
+    </ColumnsLayout>
+  </PageShell>
 </template>
 
 <script setup>
@@ -142,13 +140,6 @@ useHead({ title: 'Activity Log - Ghost Guild' })
 </script>
 
 <style scoped>
-.activity-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
 /* ---- STATE BOXES ---- */
 .state-box {
   display: flex;
diff --git a/e2e/visual/pages.spec.js b/e2e/visual/pages.spec.js
index adadb3b..ab76fa7 100644
--- a/e2e/visual/pages.spec.js
+++ b/e2e/visual/pages.spec.js
@@ -78,6 +78,7 @@ function commonMasks(page) {
     page.locator('.filter-bar'),
     page.locator('.skills-bar'),
     page.locator('.connections-section'),
+    page.locator('.loading-state'),
   ]
 }