From bae187817e859d936b0924e053a8b11b49743211 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 28 May 2025 19:41:17 +0200
Subject: [PATCH] Refactor and enhance styling for spirit info component

---
 node/server/public/index.html | 242 +++++++++++++++++-----------------
 1 file changed, 120 insertions(+), 122 deletions(-)

diff --git a/node/server/public/index.html b/node/server/public/index.html
index 4bc6ad3..eba5d56 100644
--- a/node/server/public/index.html
+++ b/node/server/public/index.html
@@ -14,135 +14,133 @@
   }
   </script>
   <style>
-    html, body {
-      width: 100vw;
-      height: 100vh;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      background: #000;
-    }
-    #viewer {
-      position: fixed;
-      inset: 0;
-      width: 100vw;
-      height: 100vh;
-      overflow: hidden;
-      background: #000;
-      /* border-radius:15px; // Optional */
-    }
-    canvas {
-      display: block;
-      position: absolute;
-      left: 50%; top: 50%;
-      transform: translate(-50%, -50%);
-      /* width/height wird von JS gesetzt */
-      /* Wichtig: Keine max-width/max-height */
-    }
+html, body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background: #000;
+}
+#viewer {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #000;
+}
+canvas {
+  display: block;
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#spirit-info {
+  box-sizing: border-box;
+  position: fixed;
+  overflow-x: hidden;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,0.94);
+  color: #fff;
+  border-radius: 18px;
+  font-family: 'Segoe UI', sans-serif;
+  box-shadow: 0 12px 64px #000a;
+  width: 600px;
+  max-width: calc(100vw - 48px);
+  min-width: 320px;
+  height: auto;
+  max-height: calc(100dvh - 48px); /* Besser: dynamic viewport height */
+  overflow-y: auto;
+  padding: 40px 36px 32px 36px;
+  z-index: 9999;
+  margin: 0;
+}
+
+.spirit-info-flex {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+#spirit-info h2 {
+  margin: 0 0 8px 0;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  font-size: 1.6em;
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: normal;
+}
+
+/* "Desktop" und Mobile-Landscape (breit genug) */
+@media (min-width: 620px) and (orientation: landscape) {
   #spirit-info {
-    box-sizing: border-box;
-    position: fixed;
-    overflow-x: hidden;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    background: rgba(0,0,0,0.94);
-    color: #fff;
-    border-radius: 18px;
-    font-family: 'Segoe UI', sans-serif;
-    box-shadow: 0 12px 64px #000a;
-    width: 600px;                /* Feste Standard-Breite Desktop */
-    max-width: calc(100vw - 48px); /* Mindestens 24px Abstand außen */
+    width: 600px;
+    max-width: calc(100vw - 64px);
     min-width: 320px;
-    height: auto;
-    max-height: calc(100vh - 48px); /* Mindestens 24px Abstand oben/unten */
-    overflow-y: auto;
-    padding: 40px 36px 32px 36px;
-    z-index: 9999;
-    margin: 0;
+    max-height: calc(100dvh - 64px);
+    padding: 40px 40px 36px 40px;
+  }
+  .spirit-info-flex {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 32px;
+  }
+  #spirit-info img {
+    max-width: 220px;
+    min-width: 120px;
+    width: 35vw;
+    max-height: 45vh;
+    height: auto;
+    object-fit: contain;
+    border-radius: 12px;
+    background: transparent;
+    flex-shrink: 0;
+    margin: 0;
+    display: block;
+  }
+  #spirit-info .spirit-info-content {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: 450px;
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+}
+
+/* "Mobile Portrait" (Hochformat und schmal) */
+@media (max-width: 619px), (orientation: portrait) {
+  #spirit-info {
+    width: 90vw;
+    max-width: 98vw;
+    min-width: 0;
+    max-height: 80dvh; /* dynamic viewport height */
+    padding: 8vw 4vw 4vw 4vw;
   }
-
   .spirit-info-flex {
-    display: flex;
     flex-direction: column;
-    gap: 18px;
+    gap: 16px;
   }
-  #spirit-info h2 {
-    margin: 0 0 8px 0;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    font-size: 1.6em;
-    white-space: normal;
-    word-break: keep-all;      /* <- Bricht NUR bei Leerzeichen */
-    overflow-wrap: normal;
+  #spirit-info img {
+    display: block;
+    margin: 0 auto 18px auto;
+    max-width: 84vw;
+    max-height: 30vh;
+    border-radius: 12px;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    background: transparent;
   }
-
-  @media (min-width: 620px) {
-    #spirit-info {
-      width: 600px;
-      max-width: calc(100vw - 64px); /* Noch etwas mehr Abstand bei großem Screen */
-      min-width: 320px;
-      max-height: calc(100vh - 64px);
-      padding: 40px 40px 36px 40px;
-    }
-    .spirit-info-flex {
-      flex-direction: row;
-      align-items: flex-start;
-      gap: 32px;
-    }
-    #spirit-info img {
-      max-width: 220px;
-      min-width: 120px;
-      width: 35vw;
-      max-height: 45vh;
-      height: auto;
-      object-fit: contain;
-      border-radius: 12px;
-      background: transparent;
-      flex-shrink: 0;
-      margin: 0;
-      display: block;
-    }
-    #spirit-info .spirit-info-content {
-      flex: 1 1 0;
-      min-width: 0;             /* !!! Für korrektes Wrapping !!! */
-      max-width: 450px;
-      overflow-wrap: break-word;
-      word-break: break-word;
-      /* Optionale Optik: */
-      /* padding-left: 16px; */
-    }
-  }
-
-  @media (max-width: 619px), (pointer: coarse) {
-    #spirit-info {
-      width: 90vw;
-      max-width: 98vw;
-      min-width: 0;
-      max-height: 80vh;
-      padding: 8vw 4vw 4vw 4vw;
-    }
-    .spirit-info-flex {
-      flex-direction: column;
-      gap: 16px;
-    }
-    #spirit-info img {
-      display: block;
-      margin: 0 auto 18px auto;
-      max-width: 84vw;
-      max-height: 30vh;
-      border-radius: 12px;
-      width: 100%;
-      height: auto;
-      object-fit: contain;
-      background: transparent;
-    }
-    #spirit-info .spirit-info-content {
-      width: 100%;
-      max-width: 100%;
-      min-width: 0;
-      word-break: break-word;
-    }
+  #spirit-info .spirit-info-content {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    word-break: break-word;
   }
 }
   </style>