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)
This commit is contained in:
Jennie Robinson Faber 2026-04-08 17:02:07 +01:00
parent 0d10c43af6
commit 884cee7951

View file

@ -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;