Animated bars, inline ProdCom timestamps, fullscreen auto-fit, dual resize corners

Title bars (tiles and the main menubar, which gains the same notch tab)
now collapse and reopen with a height animation instead of popping. The
menubar's hidden state persists per browser. ProdCom timestamps move
inline to the right of the channel name, keeping their text style; the
clock button toggles just their visibility. New fullscreen button (left
of +): entering fullscreen auto-hides the menubar and auto-fits the
layout — occupied columns stretch proportionally across the width, tiles
whose bottom edge lands within two rows of the viewport bottom stretch
to end exactly at it, small tiles (h ≤ 2) alone in their columns are
exempt, and scrolling is disabled when nothing extends below the fold
(deeper layouts keep natural rows and scrolling). All fullscreen fitting
is visual-only and reverts on exit; editing affordances are parked while
in it. Corner resize indicators now appear only on tile hover, and a
second resize handle on the bottom-left corner resizes from that edge.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
This commit is contained in:
Claude
2026-08-31 20:55:28 +00:00
parent a06bc921ce
commit 18ab8e92f1
5 changed files with 278 additions and 28 deletions
+14 -3
View File
@@ -82,15 +82,24 @@
to { opacity: 1; transform: none; }
}
[data-module="prodcom-transcript"] .channel-line {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
min-width: 0;
}
/* timestamp sits to the right of the channel name; the clock button only
toggles its visibility */
[data-module="prodcom-transcript"] .pt-entry .time {
display: none;
color: var(--muted);
font-size: 0.72em;
font-variant-numeric: tabular-nums;
flex: none;
padding-top: 3px;
}
[data-module="prodcom-transcript"] .show-times .pt-entry .time { display: block; }
[data-module="prodcom-transcript"] .show-times .pt-entry .time { display: inline; }
[data-module="prodcom-transcript"] .pt-entry .avatar {
flex: none;
@@ -114,7 +123,9 @@
letter-spacing: 0.01em;
line-height: 1;
white-space: nowrap;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
[data-module="prodcom-transcript"] .pt-entry .text {