Fix xhs-post responsive scaling on landscape displays

[cola0405]

PR: Fix xhs-post responsive scaling on landscape displays

Problem

The xhs-post template uses a vertical 3:4 aspect ratio (810×1080). When viewed on landscape displays (especially in fullscreen mode via F key), the content overflows the viewport, requiring users to scroll to see the full slide.

Solution

Add CSS transform scaling that automatically scales the deck container to fit within the viewport while maintaining the aspect ratio.

Changes

/* Before */
.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh}
.tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent}

/* After */
.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden}
.tpl-xhs-post .deck{
  width:810px;height:1080px;position:relative;background:transparent;
  transform-origin:center center;
}
@media (max-height:1120px){
  .tpl-xhs-post .deck{transform:scale(calc(100vh / 1120));}
}
@media (max-width:850px){
  .tpl-xhs-post .deck{transform:scale(calc(100vw / 850));}
}

Technical Details

• Scale factors:
  • Height: calc(100vh / 1120) — 1120 = 1080 content + 40px padding margin
  • Width: calc(100vw / 850) — 850 = 810 content + 40px padding margin
• Transform origin: center center ensures scaling from the center
• Overflow hidden: Prevents scrollbars during scaling

Testing

• Tested on 1920×1080 landscape display — slides fit perfectly
• Tested on 2560×1440 display — no unnecessary scaling
• Tested on mobile viewport (375×812) — scales to width
• Fullscreen mode (F key) works without scrollbars

Screenshots

Before	After
Content overflows, scrollbar appears	Content scales to fit, no scrollbar

Related

This fix could also be applied to other vertical templates if needed.