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

@@ -1,11 +1,9 @@
 <template>
-  <div class="activity-page">
+  <PageShell
-    <PageHeader
     title="Activity Log"
     subtitle="Your activity and milestones in the Guild"
-    />
+  >
-
+    <ColumnsLayout cols="events-sidebar" :limit="5">
-    <SidebarLayout :limit="5">
       <ClientOnly>
         <!-- Loading State -->
         <div v-if="loading && !entries.length" class="state-box">
@@ -66,8 +64,8 @@
           </div>
         </template>
       </ClientOnly>
-    </SidebarLayout>
+    </ColumnsLayout>
-  </div>
+  </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;

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'),
   ]
 }