From f5adc42d385cc4833bdbdc7cc65b3e77dbd751a6 Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Thu, 22 Jan 2026 19:49:15 +0700
Subject: [PATCH 1/2] Printer friendly CSS in host mode

---
 .../host/app/components/host-mode/card.gts    | 14 ++-
 .../host/app/components/host-mode/content.gts |  2 +-
 packages/host/app/templates/index.gts         | 10 ---
 packages/matrix/tests/host-mode.spec.ts       | 90 ++++++++++++++++++-
 4 files changed, 101 insertions(+), 15 deletions(-)

diff --git a/packages/host/app/components/host-mode/card.gts b/packages/host/app/components/host-mode/card.gts
index b360ea8fc1..3853f89cd2 100644
--- a/packages/host/app/components/host-mode/card.gts
+++ b/packages/host/app/components/host-mode/card.gts
@@ -12,6 +12,7 @@ interface Signature {
   Args: {
     cardId: string | null;
     displayBoundaries?: boolean;
+    isPrimary?: boolean;
     openInteractSubmode?: () => void;
   };
 }
@@ -52,7 +53,7 @@ export default class HostModeCard extends Component<Signature> {
 
   <template>
     <CardContainer
-      class='host-mode-card'
+      class='host-mode-card {{if @isPrimary "is-primary"}}'
       displayBoundaries={{@displayBoundaries}}
       ...attributes
     >
@@ -118,6 +119,17 @@ export default class HostModeCard extends Component<Signature> {
         text-align: center;
         gap: var(--boxel-sp);
       }
+
+      @media print {
+        .host-mode-card.is-primary {
+          display: contents;
+        }
+
+        .host-mode-card.is-primary .card {
+          max-height: none;
+          overflow: visible;
+        }
+      }
     </style>
   </template>
 }
diff --git a/packages/host/app/components/host-mode/content.gts b/packages/host/app/components/host-mode/content.gts
index 70eda10f7c..67a61b3c78 100644
--- a/packages/host/app/components/host-mode/content.gts
+++ b/packages/host/app/components/host-mode/content.gts
@@ -107,6 +107,7 @@ export default class HostModeContent extends Component<Signature> {
       <HostModeCard
         @cardId={{@primaryCardId}}
         @displayBoundaries={{not this.isWideCard}}
+        @isPrimary={{true}}
         @openInteractSubmode={{@openInteractSubmode}}
         class='current-card'
       />
@@ -125,7 +126,6 @@ export default class HostModeContent extends Component<Signature> {
         align-items: center;
         justify-content: center;
         width: 100%;
-        max-height: 100vh;
         overflow: hidden;
         padding: var(--boxel-sp);
         position: relative;
diff --git a/packages/host/app/templates/index.gts b/packages/host/app/templates/index.gts
index b2091b5118..1cc843ca5e 100644
--- a/packages/host/app/templates/index.gts
+++ b/packages/host/app/templates/index.gts
@@ -232,7 +232,6 @@ export class IndexComponent extends Component<IndexComponentComponentSignature>
           @stackItemCardIds={{this.hostModeStateService.stackItems}}
           @removeCardFromStack={{this.removeCardFromStack}}
           @viewCard={{this.viewCard}}
-          class='host-mode-content'
           {{this.removeIsolatedMarkup}}
         />
       {{/if}}
@@ -240,15 +239,6 @@ export class IndexComponent extends Component<IndexComponentComponentSignature>
       {{pageTitle this.operatorModeStateService.title}}
       <OperatorModeContainer @onClose={{this.closeOperatorMode}} />
     {{/if}}
-
-    <style scoped>
-      .host-mode-content {
-        height: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-      }
-    </style>
   </template>
 }
 
diff --git a/packages/matrix/tests/host-mode.spec.ts b/packages/matrix/tests/host-mode.spec.ts
index 47e6459826..eb450c0c0b 100644
--- a/packages/matrix/tests/host-mode.spec.ts
+++ b/packages/matrix/tests/host-mode.spec.ts
@@ -12,6 +12,7 @@ import { randomUUID } from 'crypto';
 test.describe('Host mode', () => {
   let publishedRealmURL: string;
   let publishedCardURL: string;
+  let publishedWhitePaperCardURL: string;
   let connectRouteURL: string;
   let username: string;
   let password: string;
@@ -51,6 +52,54 @@ test.describe('Host mode', () => {
       `,
     );
 
+    await postCardSource(
+      page,
+      realmURL,
+      'white-paper-card.gts',
+      `
+        import { CardDef, Component } from 'https://cardstack.com/base/card-api';
+
+        export class WhitePaperCard extends CardDef {
+          static prefersWideFormat = true;
+
+          static isolated = class Isolated extends Component<typeof this> {
+            <template>
+              <article class='white-paper' data-test-white-paper>
+                <section class='page-block'>Page 1</section>
+                <section class='page-block'>Page 2</section>
+                <section class='page-block'>Page 3</section>
+              </article>
+              <style scoped>
+                .white-paper {
+                  padding: 0;
+                  margin: 0;
+                  font-family: serif;
+                }
+
+                .page-block {
+                  height: 9.5in;
+                  padding: 0.75in;
+                  box-sizing: border-box;
+                }
+
+                @media print {
+                  .page-block {
+                    break-after: page;
+                    page-break-after: always;
+                  }
+
+                  .page-block:last-child {
+                    break-after: auto;
+                    page-break-after: auto;
+                  }
+                }
+              </style>
+            </template>
+          };
+        }
+      `,
+    );
+
     await postCardSource(
       page,
       realmURL,
@@ -69,6 +118,24 @@ test.describe('Host mode', () => {
       }),
     );
 
+    await postCardSource(
+      page,
+      realmURL,
+      'white-paper.json',
+      JSON.stringify({
+        data: {
+          type: 'card',
+          attributes: {},
+          meta: {
+            adoptsFrom: {
+              module: './white-paper-card.gts',
+              name: 'WhitePaperCard',
+            },
+          },
+        },
+      }),
+    );
+
     await page.reload();
     await page.locator('[data-test-host-mode-isolated]').waitFor();
 
@@ -107,6 +174,7 @@ test.describe('Host mode', () => {
     );
 
     publishedCardURL = `${publishedRealmURL}index.json`;
+    publishedWhitePaperCardURL = `${publishedRealmURL}white-paper.json`;
     connectRouteURL = `http://localhost:4205/connect/${encodeURIComponent(
       publishedRealmURL,
     )}`;
@@ -133,9 +201,25 @@ test.describe('Host mode', () => {
     expect(html).toContain('data-test-host-mode-isolated');
 
     await page.goto(publishedCardURL);
-    await expect(
-      page.locator('[data-test-host-mode-isolated]'),
-    ).toBeVisible();
+    await expect(page.locator('[data-test-host-mode-isolated]')).toBeVisible();
+  });
+
+  test('printed isolated card produces a stable page count', async ({
+    page,
+  }) => {
+    await page.goto(publishedWhitePaperCardURL);
+    await page.locator('[data-test-white-paper]').waitFor();
+    await waitUntil(
+      async () =>
+        (await page.locator('[data-test-host-loading]').count()) === 0,
+    );
+
+    await page.emulateMedia({ media: 'print' });
+    let pdf = await page.pdf({ format: 'Letter', printBackground: true });
+    let pageCount =
+      pdf.toString('latin1').match(/\/Type\s*\/Page\b/g)?.length ?? 0;
+
+    expect(pageCount).toBe(3);
   });
 
   test.skip('card in a published realm renders in host mode with a connect button', async ({

From fe9f8ffb9906fe077498553e3c5da8103febe8bf Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Thu, 22 Jan 2026 22:50:40 +0700
Subject: [PATCH 2/2] Fix matrix test

---
 packages/host/app/components/host-mode/content.gts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/host/app/components/host-mode/content.gts b/packages/host/app/components/host-mode/content.gts
index 67a61b3c78..a2338f4136 100644
--- a/packages/host/app/components/host-mode/content.gts
+++ b/packages/host/app/components/host-mode/content.gts
@@ -126,6 +126,7 @@ export default class HostModeContent extends Component<Signature> {
         align-items: center;
         justify-content: center;
         width: 100%;
+        min-height: 100vh;
         overflow: hidden;
         padding: var(--boxel-sp);
         position: relative;