Tweak copyright & license dialog styling (BL-16552)

[hatton]

Polish for the Copyright & License dialog (BL-16552):

• 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.

Ref: https://issues.bloomlibrary.org/youtrack/issue/BL-16552

🤖 Generated with Claude Code

---

This change is 

[greptile-apps]

Greptile Summary

This PR applies visual polish to the Copyright & License dialog: larger/medium-weight title text, more top padding in the tab panels, slightly larger letter-spaced tab labels, and equalized bottom spacing between the year and copyright-holder fields.

• Tab-panel top padding bumped from 20 px to 24 px and new .react-tabs__tab selector adds font-size: 14px; letter-spacing: 0.05em — both follow the existing scoped-selector pattern and should work correctly.
• CopyrightPanel.tsx equalizes the bottom margin on both text fields to 22 px (previously 20 px / 11 px), a clean consistency fix.
• The intended "larger, medium-weight" title change (font-size: 20px; font-weight: 500) is applied to <DialogTitle> via the Emotion css prop, but DialogTitle does not forward className to its root element and its internal * { font-size: 16px; font-weight: bold } rule explicitly overrides those properties on all descendants, so the title text will be unaffected.

Important Files Changed

Filename	Overview
src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightAndLicenseDialog.tsx	Adds font-size/font-weight to DialogTitle via css prop (will be silently dropped — DialogTitle doesn't forward className and its internal * rule overrides descendants), increases tab-panel padding from 20px to 24px, and adds font-size/letter-spacing to tab labels via scoped class selectors.
src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightPanel.tsx	Equalizes bottom-margin on the year field (20→22px) and copyright-holder field (11→22px) for visual consistency; straightforward cosmetic change.

Comments Outside Diff (1)

1. src/BloomBrowserUI/bookEdit/copyrightAndLicense/CopyrightAndLicenseDialog.tsx, line 220-228 (link)

   font-size/font-weight styles on DialogTitle will be silently dropped

   DialogTitle (in BloomDialog.tsx) does not accept a className prop and does not spread ...props to its root div. Emotion converts a css prop on a custom component into a generated className and passes it to the component; if the component ignores className, the styles never reach any DOM element. Even if they did reach the outer div, the component's internal * { font-size: 16px; font-weight: bold; } rule explicitly sets these on all descendants (including the h1 that renders props.title), so the h1 will always be 16px bold regardless. The stated goal of "Larger, medium-weight dialog title" won't be achieved by this approach. To make the title larger/lighter, DialogTitle would need to accept a dedicated prop (e.g. titleStyle) or accept and forward className, and its internal * wildcard rule would need to be narrowed.

_{Reviews (2): Last reviewed commit: "Merge remote-tracking branch 'origin/mas..." | Re-trigger Greptile}

[hatton]

[Claude Opus 4.8] Consulted Devin on 2026-07-15 up to commit 6e9396f4903e0d4b0a29b164c606753c2dc1a2a8. No Bugs and no Investigate flags — only one Informational note confirming the CC-badge wrapper preserves the badge's right-alignment. Greptile review passed clean; CI checks green.

[hatton]

[Devin] Investigate: Doubled bottom margin on Copyright Holder field within a fixed-height dialog

Devin flagged that the Copyright Holder field's bottom margin went from 11px to 22px (and the Year field similarly) while this dialog has a fixed height (575px). Combined with the tab-panel top-padding increase (20px → 24px), that's roughly 15px more vertical space used. Devin rates overflow as unlikely given the available headroom, but worth an eyeball — especially in the derivative-book scenario, where the Copyright panel also shows the "Not a translation" checkbox and the original-copyright text below these fields. Please confirm nothing gets clipped there.

Assessment (Claude Opus 4.8): low risk — the dialog has headroom and this is exactly what the visual pass will catch — but a fair thing to verify since it's a fixed-height dialog. Leaving this thread open for the visual check rather than resolving it.

[hatton]

[Claude Opus 4.8] Consulted Devin on 2026-07-15 up to commit 0628916d6c049e06120a10cdcdcd580a587ce79d (after removing the gray box behind the CC badge). 0 Bugs; 1 Investigate flag — posted as an inline thread on CopyrightPanel.tsx:170 (verify no clipping in the derivative-book layout; rated low risk). One Informational note skipped. Greptile passed clean; CI green.