From f42cee8512543df310579a015646064837afc853 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Thu, 11 Jun 2026 09:18:34 +0900
Subject: [PATCH] Email accounts strip: bigger default-dot (10px) + 4px more
 chip padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

8px ring read as a sliver next to the chip label. Bump to a 10x10 SVG
with stroke-width:3 for the hollow ring so it presents like the
sidebar notif dot at this size. Chip padding-right bumped 20→24 so
the larger glyph isn't crushed against the text.
---
 static/js/emailLibrary.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/static/js/emailLibrary.js b/static/js/emailLibrary.js
index de7b791ca..0d158b9f4 100644
--- a/static/js/emailLibrary.js
+++ b/static/js/emailLibrary.js
@@ -1333,15 +1333,18 @@ function _renderAccountsStrip() {
   // 'Default' rather than 'All (default)' — this view shows the account
   // marked is_default; cross-account aggregation is a separate feature.
   let html = `<button class="memory-toolbar-btn gallery-chip${allActive}" data-acc-id="">Default</button>`;
-  const _dotFilled = '<svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="6"/></svg>';
-  const _dotHollow = '<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="6"/></svg>';
+  // Match the 6px sidebar notification dot's visual presence — render as
+  // a 10x10 SVG so the rendered glyph reads as a 'dot' next to the chip
+  // label rather than the previous thin 8px ring.
+  const _dotFilled = '<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>';
+  const _dotHollow = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="9"/></svg>';
   for (const a of state._libAccounts) {
     const active = state._libAccountId === a.id ? ' active' : '';
     const label = a.name || a.from_address || a.imap_user || 'account';
     const dot = a.is_default ? _dotFilled : _dotHollow;
     const dotTitle = a.is_default ? 'Default account' : 'Set as default';
     html += `<span class="gallery-chip-wrap" style="position:relative;display:inline-flex;align-items:center;">`
-         + `<button class="memory-toolbar-btn gallery-chip${active}" data-acc-id="${esc(a.id)}" title="${esc(a.from_address || a.imap_user || '')}${a.is_default ? ' (default)' : ''}" style="padding-right:20px;">${esc(label)}</button>`
+         + `<button class="memory-toolbar-btn gallery-chip${active}" data-acc-id="${esc(a.id)}" title="${esc(a.from_address || a.imap_user || '')}${a.is_default ? ' (default)' : ''}" style="padding-right:24px;">${esc(label)}</button>`
          + `<button class="email-lib-default-dot${a.is_default ? ' is-default' : ''}" data-set-default="${esc(a.id)}" title="${dotTitle}" aria-label="${dotTitle}" style="position:absolute;right:4px;top:calc(50% - 2px);transform:translateY(-50%);background:none;border:0;padding:2px;cursor:pointer;color:${a.is_default ? 'var(--accent, var(--red))' : 'inherit'};opacity:${a.is_default ? '1' : '0.45'};display:inline-flex;align-items:center;line-height:0;">${dot}</button>`
          + `</span>`;
   }