fix(comments): open panel on annotation creation and enlarge comment count pill

- Auto-open AnnotationCommentPanel immediately after drawing a new annotation
- Move comment count pill to bottom-right corner (was centered at bottom)
- Increase pill size: font 11px bold, padding 2px 6px, min-width 20px, drop shadow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-24 11:11:36 +01:00
parent 1070e6e9ec
commit 646674b06a
2 changed files with 9 additions and 7 deletions

View File

@@ -163,20 +163,21 @@ const containerStyle = $derived(
<div <div
style=" style="
position: absolute; position: absolute;
bottom: -14px; bottom: -10px;
left: 50%; right: -10px;
transform: translateX(-50%);
background-color: #002850; background-color: #002850;
color: white; color: white;
font-size: 10px; font-size: 11px;
font-family: sans-serif; font-family: sans-serif;
padding: 1px 5px; font-weight: 600;
padding: 2px 6px;
border-radius: 999px; border-radius: 999px;
min-width: 16px; min-width: 20px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
pointer-events: none; pointer-events: none;
line-height: 16px; line-height: 18px;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
" "
> >
{commentCounts?.[annotation.id]} {commentCounts?.[annotation.id]}

View File

@@ -217,6 +217,7 @@ async function handleAnnotationDraw(rect: { x: number; y: number; width: number;
if (res.ok) { if (res.ok) {
const created: Annotation = await res.json(); const created: Annotation = await res.json();
annotations = [...annotations, created]; annotations = [...annotations, created];
activeAnnotationId = created.id;
} }
} catch { } catch {
// ignore // ignore