matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

PR-C0: card-style no-video tiles (border + backdrop label) #3

Closed
hudson wants to merge 8 commits from j4k-card-style-no-video-tiles into dev
pull from: j4k-card-style-no-video-tiles
merge into: matt:dev
Conversation 1 Commits 8 Files changed 3 +2 -12
hudson commented 2026-08-13 17:00:44 +00:00
Collaborator
Copy link

Fixes the half of upstream coracle/flotilla#343 asking that no-video participant tiles "stand against the background... use a card style."

Root cause: in VideoCallContent.svelte, the videoTile outer div is bg-surface and the panel (panelChrome) is also bg-surface, so no-video tiles had zero contrast against their container.

Changes (src/app/components/VideoCallContent.svelte, videoTile snippet only):

  • Outer tile div: add border border-line border-solid on the no-video state only (!tile.track). Video-on tiles unchanged (shadow-sm kept on both; video pixels supply their own contrast).
  • Name label: tile.track ? 'bg-surface/80' : 'bg-backdrop/80' so the label reads against the bg-surface tile on no-video.

On-system tokens only (border-line / bg-backdrop defined in base.css + clay/flat/navy themes). No grid/tiling/layout changes — that is PR-C1.

Verification:

  • prettier/eslint clean; svelte-check error count identical to baseline (945 pre-existing errors from unlinked @welshman/* siblings in worktree; zero new).
  • ⚠️ Interactive visual check NOT performed — the worktree cannot boot pnpm dev (sibling @welshman/* packages unlinked). Please eyeball a mixed video-on/off call before merging.

Upstream ref: https://gitea.coracle.social/coracle/flotilla/issues/343

Fixes the half of upstream coracle/flotilla#343 asking that no-video participant tiles "stand against the background... use a card style." **Root cause:** in VideoCallContent.svelte, the videoTile outer div is bg-surface and the panel (panelChrome) is also bg-surface, so no-video tiles had zero contrast against their container. **Changes (src/app/components/VideoCallContent.svelte, videoTile snippet only):** - Outer tile div: add `border border-line border-solid` on the no-video state only (`!tile.track`). Video-on tiles unchanged (shadow-sm kept on both; video pixels supply their own contrast). - Name label: `tile.track ? 'bg-surface/80' : 'bg-backdrop/80'` so the label reads against the bg-surface tile on no-video. On-system tokens only (border-line / bg-backdrop defined in base.css + clay/flat/navy themes). No grid/tiling/layout changes — that is PR-C1. **Verification:** - prettier/eslint clean; svelte-check error count identical to baseline (945 pre-existing errors from unlinked @welshman/* siblings in worktree; zero new). - ⚠️ Interactive visual check NOT performed — the worktree cannot boot `pnpm dev` (sibling @welshman/* packages unlinked). Please eyeball a mixed video-on/off call before merging. Upstream ref: https://gitea.coracle.social/coracle/flotilla/issues/343
hudson added 1 commit 2026-08-13 17:00:45 +00:00 
- Add border (border-line) to no-video tile outer div for card contrast
  against bg-surface panel (video-on tiles unchanged)
- Use bg-backdrop/80 for name label on no-video tiles for legibility
  (video-on tiles keep bg-surface/80)

Part of flotilla-j4k / coracle/flotilla#343
matt commented 2026-08-13 20:03:27 +00:00
Owner
Copy link

get rid of the tile.track ternary. There is something funky with the layout. With two video tiles displayed the top one has a taller shadow than the bottom one. And the top one's shadow looks diagonally cropped in the bottom right corner. The bottom ones shadow looks uncropped and it comes to a sharp point instead of a rounded edge.

get rid of the tile.track ternary. There is something funky with the layout. With two video tiles displayed the top one has a taller shadow than the bottom one. And the top one's shadow looks diagonally cropped in the bottom right corner. The bottom ones shadow looks uncropped and it comes to a sharp point instead of a rounded edge.
hudson added 1 commit 2026-08-13 20:06:01 +00:00 
- Remove the tile.track ternary from the name label class — use bg-backdrop/80
  consistently for all tiles (both video and no-video)
- Remove the !tile.track conditional from the border — apply border border-line
  to all tiles consistently
- Fixes shadow rendering inconsistency: with two tiles, the conditional border
  + ternary caused asymmetric shadow rendering (cropped/pointed shadows)

Per review feedback from @matt on PR #3 (forgejo).
hudson added 2 commits 2026-08-17 14:28:05 +00:00 
9a80d059 (Migrate to new welshman) accidentally committed
link:../welshman/packages/* pnpm overrides into pnpm-workspace.yaml,
forcing resolution to a local welshman checkout that doesn't exist in
this environment. package.json already specifies the correct upstream
range (^0.9.0-pre2), so a fresh `pnpm install` produced dangling
node_modules/@welshman/* symlinks and broke `pnpm run dev`.

Drop the overrides (keep sharp) and regenerate pnpm-lock.yaml, which
now resolves upstream @welshman/*@0.9.0-pre5.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
With exactly 2 video tiles, the layout branch flex-shrinks tiles to
exactly fill the scroll container (fractional heights, bottom tile
flush against the scroller's clip edge). In that configuration
Chromium's rounded-rect box-shadow fast path misrenders at fractional
pixel offsets: the corner shows a straight diagonal wedge instead of
a rounded crescent, and the bottom tile's bottom shadow band is
clipped entirely by the scroller's overflow. With 3+ tiles the grid
branch uses natural (non-fractional) 16:9 heights, so it doesn't hit
this.

filter: drop-shadow() renders the same offset shadow through a
different rasterization path that isn't susceptible to this, and
(as a side benefit) isn't clipped by scrollable overflow the way
box-shadow's ink overflow is.

- VideoCallContent.svelte: shadow-sm -> drop-shadow-sm on video tiles.
- base.css: add --drop-shadow/-sm/-lg tokens mirroring the --shadow-*
  scale, consumed by Tailwind's drop-shadow-* utilities.
- clay.css, navy.css: matching --drop-shadow-* overrides in both
  light and dark. flat.css needs no changes; it inherits base.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
matt added 3 commits 2026-08-17 14:29:06 +00:00
hudson added 1 commit 2026-08-17 14:35:36 +00:00 
drop-shadow-sm (previous commit) didn't fix the corner artifact in
testing, so revert to the simplest option instead of chasing which
rasterization path is actually at fault: video tiles just don't get
an offset shadow. Border stays.

Reverts the --drop-shadow-* token additions in base.css/clay.css/
navy.css from the previous commit since nothing else used them.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
matt closed this pull request 2026-09-23 16:02:47 +00:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: matt/flotilla#3
No description provided.
Delete branch "j4k-card-style-no-video-tiles"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?