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> <template>
<div class="profile-page"> <PageShell>
<!-- Loading State --> <!-- Loading State -->
<div v-if="pending" class="loading-state"> <div v-if="pending" class="loading-state">
<p>Loading profile...</p> <p>Loading profile...</p>
@ -99,8 +99,8 @@
</div> </div>
<!-- END HERO --> <!-- END HERO -->
<!-- SidebarLayout wraps all remaining sections --> <!-- ColumnsLayout wraps all remaining sections -->
<SidebarLayout> <ColumnsLayout cols="events-sidebar">
<!-- Bio: parch (inverted) block --> <!-- Bio: parch (inverted) block -->
<div v-if="member.bio" class="profile-section profile-section--parch"> <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> <NuxtLink to="/members" class="back-link"> Back to Members</NuxtLink>
</div> </div>
</SidebarLayout> </ColumnsLayout>
</template> </template>
</div> </PageShell>
</template> </template>
<script setup> <script setup>
@ -361,19 +361,6 @@ useHead({
</script> </script>
<style scoped> <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 ---- */
.loading-state { .loading-state {
padding: 80px 32px; padding: 80px 32px;