From 6e91f921c2f5abbae5bbe0896d5bbaa184fe226d Mon Sep 17 00:00:00 2001
From: larssand <larssand@LPW0JW6L1>
Date: Mon, 7 Sep 2026 17:56:26 +0200
Subject: [PATCH] =?UTF-8?q?split=20obs=20overlay=20i=20v=C3=A4nster/h?=
 =?UTF-8?q?=C3=B6ger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Race-namn, logga och klocka till vänster, förarstats-tabellen
för sig till höger. Samma inställningar (rows/showClock/
showFastest/showLaps/showResult/showBest/showGap) styr
fortfarande innehållet, bara positioneringen är ändrad
---
 src/overlays.js | 28 +++++++++++++++-------------
 src/styles.css  | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/overlays.js b/src/overlays.js
index 08115b1..bc23697 100644
--- a/src/overlays.js
+++ b/src/overlays.js
@@ -315,21 +315,23 @@ export function renderObsOverlay(active, leaderboard, result, sessionTiming, bra
 
   return `
     <section class="overlay-obs-tower">
-      <div class="overlay-obs-tower-head">
-        <div class="overlay-obs-tower-brand">
-          ${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
-          <div>
-            <p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
-            <h2>${escapeHtml(active.name)}</h2>
+      <div class="overlay-obs-tower-left">
+        <div class="overlay-obs-tower-head">
+          <div class="overlay-obs-tower-brand">
+            ${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
+            <div>
+              <p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
+              <h2>${escapeHtml(active.name)}</h2>
+            </div>
           </div>
+          ${obsConfig.showClock ? `<div class="overlay-obs-tower-clock" data-overlay-clock>${elapsedOrRemaining}</div>` : ""}
+        </div>
+        <div class="overlay-obs-tower-meta">
+          <span>${escapeHtml(getSessionTypeLabel(active.type))}</span>
+          <span>${escapeHtml(getStartModeLabel(active.startMode))}</span>
+          ${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""}
+          ${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""}
         </div>
-        ${obsConfig.showClock ? `<div class="overlay-obs-tower-clock" data-overlay-clock>${elapsedOrRemaining}</div>` : ""}
-      </div>
-      <div class="overlay-obs-tower-meta">
-        <span>${escapeHtml(getSessionTypeLabel(active.type))}</span>
-        <span>${escapeHtml(getStartModeLabel(active.startMode))}</span>
-        ${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""}
-        ${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""}
       </div>
       <section class="overlay-obs-tower-standings">
         ${towerRowsHtml || `<p>${t("timing.no_laps")}</p>`}
diff --git a/src/styles.css b/src/styles.css
index 57fa8af..c372a20 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3659,15 +3659,23 @@ select:focus {
   align-items: start;
 }
 
-.overlay-shell-obs-layout-leaderboard .overlay-obs-layout,
-.overlay-shell-obs-layout-leaderboard .overlay-obs-tower {
+.overlay-shell-obs-layout-leaderboard .overlay-obs-layout {
   max-width: 430px;
   margin-left: auto;
 }
 
 .overlay-obs-tower {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.overlay-obs-tower-left {
   display: grid;
   gap: 6px;
+  max-width: 320px;
+  min-width: 0;
 }
 
 .overlay-obs-tower-head,
@@ -3679,6 +3687,11 @@ select:focus {
   box-shadow: var(--shadow);
 }
 
+.overlay-obs-tower-standings {
+  max-width: 340px;
+  min-width: 0;
+}
+
 .overlay-obs-tower-head {
   display: flex;
   align-items: center;