From 8a2ad2226d810e28a3d1951541cfa497230a1ba8 Mon Sep 17 00:00:00 2001 From: fkwp Date: Thu, 17 Sep 2026 20:08:53 +0200 Subject: [PATCH] Move the remove cross to the tile's corner - On the top-right corner, where Zoom and Teams both put it - Centred, it sat inside the target for choosing the tile: the one destructive action lived exactly where the ordinary one does, which is what was confusing people - Red under the pointer. That alone would not have fixed it: colour says what a control does, it does not stop the press landing on the wrong one - The one in force still offers no removal (FR-025). The corner would allow it, since cross and tick no longer compete for the middle, but that stays product's call Co-Authored-By: Claude Opus 5 (1M context) --- .../MediaMuteAndSwitchButton.module.css | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css index f46679f66..8a11a341c 100644 --- a/src/components/MediaMuteAndSwitchButton.module.css +++ b/src/components/MediaMuteAndSwitchButton.module.css @@ -338,20 +338,34 @@ Please see LICENSE in the repository root for full details. */ .effectRemove { position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - translate: -50% -50%; + /* On the tile's top-right corner, where Zoom and Teams both put it, and + clear of the middle: centred, it sat inside the target for choosing the + tile, so the one destructive action lived where the ordinary one does. */ + inset-block-start: 0; + inset-inline-end: 0; + translate: 30% -30%; display: none; align-items: center; justify-content: center; - inline-size: 24px; - block-size: 24px; + inline-size: 22px; + block-size: 22px; border-radius: 50%; background: var(--cpd-color-bg-canvas-default); color: var(--cpd-color-icon-primary); + box-shadow: 0 0 0 var(--cpd-border-width-1) + var(--cpd-color-border-interactive-secondary); cursor: pointer; } +/* Red under the pointer: the corner separates it from choosing the tile, and + this says what it will do once you are there. */ +.effectRemove:hover { + background: var(--cpd-color-bg-critical-subtle); + color: var(--cpd-color-icon-critical-primary); + box-shadow: 0 0 0 var(--cpd-border-width-1) + var(--cpd-color-border-critical-primary); +} + .effectGrid .effectTileWrap:hover .effectRemove, .effectGrid .effectTileWrap:focus-within .effectRemove { display: flex;