From 76fac1735dc8390199697abc813466308ad21531 Mon Sep 17 00:00:00 2001
From: Hatton <hattonjohn@gmail.com>
Date: Wed, 15 Jul 2026 05:31:49 -0600
Subject: [PATCH 1/2] Tweak copyright & license dialog styling (BL-16552)

Dialog polish in the Copyright & License dialog:
- Larger, medium-weight dialog title; more tab-panel top padding; and
  slightly larger, letter-spaced tab labels.
- Consistent bottom spacing for the year and copyright-holder fields in
  the Copyright panel.
- Wrap the Creative Commons license badge image in a dark, rounded block
  so it reads as a badge against the dialog background.

Also raise the Vite health-check timeouts in the dev launcher (go.mjs):
the overall settle timeout 15s -> 30s and the per-probe request timeout
from a hardcoded 500ms to a named 3s constant, so a slow-but-listening
Vite cold start is no longer spuriously aborted. A genuinely dead server
still fails fast via ECONNREFUSED.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../CopyrightAndLicenseDialog.tsx              |  8 +++++++-
 .../copyrightAndLicense/CopyrightPanel.tsx     |  4 ++--
 .../copyrightAndLicense/LicenseBadge.tsx       | 18 ++++++++++++++----
 src/BloomBrowserUI/scripts/go.mjs              | 17 +++++++++++++++--
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightAndLicenseDialog.tsx b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightAndLicenseDialog.tsx
index 1ee421bbd9e9..5195feaf1e03 100644
--- a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightAndLicenseDialog.tsx
+++ b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightAndLicenseDialog.tsx
@@ -222,6 +222,8 @@ export const CopyrightAndLicenseDialog: React.FunctionComponent<{
                 css={css`
                     padding-bottom: 0;
                     margin-bottom: 0;
+                    font-size: 20px;
+                    font-weight: 500;
                 `}
             />
             {
@@ -271,7 +273,11 @@ export const CopyrightAndLicenseDialog: React.FunctionComponent<{
                     css={css`
                         .react-tabs__tab-panel--selected > div {
                             padding: 0; // This cancels a rule in BloomUI.less which is too global
-                            padding-top: 20px;
+                            padding-top: 24px;
+                        }
+                        .react-tabs__tab {
+                            font-size: 14px;
+                            letter-spacing: 0.05em;
                         }
                     `}
                 >
diff --git a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightPanel.tsx b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightPanel.tsx
index 3698704b1e64..a9a32ba78206 100644
--- a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightPanel.tsx
+++ b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightPanel.tsx
@@ -148,7 +148,7 @@ export const CopyrightPanel: React.FunctionComponent<{
                 error={!isYearValid}
                 css={css`
                     width: 150px; // Enough for slightly longer translations of the label; English only needs 100px
-                    margin-bottom: 20px !important;
+                    margin-bottom: 22px !important;
 
                     // Hide the up/down control
                     input {
@@ -167,7 +167,7 @@ export const CopyrightPanel: React.FunctionComponent<{
                 required={true}
                 error={!isHolderValid}
                 css={css`
-                    margin-bottom: 11px !important;
+                    margin-bottom: 22px !important;
                 `}
             />
             {/* keeping this for now in case things change, but the restrictions on what can
diff --git a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx
index 5d01967d3768..2d426093f937 100644
--- a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx
+++ b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx
@@ -67,13 +67,23 @@ export const LicenseBadge: React.FunctionComponent<{
                     flex-direction: column;
                 `}
             >
-                <img
-                    src={`${getBloomApiPrefix()}copyrightAndLicense/ccImage?token=${token}`}
+                <div
                     css={css`
-                        width: 100px;
+                        background-color: #555;
+                        border-radius: ${kBorderRadiusForSpecialBlocks};
+                        padding: 5px 8px;
                         margin-left: auto !important;
+                        width: fit-content;
                     `}
-                />
+                >
+                    <img
+                        src={`${getBloomApiPrefix()}copyrightAndLicense/ccImage?token=${token}`}
+                        css={css`
+                            width: 100px;
+                            display: block;
+                        `}
+                    />
+                </div>
                 {token !== "cc0" && (
                     <div
                         css={css`
diff --git a/src/BloomBrowserUI/scripts/go.mjs b/src/BloomBrowserUI/scripts/go.mjs
index f3a3671e18a7..ea082bdbd0ae 100644
--- a/src/BloomBrowserUI/scripts/go.mjs
+++ b/src/BloomBrowserUI/scripts/go.mjs
@@ -17,8 +17,21 @@ const devScriptPath = path.join(browserUIRoot, "scripts", "dev.mjs");
 const exeScriptPath = path.join(repoRoot, "scripts", "watchBloomExe.mjs");
 process.env.feedback = "off";
 const startupQuietMs = 1500;
-const viteHealthTimeoutMs = 15000;
+const viteHealthTimeoutMs = 30000;
 const viteHealthPollMs = 250;
+// Per-request timeout for a single /@vite/client probe. This must comfortably
+// exceed Vite's real cold-start response latency, NOT just its steady-state
+// latency (a few ms). We probe at the most CPU-contended moment of startup:
+// Vite is still pre-bundling deps (optimizeDeps for jquery/comicaljs), the 7
+// file watchers are doing their initial scans, and LESS is compiling ~180
+// stylesheets, so Vite's event loop stalls in bursts. Measured latency under
+// that load reaches ~2.9s (p99), while steady state is <10ms. A 500ms timeout
+// (the previous value) spuriously aborted every probe during this window, so
+// waitForViteClient never got its 2 consecutive successes and the whole launch
+// failed. A slow-but-listening server is healthy, not broken; a genuinely dead
+// server still fails fast via ECONNREFUSED, so this longer timeout only affects
+// the busy-but-fine case.
+const viteHealthRequestTimeoutMs = 3000;
 const maxRandomVitePortAttempts = 10;
 const gracefulShutdownMs = 1500;
 // Probe both loopback families: Vite may bind only IPv6 (::1) on some machines,
@@ -229,7 +242,7 @@ const isViteClientReachable = async (port) => {
             const response = await fetch(
                 `${toViteOrigin(host, port)}/@vite/client`,
                 {
-                    signal: AbortSignal.timeout(500),
+                    signal: AbortSignal.timeout(viteHealthRequestTimeoutMs),
                 },
             );
             if (response.ok) {

From 02930c86f7e5c90f6887f71716be4cae8776e117 Mon Sep 17 00:00:00 2001
From: Hatton <hattonjohn@gmail.com>
Date: Wed, 15 Jul 2026 08:41:29 -0600
Subject: [PATCH 2/2] Remove the dark box behind the CC license badge
 (BL-16552)

The earlier styling pass wrapped the Creative Commons badge image in a
dark (#555) rounded block. That reads as an unwanted gray box around the
icon, so revert LicenseBadge back to the plain right-aligned 100px image
as it was before. The rest of the dialog typography/spacing tweaks stay.
---
 .../copyrightAndLicense/LicenseBadge.tsx       | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx
index 2d426093f937..5d01967d3768 100644
--- a/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx
+++ b/src/BloomBrowserUI/bookEdit/copyrightAndLicense/LicenseBadge.tsx
@@ -67,23 +67,13 @@ export const LicenseBadge: React.FunctionComponent<{
                     flex-direction: column;
                 `}
             >
-                <div
+                <img
+                    src={`${getBloomApiPrefix()}copyrightAndLicense/ccImage?token=${token}`}
                     css={css`
-                        background-color: #555;
-                        border-radius: ${kBorderRadiusForSpecialBlocks};
-                        padding: 5px 8px;
+                        width: 100px;
                         margin-left: auto !important;
-                        width: fit-content;
                     `}
-                >
-                    <img
-                        src={`${getBloomApiPrefix()}copyrightAndLicense/ccImage?token=${token}`}
-                        css={css`
-                            width: 100px;
-                            display: block;
-                        `}
-                    />
-                </div>
+                />
                 {token !== "cc0" && (
                     <div
                         css={css`