From a3cb04f2138ff46ef072aaeb07cbbc9b0424ed68 Mon Sep 17 00:00:00 2001
From: p11 <Krapohl.f@gmx.de>
Date: Wed, 9 Apr 2025 01:31:53 +0200
Subject: [PATCH] Use a canvas for the text boxes

---
 src/main.rs | 40 +++++++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/main.rs b/src/main.rs
index 5ea7647..fa92e28 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -614,19 +614,23 @@ fn handle_relative_connection(
 
         let html = html! {
             div id="story-container" {
+                div class="textbox-container" {
+                    div class="textbox-content" {
+                        @for (index, section) in sections.iter().enumerate() {
+                            div class="story-section" data-section-index=(index)
+                                style=(format!("display: {};", if index == 0 { "block" } else { "none" })) {
+                                (maud::PreEscaped(section))
+                            }
+                        }
+                    }
+                }
+
                 div class="nav-controls" {
                     button class="nav-button" onclick="prev()" { "←" }
                     span id="section-counter" { "1/" (sections.len()) }
                     button class="nav-button" onclick="next()" { "→" }
                 }
 
-                @for (index, section) in sections.iter().enumerate() {
-                    div class="story-section" data-section-index=(index)
-                        style=(format!("display: {};", if index == 0 { "block" } else { "none" })) {
-                        (maud::PreEscaped(section))
-                    }
-                }
-
                 style {
                     (maud::PreEscaped(r"
                         .nav-controls {
@@ -671,6 +675,28 @@ fn handle_relative_connection(
                         .nav-button:active {
                             transform: scale(0.95);
                         }
+
+                        .textbox-container {
+                            width: 75%;
+                            margin: 0 auto;
+                            position: relative;
+                            padding-top: 42.1875%; /* 16:9 Aspect Ratio */
+                            background: #f8f8f8;
+                            border-radius: 8px;
+                            overflow: hidden;
+                        }
+
+                        .textbox-content {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            right: 0;
+                            bottom: 0;
+                            display: flex;
+                            flex-direction: column;
+                            padding: 1rem;
+                            justify-content: flex-end;
+                        }
                     "))
                 }