PDF Export - remove page breaks between days #1292

upendedshark · 2026-06-24T01:45:39Z

upendedshark
Jun 24, 2026

PDF feature is great, but it looks much better rendered in the app than when printed as a PDF. When printed, each day has a page break, even if there is only 1 or no items on that day. I'd much prefer the export to look like the pdf view in the app which gives each day a dynamic height depending on the content. If this can be an option, that can serve both users who prefer the page breaks and those that don't

Thanks!

shanehannant · 2026-06-28T01:41:45Z

shanehannant
Jun 28, 2026

Love this app and everything about it for me as a techy person. This would make it great for me to hand over to my parents who like hard copies :)

0 replies

fcucci · 2026-06-30T21:33:31Z

fcucci
Jun 30, 2026

Trip Plan PDF — printer-friendly formatting (trek-base)

Patches TREK v3.1.3 trip PDF output in trek-base/ for home printing. Export flow is unchanged: preview overlay → Save as PDF → browser print dialog.

Baseline: stock trek-base/client/src/components/PDF/TripPDF.tsx (blue full-page cover, one new page per day, Google Fonts Poppins).

Files changed

File	Role
`client/src/components/PDF/TripPDF.tsx`	All HTML/CSS + print rules (`downloadTripPDF`)
`client/src/components/PDF/TripPDF.test.ts`	Asserts compact cover, no per-day breaks, break-avoid rules

Not changed: DayPlanSidebarToolbar.tsx, DayPlanSidebar.tsx, package.json, server code.

1. Day loop — remove forced page break

Where: daysHtml builder, sorted.map(...).

- sorted.map((day, di) => {
+ sorted.map((day) => {
    ...
-   <div class="day-section${di > 0 ? ' page-break' : ''}">
+   <div class="day-section">

CSS removed:

.page-break { page-break-before: always; }

CSS added:

.day-section + .day-section { margin-top: 16px; }

2. Cover — compact white header (ink-friendly)

Where: <style> block + cover HTML inside the html template.

Removed (stock trek-base)

<link href="https://fonts.googleapis.com/...Poppins..."> in <head>
.cover { background: #0f172a; min-height: 100vh; ... }
.cover-bg, .cover-dim (full-bleed trip photo behind cover)
Cover HTML: cover-bg div, cover-dim div, empty cover-circle-ph placeholder
@media print { .cover { min-height: 100vh; page-break-after: always; } }
logo-light.svg on dark background

Added

Body font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif (no network font fetch at print time)
.cover — white band, padding: 20px 28px 16px, no min-height
.cover-accent — 3px #0f172a top bar
.cover-body — flex row; optional 72px .cover-circle + .cover-main text column
Smaller type: title 26px, stats 18px (was 42px / 28px)
logo-dark.svg in .cover-brand and footer

Cover HTML shape:

<div class="cover">
  <div class="cover-accent"></div>
  <div class="cover-brand">…logo-dark.svg…</div>
  <div class="cover-body">
    <!-- cover-circle only if trip has cover_image -->
    <div class="cover-main">…label, title, dates, stats…</div>
  </div>
</div>

3. Widow/orphan — keep blocks together when printing

Where: day + accommodation CSS and @media print block.

Stock trek-base had no break rules on day header/body or accommodation cards (cards split across pages — e.g. accommodation title on page N, booking details on N+1).

Added on screen + print

.day-header {
  break-after: avoid;
  page-break-after: avoid;
}
.day-body {
  break-before: avoid;
  page-break-before: avoid;
}
.day-accommodations-overview,
.day-accommodation {
  break-inside: avoid;
  page-break-inside: avoid;
}

(.place-card and .note-card already had page-break-inside: avoid in stock trek-base.)

Added in `@media print` only

@page { margin: 10mm; }   /* was margin: 0 */
.day-body { orphans: 3; widows: 3; }
.day-accommodation,
.day-accommodations-overview,
.place-card,
.note-card {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

Still not added: per-day page-break-before, full-page cover break, or break-inside: avoid on entire .day-section (long days may span pages).

4. Unchanged from stock trek-base

Preview overlay + #pdf-preview-overlay iframe + Save as PDF → iframe.contentWindow.print()
fetchPlacePhotos(assignments, places) with OSM id lookup from places pool ([BUG] Location images only shown when triggered #1130)
Day header dark bar, place cards, reservations, accommodations markup, footer
DayPlanSidebarToolbar PDF button (hover tooltip, no auto-download)

0 replies

mauriceboe · 2026-07-29T19:32:48Z

mauriceboe
Jul 29, 2026
Maintainer

Coming in 4.0.0!

0 replies

Navigation Menu

Uh oh!

Uh oh!

PDF Export - remove page breaks between days #1292

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Uh oh!

PDF Export - remove page breaks between days #1292

Uh oh!

upendedshark Jun 24, 2026

Replies: 3 comments

Uh oh!

shanehannant Jun 28, 2026

Uh oh!

fcucci Jun 30, 2026

Trip Plan PDF — printer-friendly formatting (trek-base)

Files changed

1. Day loop — remove forced page break

2. Cover — compact white header (ink-friendly)

Removed (stock trek-base)

Added

3. Widow/orphan — keep blocks together when printing

Added on screen + print

Added in @media print only

4. Unchanged from stock trek-base

Uh oh!

mauriceboe Jul 29, 2026 Maintainer

upendedshark
Jun 24, 2026

shanehannant
Jun 28, 2026

fcucci
Jun 30, 2026

Added in `@media print` only

mauriceboe
Jul 29, 2026
Maintainer