From aa03573e1f83792ad4b3a59509b0334c1805c279 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sun, 31 May 2026 21:28:02 +0200
Subject: [PATCH] Fix live-log dial modals overlapping journal text.

Portal overlays to document.body and use opaque modal panels so fixed positioning works outside form-card and journal entries stay readable.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/App.css                    | 15 ++++++++++++---
 client/src/components/LiveLogView.tsx | 20 ++++++++++++++------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 79542d6..b495458 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -3292,8 +3292,10 @@ html.theme-cupertino .events-scroll-container {
 .live-log-modal-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.55);
+  z-index: 10050;
+  background: rgba(2, 6, 23, 0.78);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3304,6 +3306,9 @@ html.theme-cupertino .events-scroll-container {
   width: min(420px, 100%);
   padding: 20px;
   border-radius: var(--app-radius-card, 12px);
+  background: var(--app-surface-alt);
+  border: 1px solid var(--app-border-muted);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
 }
 
 .live-log-modal--dial {
@@ -3315,6 +3320,10 @@ html.theme-cupertino .events-scroll-container {
   flex-direction: column;
   gap: 8px;
   margin-bottom: 16px;
+  padding: 12px;
+  border-radius: var(--app-radius-input, 8px);
+  background: var(--app-surface-inset);
+  border: 1px solid var(--app-border-subtle);
 }
 
 .live-log-dial-field label {
@@ -3414,7 +3423,7 @@ html.theme-cupertino .events-scroll-container {
   left: 50%;
   bottom: 24px;
   transform: translateX(-50%);
-  z-index: 900;
+  z-index: 10060;
   display: flex;
   align-items: center;
   gap: 12px;
diff --git a/client/src/components/LiveLogView.tsx b/client/src/components/LiveLogView.tsx
index 586a02d..c87e236 100644
--- a/client/src/components/LiveLogView.tsx
+++ b/client/src/components/LiveLogView.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import {
   Anchor,
@@ -474,6 +475,7 @@ export default function LiveLogView({
   }
 
   return (
+    <>
     <div className="form-card live-log-card">
       <div className="section-title-bar mb-4">
         <div className="form-header" style={{ margin: 0 }}>
@@ -602,7 +604,10 @@ export default function LiveLogView({
           )}
         </section>
       </div>
+    </div>
 
+    {((undoVisible && events.length > 0) || modal !== 'none') && createPortal(
+      <>
       {undoVisible && events.length > 0 && (
         <div className="live-log-undo-bar" role="status">
           <span>{t('logs.live_undo_hint')}</span>
@@ -615,7 +620,7 @@ export default function LiveLogView({
 
       {modal === 'sails' && (
         <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
-          <div className="live-log-modal glass" onClick={(e) => e.stopPropagation()}>
+          <div className="live-log-modal" onClick={(e) => e.stopPropagation()}>
             <h3>{t('logs.live_sails_pick')}</h3>
             <div className="sails-picker-pills live-log-sail-pills">
               {sailOptions.map((sail) => (
@@ -639,7 +644,7 @@ export default function LiveLogView({
 
       {modal === 'comment' && (
         <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
-          <div className="live-log-modal glass" onClick={(e) => e.stopPropagation()}>
+          <div className="live-log-modal" onClick={(e) => e.stopPropagation()}>
             <h3>{t('logs.live_comment_btn')}</h3>
             <input type="text" className="input-text" value={commentText} onChange={(e) => setCommentText(e.target.value)} placeholder={t('logs.live_comment_placeholder')} autoFocus onKeyDown={(e) => { if (e.key === 'Enter') confirmComment() }} />
             <div className="live-log-modal-actions">
@@ -652,7 +657,7 @@ export default function LiveLogView({
 
       {modal === 'wind' && (
         <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
-          <div className="live-log-modal live-log-modal--dial glass" onClick={(e) => e.stopPropagation()}>
+          <div className="live-log-modal live-log-modal--dial" onClick={(e) => e.stopPropagation()}>
             <h3>{t('logs.live_wind_btn')}</h3>
             <div className="live-log-dial-field">
               <label>{t('logs.event_wind_direction')}</label>
@@ -686,7 +691,7 @@ export default function LiveLogView({
 
       {modal === 'course' && (
         <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
-          <div className="live-log-modal live-log-modal--dial glass" onClick={(e) => e.stopPropagation()}>
+          <div className="live-log-modal live-log-modal--dial" onClick={(e) => e.stopPropagation()}>
             <h3>{t('logs.live_course_btn')}</h3>
             <div className="live-log-dial-field">
               <label>{t('logs.event_mgk')}</label>
@@ -708,7 +713,7 @@ export default function LiveLogView({
 
       {['pressure', 'temp', 'precip', 'sea_state', 'fuel', 'water', 'sog', 'stw'].includes(modal) && (
         <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
-          <div className="live-log-modal glass" onClick={(e) => e.stopPropagation()}>
+          <div className="live-log-modal" onClick={(e) => e.stopPropagation()}>
             <h3>
               {modal === 'pressure' && t('logs.live_pressure_btn')}
               {modal === 'temp' && t('logs.live_temp_btn')}
@@ -748,6 +753,9 @@ export default function LiveLogView({
           </div>
         </div>
       )}
-    </div>
+      </>,
+      document.body
+    )}
+    </>
   )
 }