From 356fe3b5238373e10bb416f1de836eb46a116167 Mon Sep 17 00:00:00 2001
From: Naomi Gilbert <naomi@morialkar.com>
Date: Sat, 1 Aug 2026 15:01:20 -0400
Subject: [PATCH] feat(reports): add orientation, cards per row and condensed
 card options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Card layouts printed one record per page for wide views, which wastes paper
on concise ones. Measured on real records, density is driven by card height,
not by a fixed rule: 4.0 records per page with a single field, 1.0 with
sixteen.

Add three layout options that carry through save, preview, print and PDF:

- orientation: portrait or landscape, applied both to Dompdf's paper and to
  the document's @page rule so the browser prints the iframe the same way
- card_columns: 1 to 4 cards side by side, laid out as a grid
- compact_cards: drops the 80px column floor and tightens padding, margins
  and the title size

Measured on a table with short titles, 40 records: 5.0 per page by default,
8.0 at two columns, 10.0 with condensed cards, 13.3 at four columns in
landscape.

More columns is not always denser — narrow cards wrap long titles — so the
options are exposed rather than guessed at, and the card ones only appear
when a view is selected.
---
 .../app/Http/Controllers/ReportController.php |  11 +-
 .../api/resources/views/reports/pdf.blade.php | 155 +++++++++++-------
 apps/api/tests/Feature/ReportFeatureTest.php  | 125 ++++++++++++++
 apps/client/src/contexts/I18nContext.tsx      |  16 ++
 .../__tests__/reports-live-exports.test.tsx   |  67 ++++++++
 .../routes/reports.$databaseId.$tableId.tsx   |  83 +++++++++-
 6 files changed, 394 insertions(+), 63 deletions(-)

diff --git a/apps/api/app/Http/Controllers/ReportController.php b/apps/api/app/Http/Controllers/ReportController.php
index 85c6396..fb957d8 100644
--- a/apps/api/app/Http/Controllers/ReportController.php
+++ b/apps/api/app/Http/Controllers/ReportController.php
@@ -60,6 +60,9 @@ public function store(Request $request): JsonResponse
             'layout.view_id' => 'nullable|uuid|exists:views,id',
             'layout.show_headers_only' => 'nullable|boolean',
             'layout.per_page' => 'nullable|integer|min:1|max:100',
+            'layout.card_columns' => 'nullable|integer|min:1|max:4',
+            'layout.orientation' => 'nullable|in:portrait,landscape',
+            'layout.compact_cards' => 'nullable|boolean',
         ]);
 
         $report = Report::create($validated);
@@ -94,6 +97,9 @@ public function update(Request $request, Report $report): JsonResponse
             'layout.view_id' => 'nullable|uuid|exists:views,id',
             'layout.show_headers_only' => 'nullable|boolean',
             'layout.per_page' => 'nullable|integer|min:1|max:100',
+            'layout.card_columns' => 'nullable|integer|min:1|max:4',
+            'layout.orientation' => 'nullable|in:portrait,landscape',
+            'layout.compact_cards' => 'nullable|boolean',
         ]);
 
         $report->update($validated);
@@ -259,12 +265,15 @@ private function generatePdfResponse(string $reportName, array $columns, array $
     {
         $html = $this->renderReportHtml($reportName, $columns, $groups, $groupBy, $layout);
 
+        $orientation = ($layout['orientation'] ?? 'portrait') === 'landscape' ? 'landscape' : 'portrait';
+
         $dompdf = new Dompdf([
             'isHtml5ParserEnabled' => true,
             'isPhpEnabled' => false,
             'defaultPaperSize' => 'a4',
-            'defaultPaperOrientation' => 'portrait',
+            'defaultPaperOrientation' => $orientation,
         ]);
+        $dompdf->setPaper('a4', $orientation);
         $dompdf->loadHtml($html);
         $dompdf->render();
 
diff --git a/apps/api/resources/views/reports/pdf.blade.php b/apps/api/resources/views/reports/pdf.blade.php
index 1c38b60..6660718 100644
--- a/apps/api/resources/views/reports/pdf.blade.php
+++ b/apps/api/resources/views/reports/pdf.blade.php
@@ -4,6 +4,11 @@
     <meta charset="utf-8">
     <title>{{ $reportName }}</title>
     <style>
+        /* Dompdf takes the orientation from its constructor; this rule is what makes
+           the browser print the iframe preview on the same paper. */
+        @page {
+            size: A4 {{ ($layout['orientation'] ?? 'portrait') === 'landscape' ? 'landscape' : 'portrait' }};
+        }
         body {
             font-family: 'DejaVu Sans', sans-serif;
             font-size: 9.5pt;
@@ -54,16 +59,27 @@
             text-transform: uppercase;
             border-top: 1px solid #e2e8f0;
         }
+        .report-card-grid {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin: 0;
+        }
+        .report-card-cell {
+            vertical-align: top;
+            border: none;
+            padding: 0 5px 0 0;
+        }
         .report-card {
             border: 1px solid #e2e8f0;
             border-radius: 6px;
-            padding: 12px;
-            margin-bottom: 12px;
+            padding: {{ ($layout['compact_cards'] ?? false) ? '6px' : '12px' }};
+            margin-bottom: {{ ($layout['compact_cards'] ?? false) ? '6px' : '12px' }};
             background-color: #fff;
             page-break-inside: avoid;
         }
         .report-card-title {
-            font-size: 11pt;
+            font-size: {{ ($layout['compact_cards'] ?? false) ? '9.5pt' : '11pt' }};
             font-weight: bold;
             color: #0f172a;
             border-bottom: 1px solid #e2e8f0;
@@ -74,11 +90,11 @@
             border: 1px dashed #cbd5e1;
             border-radius: 4px;
             background-color: #f8fafc;
-            padding: 8px;
-            min-height: 80px;
+            padding: {{ ($layout['compact_cards'] ?? false) ? '5px' : '8px' }};
+            min-height: {{ ($layout['compact_cards'] ?? false) ? '0' : '80px' }};
         }
         .report-card-field {
-            margin-bottom: 6px;
+            margin-bottom: {{ ($layout['compact_cards'] ?? false) ? '2px' : '6px' }};
         }
         .report-card-field-label {
             font-size: 7.5pt;
@@ -115,64 +131,81 @@
             @endif
             @if (!($layout['show_headers_only'] ?? false))
                 @if ($view && isset($view->config['columns']))
-                    @foreach ($group['records'] as $rec)
-                        @php
-                            $titleField = $view->table->fields->first(fn($f) => ($f->options['is_title'] ?? false) || $f->type === 'title');
-                            $titleVal = null;
-                            if ($titleField) {
-                                foreach ($rec as $k => $v) {
-                                    if (strcasecmp($k, $titleField->name) === 0) {
-                                        $titleVal = $v;
-                                        break;
-                                    }
-                                }
-                            }
-                            $columnsLayout = $view->config['columns'];
-                            $colCount = count($columnsLayout);
-                            $colWidth = $colCount > 1 ? '48%' : '100%';
-                        @endphp
-                        <div class="report-card">
-                            @if ($titleVal)
-                                <div class="report-card-title">{{ $titleVal }}</div>
-                            @endif
-                            <table style="width: 100%; border: none; margin: 0; border-collapse: collapse;">
-                                <tr style="border: none;">
-                                    @foreach ($columnsLayout as $colFields)
-                                        <td style="width: {{ $colWidth }}; vertical-align: top; border: none; padding: 0 10px 0 0;">
-                                            <div class="report-card-col">
-                                                @foreach ($colFields as $fId)
-                                                    @php
-                                                        $cleanId = str_starts_with($fId, 'draft-') ? substr($fId, 6) : $fId;
-                                                        $fieldDef = $view->table->fields->first(fn($f) => $f->id === $cleanId);
-                                                    @endphp
-                                                    @if ($fieldDef && $fieldDef->type !== 'title')
-                                                        @php
-                                                            $fieldVal = null;
-                                                            foreach ($rec as $k => $v) {
-                                                                if (strcasecmp($k, $fieldDef->name) === 0) {
-                                                                    $fieldVal = $v;
-                                                                    break;
-                                                                }
-                                                            }
-                                                        @endphp
-                                                        <div class="report-card-field">
-                                                            <div class="report-card-field-label">{{ $fieldDef->name }}</div>
-                                                            <div class="report-card-field-value">
-                                                                @if (is_array($fieldVal))
-                                                                    {{ implode(', ', $fieldVal) }}
-                                                                @else
-                                                                    {{ $fieldVal ?? '-' }}
+                    @php
+                        // Cards are laid out N per row; a wider grid fits far more records
+                        // per sheet for concise views.
+                        $cardColumns = max(1, min(4, (int) ($layout['card_columns'] ?? 1)));
+                        $cardCellWidth = round(100 / $cardColumns, 2).'%';
+                    @endphp
+                    @foreach (array_chunk($group['records'], $cardColumns) as $cardRow)
+                        <table class="report-card-grid">
+                            <tr>
+                                @foreach ($cardRow as $rec)
+                                    <td class="report-card-cell" style="width: {{ $cardCellWidth }};">
+                                    @php
+                                        $titleField = $view->table->fields->first(fn($f) => ($f->options['is_title'] ?? false) || $f->type === 'title');
+                                        $titleVal = null;
+                                        if ($titleField) {
+                                            foreach ($rec as $k => $v) {
+                                                if (strcasecmp($k, $titleField->name) === 0) {
+                                                    $titleVal = $v;
+                                                    break;
+                                                }
+                                            }
+                                        }
+                                        $columnsLayout = $view->config['columns'];
+                                        $innerColCount = count($columnsLayout);
+                                        $innerColWidth = $innerColCount > 1 ? round(100 / $innerColCount, 2).'%' : '100%';
+                                    @endphp
+                                    <div class="report-card">
+                                        @if ($titleVal)
+                                            <div class="report-card-title">{{ $titleVal }}</div>
+                                        @endif
+                                        <table style="width: 100%; border: none; margin: 0; border-collapse: collapse;">
+                                            <tr style="border: none;">
+                                                @foreach ($columnsLayout as $colFields)
+                                                    <td style="width: {{ $innerColWidth }}; vertical-align: top; border: none; padding: 0 6px 0 0;">
+                                                        <div class="report-card-col">
+                                                            @foreach ($colFields as $fId)
+                                                                @php
+                                                                    $cleanId = str_starts_with($fId, 'draft-') ? substr($fId, 6) : $fId;
+                                                                    $fieldDef = $view->table->fields->first(fn($f) => $f->id === $cleanId);
+                                                                @endphp
+                                                                @if ($fieldDef && $fieldDef->type !== 'title')
+                                                                    @php
+                                                                        $fieldVal = null;
+                                                                        foreach ($rec as $k => $v) {
+                                                                            if (strcasecmp($k, $fieldDef->name) === 0) {
+                                                                                $fieldVal = $v;
+                                                                                break;
+                                                                            }
+                                                                        }
+                                                                    @endphp
+                                                                    <div class="report-card-field">
+                                                                        <div class="report-card-field-label">{{ $fieldDef->name }}</div>
+                                                                        <div class="report-card-field-value">
+                                                                            @if (is_array($fieldVal))
+                                                                                {{ implode(', ', $fieldVal) }}
+                                                                            @else
+                                                                                {{ $fieldVal ?? '-' }}
+                                                                            @endif
+                                                                        </div>
+                                                                    </div>
                                                                 @endif
-                                                            </div>
+                                                            @endforeach
                                                         </div>
-                                                    @endif
+                                                    </td>
                                                 @endforeach
-                                            </div>
-                                        </td>
-                                    @endforeach
-                                </tr>
-                            </table>
-                        </div>
+                                            </tr>
+                                        </table>
+                                    </div>
+                                    </td>
+                                @endforeach
+                                @for ($filler = count($cardRow); $filler < $cardColumns; $filler++)
+                                    <td class="report-card-cell" style="width: {{ $cardCellWidth }};"></td>
+                                @endfor
+                            </tr>
+                        </table>
                     @endforeach
                 @else
                     <table class="report-table">
diff --git a/apps/api/tests/Feature/ReportFeatureTest.php b/apps/api/tests/Feature/ReportFeatureTest.php
index 459f78d..e38c04e 100644
--- a/apps/api/tests/Feature/ReportFeatureTest.php
+++ b/apps/api/tests/Feature/ReportFeatureTest.php
@@ -516,3 +516,128 @@ function createAuthenticatedUser()
     // Card markup, not the fallback table.
     expect($response->getContent())->toContain('report-card');
 });
+
+test('layout orientation, card columns and compact flag survive a save', function () {
+    $setup = createAuthenticatedUser();
+    $user = $setup['user'];
+    $table = $setup['table'];
+    $view = View::factory()->create(['table_id' => $table->id]);
+
+    $created = $this->actingAs($user)->postJson('/api/v1/reports', [
+        'table_id' => $table->id,
+        'name' => 'Rapport paysage',
+        'query' => ['select' => ['Nom']],
+        'layout' => [
+            'fields' => [['name' => 'Nom', 'visible' => true, 'order' => 1]],
+            'view_id' => $view->id,
+            'orientation' => 'landscape',
+            'card_columns' => 3,
+            'compact_cards' => true,
+        ],
+    ]);
+
+    $created->assertStatus(201);
+
+    $report = Report::find($created->json('id'));
+    expect($report->layout['orientation'])->toBe('landscape');
+    expect($report->layout['card_columns'])->toBe(3);
+    expect($report->layout['compact_cards'])->toBeTrue();
+});
+
+test('card columns are rejected outside the supported range', function () {
+    $setup = createAuthenticatedUser();
+    $user = $setup['user'];
+    $table = $setup['table'];
+
+    $this->actingAs($user)->postJson('/api/v1/reports', [
+        'table_id' => $table->id,
+        'name' => 'Trop de colonnes',
+        'layout' => ['card_columns' => 9],
+    ])->assertStatus(422);
+
+    $this->actingAs($user)->postJson('/api/v1/reports', [
+        'table_id' => $table->id,
+        'name' => 'Orientation inconnue',
+        'layout' => ['orientation' => 'diagonal'],
+    ])->assertStatus(422);
+});
+
+test('card grid lays records out side by side and landscape changes the paper', function () {
+    $setup = createAuthenticatedUser();
+    $user = $setup['user'];
+    $table = $setup['table'];
+
+    $ville = Field::factory()->create(['table_id' => $table->id, 'name' => 'Ville', 'type' => 'text']);
+    $view = View::factory()->create([
+        'table_id' => $table->id,
+        'type' => 'card',
+        'config' => ['columns' => [[$ville->id]]],
+    ]);
+
+    foreach (range(1, 6) as $i) {
+        Record::create([
+            'table_id' => $table->id,
+            'data' => ['Ville' => "Ville {$i}"],
+            'version' => 1,
+        ]);
+    }
+
+    $payload = fn (array $extra) => [
+        'table_id' => $table->id,
+        'name' => 'Grille',
+        'query' => ['select' => ['Ville']],
+        'layout' => array_merge([
+            'fields' => [['name' => 'Ville', 'visible' => true, 'order' => 1]],
+            'view_id' => $view->id,
+        ], $extra),
+    ];
+
+    // One card per row: six rows of one cell.
+    $single = $this->actingAs($user)->postJson('/api/v1/reports/preview/html', $payload([]));
+    expect(substr_count($single->getContent(), '<table class="report-card-grid">'))->toBe(6);
+
+    // Three per row: two rows, still six cards.
+    $grid = $this->actingAs($user)->postJson('/api/v1/reports/preview/html', $payload(['card_columns' => 3]));
+    $gridHtml = $grid->getContent();
+    expect(substr_count($gridHtml, '<table class="report-card-grid">'))->toBe(2);
+    expect(substr_count($gridHtml, 'class="report-card"'))->toBe(6);
+
+    // Landscape must reach both the browser (@page) and Dompdf (paper size).
+    $landscape = $this->actingAs($user)->postJson('/api/v1/reports/preview/html', $payload(['orientation' => 'landscape']));
+    expect($landscape->getContent())->toContain('size: A4 landscape');
+
+    $pdf = $this->actingAs($user)->postJson('/api/v1/reports/preview/pdf', $payload(['orientation' => 'landscape']));
+    $pdf->assertStatus(200);
+    preg_match('/MediaBox\s*\[\s*[\d.]+\s+[\d.]+\s+([\d.]+)\s+([\d.]+)/', $pdf->getContent(), $box);
+    expect((float) $box[1])->toBeGreaterThan((float) $box[2]);
+});
+
+test('compact cards tighten the card chrome', function () {
+    $setup = createAuthenticatedUser();
+    $user = $setup['user'];
+    $table = $setup['table'];
+
+    $ville = Field::factory()->create(['table_id' => $table->id, 'name' => 'Ville', 'type' => 'text']);
+    $view = View::factory()->create([
+        'table_id' => $table->id,
+        'type' => 'card',
+        'config' => ['columns' => [[$ville->id]]],
+    ]);
+
+    Record::create(['table_id' => $table->id, 'data' => ['Ville' => 'Québec'], 'version' => 1]);
+
+    $base = [
+        'table_id' => $table->id,
+        'name' => 'Condense',
+        'query' => ['select' => ['Ville']],
+        'layout' => ['view_id' => $view->id, 'fields' => [['name' => 'Ville', 'visible' => true, 'order' => 1]]],
+    ];
+
+    $normal = $this->actingAs($user)->postJson('/api/v1/reports/preview/html', $base);
+    expect($normal->getContent())->toContain('min-height: 80px');
+
+    $base['layout']['compact_cards'] = true;
+    $compact = $this->actingAs($user)->postJson('/api/v1/reports/preview/html', $base);
+    expect($compact->getContent())->toContain('min-height: 0');
+    expect($compact->getContent())->not->toContain('min-height: 80px');
+});
diff --git a/apps/client/src/contexts/I18nContext.tsx b/apps/client/src/contexts/I18nContext.tsx
index 53de346..04f31f7 100644
--- a/apps/client/src/contexts/I18nContext.tsx
+++ b/apps/client/src/contexts/I18nContext.tsx
@@ -122,6 +122,14 @@ const resources = {
       'reports.preview.live': 'Prévisualisation en direct',
       'reports.preview.print': 'Rendu imprimé',
       'reports.print': 'Imprimer',
+      'reports.orientation.label': 'Orientation du document',
+      'reports.orientation.portrait': 'Portrait',
+      'reports.orientation.landscape': 'Paysage',
+      'reports.cardColumns.label': 'Fiches par rangée',
+      'reports.cardColumns.option_one': '{{count}} fiche par rangée',
+      'reports.cardColumns.option_other': '{{count}} fiches par rangée',
+      'reports.cardColumns.hint': 'Plus de fiches par rangée réduit le nombre de pages imprimées.',
+      'reports.compactCards.label': 'Fiches condensées',
       'reports.printPreviewError': 'L’aperçu avant impression n’a pas pu être chargé.',
       'reports.save': 'Enregistrer le rapport',
       'reports.delete': 'Supprimer le rapport',
@@ -427,6 +435,14 @@ const resources = {
       'reports.preview.live': 'Live Preview',
       'reports.preview.print': 'Print Layout',
       'reports.print': 'Print',
+      'reports.orientation.label': 'Document orientation',
+      'reports.orientation.portrait': 'Portrait',
+      'reports.orientation.landscape': 'Landscape',
+      'reports.cardColumns.label': 'Cards per row',
+      'reports.cardColumns.option_one': '{{count}} card per row',
+      'reports.cardColumns.option_other': '{{count}} cards per row',
+      'reports.cardColumns.hint': 'More cards per row means fewer printed pages.',
+      'reports.compactCards.label': 'Condensed cards',
       'reports.printPreviewError': 'The print preview could not be loaded.',
       'reports.save': 'Save Report',
       'reports.delete': 'Delete Report',
diff --git a/apps/client/src/routes/__tests__/reports-live-exports.test.tsx b/apps/client/src/routes/__tests__/reports-live-exports.test.tsx
index ba6c8eb..f6c7acb 100644
--- a/apps/client/src/routes/__tests__/reports-live-exports.test.tsx
+++ b/apps/client/src/routes/__tests__/reports-live-exports.test.tsx
@@ -128,3 +128,70 @@ describe('report exports follow the on-screen configuration', () => {
     expect(JSON.parse(init.body).name).toBe('Rapport sauvegarde');
   });
 });
+
+describe('printed layout options', () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.spyOn(apiClient, 'get').mockImplementation((url: string) => {
+      if (url.startsWith('/databases/'))
+        return Promise.resolve({ id: 'db-1', name: 'Base' }) as any;
+      if (url.startsWith('/tables/')) return Promise.resolve({ id: 'tbl-1', name: 'Table' }) as any;
+      if (url.startsWith('/fields')) return Promise.resolve(mockFields) as any;
+      if (url.startsWith('/reports')) return Promise.resolve([savedReport]) as any;
+      if (url.startsWith('/views'))
+        return Promise.resolve([
+          { id: 'view-1', table_id: 'tbl-1', name: 'Fiche', type: 'card', config: { columns: [] } },
+        ]) as any;
+      return Promise.resolve([]) as any;
+    });
+    vi.spyOn(apiClient, 'post').mockResolvedValue({ columns: ['Titre'], groups: [] } as any);
+
+    fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      headers: { get: () => 'attachment; filename="rapport.pdf"' },
+      blob: async () => new Blob(['pdf']),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    window.matchMedia = vi.fn().mockReturnValue({ matches: false }) as any;
+    vi.stubGlobal('URL', {
+      ...window.URL,
+      createObjectURL: vi.fn(() => 'blob:mock'),
+      revokeObjectURL: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it('sends orientation, cards per row and the compact flag with the export', async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    // Selecting the saved report restores its view, which reveals the card options.
+    await user.click(await screen.findByRole('button', { name: /Rapport sauvegarde/ }));
+
+    await user.selectOptions(await screen.findByLabelText('Document orientation'), 'landscape');
+    await user.selectOptions(await screen.findByLabelText('Cards per row'), '3');
+    await user.click(screen.getByLabelText('Condensed cards'));
+
+    await user.click(screen.getByRole('button', { name: /PDF/ }));
+    await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+
+    const body = JSON.parse(fetchMock.mock.calls[0][1].body);
+    expect(body.layout.orientation).toBe('landscape');
+    expect(body.layout.card_columns).toBe(3);
+    expect(body.layout.compact_cards).toBe(true);
+  });
+
+  it('hides the card options when no view is selected', async () => {
+    renderPage();
+
+    // Orientation applies to the table layout too, so it stays available.
+    expect(await screen.findByLabelText('Document orientation')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Cards per row')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Condensed cards')).not.toBeInTheDocument();
+  });
+});
diff --git a/apps/client/src/routes/reports.$databaseId.$tableId.tsx b/apps/client/src/routes/reports.$databaseId.$tableId.tsx
index 02addb7..41f622f 100644
--- a/apps/client/src/routes/reports.$databaseId.$tableId.tsx
+++ b/apps/client/src/routes/reports.$databaseId.$tableId.tsx
@@ -53,6 +53,9 @@ interface Report {
     view_id?: string;
     show_headers_only?: boolean;
     per_page?: number;
+    orientation?: 'portrait' | 'landscape';
+    card_columns?: number;
+    compact_cards?: boolean;
   } | null;
 }
 
@@ -84,6 +87,11 @@ export function ReportBuilderPage() {
   const [groupField, setGroupField] = useState<string>('');
   const [selectedViewId, setSelectedViewId] = useState<string>('');
   const [showHeadersOnly, setShowHeadersOnly] = useState<boolean>(false);
+  // Printed-document layout: paper orientation, how many cards sit side by side,
+  // and whether card chrome is tightened.
+  const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('portrait');
+  const [cardColumns, setCardColumns] = useState<number>(1);
+  const [compactCards, setCompactCards] = useState<boolean>(false);
   const [sorts, setSorts] = useState<SortRule[]>([]);
   const [conditions, setConditions] = useState<Condition[]>([]);
   const [logic, setLogic] = useState<'and' | 'or'>('and');
@@ -263,6 +271,9 @@ export function ReportBuilderPage() {
         setSelectedViewId(report.layout?.view_id ?? '');
         setShowHeadersOnly(report.layout?.show_headers_only ?? false);
         setPerPage(report.layout?.per_page ?? 10);
+        setOrientation(report.layout?.orientation ?? 'portrait');
+        setCardColumns(report.layout?.card_columns ?? 1);
+        setCompactCards(report.layout?.compact_cards ?? false);
 
         // Restore sorts
         const sortRules = (report.query?.sort ?? []).map((s) => ({
@@ -294,6 +305,9 @@ export function ReportBuilderPage() {
       setSelectedViewId('');
       setShowHeadersOnly(false);
       setPerPage(10);
+      setOrientation('portrait');
+      setCardColumns(1);
+      setCompactCards(false);
       setSorts([]);
       setConditions([]);
       setLogic('and');
@@ -335,8 +349,19 @@ export function ReportBuilderPage() {
       show_headers_only: showHeadersOnly,
       view_id: selectedViewId || undefined,
       per_page: perPage,
+      orientation,
+      card_columns: cardColumns,
+      compact_cards: compactCards,
     }),
-    [selectedColumns, showHeadersOnly, selectedViewId, perPage]
+    [
+      selectedColumns,
+      showHeadersOnly,
+      selectedViewId,
+      perPage,
+      orientation,
+      cardColumns,
+      compactCards,
+    ]
   );
 
   // Mutators for Saving, Updating and Deleting Reports
@@ -834,6 +859,62 @@ export function ReportBuilderPage() {
                 </select>
               </div>
 
+              {/* Print and PDF layout: these only change the exported document */}
+              <div className="mb-3">
+                <label className="form-label" htmlFor="report-orientation">
+                  {t('reports.orientation.label')}
+                </label>
+                <select
+                  id="report-orientation"
+                  className="form-select form-select-sm"
+                  value={orientation}
+                  onChange={(e) => setOrientation(e.target.value as 'portrait' | 'landscape')}
+                >
+                  <option value="portrait">{t('reports.orientation.portrait')}</option>
+                  <option value="landscape">{t('reports.orientation.landscape')}</option>
+                </select>
+              </div>
+
+              {selectedViewId && (
+                <>
+                  <div className="mb-3">
+                    <label className="form-label" htmlFor="report-card-columns">
+                      {t('reports.cardColumns.label')}
+                    </label>
+                    <select
+                      id="report-card-columns"
+                      className="form-select form-select-sm"
+                      value={cardColumns}
+                      onChange={(e) => setCardColumns(Number(e.target.value))}
+                    >
+                      {[1, 2, 3, 4].map((n) => (
+                        <option key={n} value={n}>
+                          {t('reports.cardColumns.option', { count: n })}
+                        </option>
+                      ))}
+                    </select>
+                    <div className="form-hint small">{t('reports.cardColumns.hint')}</div>
+                  </div>
+
+                  <div className="form-check form-switch mb-3">
+                    <input
+                      className="form-check-input cursor-pointer"
+                      type="checkbox"
+                      role="switch"
+                      id="compact-cards"
+                      checked={compactCards}
+                      onChange={(e) => setCompactCards(e.target.checked)}
+                    />
+                    <label
+                      className="form-check-label small cursor-pointer"
+                      htmlFor="compact-cards"
+                    >
+                      {t('reports.compactCards.label')}
+                    </label>
+                  </div>
+                </>
+              )}
+
               {/* Page Size Selector */}
               {!showHeadersOnly && (
                 <div className="mb-3">