From 7e2c1bc73cd4a0806bad7ab3b7060b5f02f30804 Mon Sep 17 00:00:00 2001
From: Jacob Coffee <jacob@z7x.org>
Date: Thu, 9 Apr 2026 21:53:11 -0500
Subject: [PATCH] Fix Open Space detail view spacing and styling

- Add isOpenSpace flag to conditionally apply styling
- Add spacing when image/description follows meta-card with no speakers
- Open space images render as full-width hero with cover fit
- Open space descriptions preserve user-entered line breaks (pre-line)
- Better margins between sections for speakerless layouts

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/session-detail/session-detail.html  |  9 ++++---
 .../pages/session-detail/session-detail.scss  | 27 ++++++++++++++++++-
 .../pages/session-detail/session-detail.ts    |  4 ++-
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/session-detail/session-detail.html b/src/app/pages/session-detail/session-detail.html
index dc8b3d75..65579133 100644
--- a/src/app/pages/session-detail/session-detail.html
+++ b/src/app/pages/session-detail/session-detail.html
@@ -53,11 +53,14 @@ <h2>{{speaker.name}}</h2>
       </ion-item>
     </div>
 
-    <div *ngIf="session.imageUrl" class="session-image-container">
-      <img [src]="session.imageUrl" class="session-image">
+    <div *ngIf="session.imageUrl" class="session-image-container" [class.open-space-image-container]="isOpenSpace">
+      <img [src]="session.imageUrl" class="session-image" [class.open-space-hero-image]="isOpenSpace">
     </div>
 
-    <div class="session-description" [innerHtml]="session?.description" (click)="onDescriptionClick($event)">
+    <div class="session-description"
+         [class.open-space-description]="isOpenSpace"
+         [innerHtml]="session?.description"
+         (click)="onDescriptionClick($event)">
     </div>
   </div>
 </ion-content>
diff --git a/src/app/pages/session-detail/session-detail.scss b/src/app/pages/session-detail/session-detail.scss
index cd6b29cf..e06ca4df 100644
--- a/src/app/pages/session-detail/session-detail.scss
+++ b/src/app/pages/session-detail/session-detail.scss
@@ -26,6 +26,13 @@
   gap: 10px;
 }
 
+// When image or description directly follows meta-card (no speakers section),
+// add extra top spacing for visual breathing room
+.session-meta-card + .session-image-container,
+.session-meta-card + .session-description {
+  margin-top: 4px;
+}
+
 :host-context(.dark-theme) .session-meta-card {
   background: var(--ion-color-step-100, #1a1a1a);
 }
@@ -70,8 +77,12 @@
 }
 
 .session-image-container {
-  margin: 16px 0;
+  margin: 16px 0 20px;
   text-align: center;
+
+  &.open-space-image-container {
+    margin: 4px 0 24px;
+  }
 }
 
 .session-image {
@@ -79,6 +90,14 @@
   max-height: 300px;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  &.open-space-hero-image {
+    max-height: 220px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+  }
 }
 
 .session-description {
@@ -94,4 +113,10 @@
     color: var(--ion-color-primary);
     text-decoration: none;
   }
+
+  &.open-space-description {
+    padding-top: 4px;
+    white-space: pre-line;
+    word-wrap: break-word;
+  }
 }
diff --git a/src/app/pages/session-detail/session-detail.ts b/src/app/pages/session-detail/session-detail.ts
index 7d42aa24..2555364a 100644
--- a/src/app/pages/session-detail/session-detail.ts
+++ b/src/app/pages/session-detail/session-detail.ts
@@ -16,6 +16,7 @@ import { environment } from '../../../environments/environment';
 export class SessionDetailPage {
   session: any;
   isFavorite = false;
+  isOpenSpace = false;
   defaultHref = '';
 
   constructor(
@@ -33,7 +34,8 @@ export class SessionDetailPage {
         const foundSession = data.sessions.find(
           (s: any) => String(s.id) === String(sessionId)
         )
-        this.session = foundSession
+        this.session = foundSession;
+        this.isOpenSpace = this.session?.tracks?.includes('open-space');
 
         this.isFavorite = this.userProvider.hasFavorite(
           String(this.session.id)