From e8c09f3b6d58155f929120b3885062bd983d4bb7 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 00:43:02 +0100
Subject: [PATCH] Scroll relative to bottom of screen

From my experiments, setting flex-direction: column-reverse on the body
doesn't work, it has to be a separate element. Maybe I made a mistake
somewhere though. In any case, this code seems to work properly.
---
 showbits-thermal-printer-ui/src/App.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/App.vue b/showbits-thermal-printer-ui/src/App.vue
index e720548..40ab155 100644
--- a/showbits-thermal-printer-ui/src/App.vue
+++ b/showbits-thermal-printer-ui/src/App.vue
@@ -3,12 +3,23 @@ import CSegment from "./components/CSegment.vue";
 </script>
 
 <template>
-  <div class="strip">
-    <CSegment />
+  <div class="scroll">
+    <div class="strip">
+      <CSegment />
+    </div>
   </div>
 </template>
 
 <style scoped>
+.scroll {
+  height: 100dvh;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+}
+
 .strip {
   box-sizing: content-box;
   width: 384px;
@@ -45,13 +56,6 @@ h2 {
 }
 
 body {
-  margin: 0;
-  min-height: 100dvh;
-
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-
   background-color: black;
 }
 </style>