From 0ba5a33902f32a28794e68b5b3b109fef3813f68 Mon Sep 17 00:00:00 2001
From: Viktor Petersson <vpetersson@screenly.io>
Date: Mon, 13 Jul 2026 19:39:10 +0000
Subject: [PATCH] Keep the Screenly badge in the rail (avoid QR corner
 collision)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 2026.7.2 adoption moved the badge to the kit's fixed bottom-right corner
badge, but rss-reader already renders a QR "scan to read" lockup in the
bottom-right — the two overlapped (caught on stage). Keep the badge in the top
rail instead: stop prepending the kit's brand.css, restore the local `.brand`
rail rule (the former .rail__brand styling), and only share the @font-face set.

The bug fix from the adoption stays: the element is `.brand` (not the old
.rail__brand), so the shared removeScreenlyBranding() still hides it on Screenly
players. Verified: lint + 68 tests clean; built main.css has the rail `.brand`
(no position:fixed) and the 9 canonical @font-face.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 assets/static/styles/main.css | 26 ++++++++++++++++++++++----
 build.ts                      | 10 ++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/assets/static/styles/main.css b/assets/static/styles/main.css
index a02dd30..21026c2 100644
--- a/assets/static/styles/main.css
+++ b/assets/static/styles/main.css
@@ -10,10 +10,11 @@
    orientations; the per-item fit is finished in main.ts.
    ========================================================================= */
 
-/* Webfonts (@font-face) and the standardized footer badge (.brand) come from
-   @screenly-labs/signage-kit — build.ts prepends styles/fonts.css + styles/brand.css
-   to this file before down-leveling. This file keeps the app's own tokens, reset,
-   fluid root, and "The Wire" component styles. */
+/* Webfonts (@font-face) come from @screenly-labs/signage-kit — build.ts prepends
+   styles/fonts.css to this file before down-leveling. The Screenly badge stays in
+   the rail (see .brand below), not the kit's fixed corner badge, because a QR
+   lockup owns the bottom-right corner here. This file keeps the app's own tokens,
+   reset, fluid root, and "The Wire" component styles. */
 
 :root {
   --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
@@ -121,6 +122,23 @@ body {
   font-weight: 700;
   white-space: nowrap;
 }
+/* Screenly badge — carried in the rail (not the kit's fixed corner badge): a QR
+   "scan to read" lockup owns the bottom-right corner here. Kept as `.brand` so
+   the shared removeScreenlyBranding() hides it on Screenly players. */
+.brand {
+  flex: none;
+  display: flex;
+  align-items: center;
+  padding-inline-start: clamp(0.7rem, 2vmin, 1.6rem);
+  margin-inline-start: clamp(0.7rem, 2vmin, 1.6rem);
+  border-inline-start: 1px solid var(--hairline);
+  opacity: 0.85;
+}
+.brand img {
+  block-size: clamp(0.7rem, 1vmin + 0.5rem, 1.4rem);
+  inline-size: auto;
+  display: block;
+}
 /* Transmission line: a track on the rail's bottom edge that fills amber over
    each rotation interval (set in motion below). */
 .rail__line {
diff --git a/build.ts b/build.ts
index 19e4f70..fbdd718 100644
--- a/build.ts
+++ b/build.ts
@@ -24,10 +24,12 @@ import { run as syncFonts } from './sync-fonts'
 const clientOnly = process.argv.includes('--client')
 
 // Shared chrome CSS from @screenly-labs/signage-kit — the canonical @font-face
-// set and the standardized fixed footer badge. Prepended to this app's raw
-// main.css at build time (a raw-CSS Worker can't resolve a bare `@import`), so
-// the shared rules land before the app's, which override where they overlap.
-const sharedCss = ['fonts.css', 'brand.css']
+// set. Prepended to this app's raw main.css at build time (a raw-CSS Worker
+// can't resolve a bare `@import`). NOT the kit's brand.css: this app carries the
+// Screenly badge in its top rail, and a QR "scan to read" lockup already sits in
+// the bottom-right corner, so the kit's fixed corner badge would overlap it. The
+// badge stays in the rail (`.brand`, below); only the removal logic is shared.
+const sharedCss = ['fonts.css']
   .map((f) => readFileSync(Bun.resolveSync(`@screenly-labs/signage-kit/styles/${f}`, import.meta.dir), 'utf8'))
   .join('\n')