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 `
-
-
- ${branding.logoDataUrl ? `` : ""} -
-

${escapeHtml(getEventName(active.eventId))}

-

${escapeHtml(active.name)}

+
+
+
+ ${branding.logoDataUrl ? `` : ""} +
+

${escapeHtml(getEventName(active.eventId))}

+

${escapeHtml(active.name)}

+
+ ${obsConfig.showClock ? `
${elapsedOrRemaining}
` : ""} +
+
+ ${escapeHtml(getSessionTypeLabel(active.type))} + ${escapeHtml(getStartModeLabel(active.startMode))} + ${showStartGrid ? `${t("events.start_grid")}` : ""} + ${!showStartGrid && obsConfig.showFastest ? `${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}` : ""}
- ${obsConfig.showClock ? `
${elapsedOrRemaining}
` : ""} -
-
- ${escapeHtml(getSessionTypeLabel(active.type))} - ${escapeHtml(getStartModeLabel(active.startMode))} - ${showStartGrid ? `${t("events.start_grid")}` : ""} - ${!showStartGrid && obsConfig.showFastest ? `${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}` : ""}
${towerRowsHtml || `

${t("timing.no_laps")}

`} 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;