From 0889eb4e01e3dd8f974d5fd74e28ab433f572466 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Sat, 13 Jun 2026 09:35:21 +0900
Subject: [PATCH] Doc compose: accent prefix labels for each field + Cc btn up
 2px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Each input now has a sibling .email-field-prefix span (To / Cc /
  Bcc / Subject) absolute-positioned at the left edge in the
  accent color. Inputs get padding-left:44px (64px for Subject)
  so typed text doesn't slide under the prefix.
- Placeholders shrink back to just the example so only the
  prefix gets the accent color, not the example text.
- Cc toggle moved another 2px up (calc(50% + 4px) → calc(50% + 2px)).
---
 static/js/document.js | 11 +++++++----
 static/style.css      | 21 ++++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/static/js/document.js b/static/js/document.js
index e54d49213..2919f17ad 100644
--- a/static/js/document.js
+++ b/static/js/document.js
@@ -3851,21 +3851,24 @@ import * as Modals from './modalManager.js';
         </button>
         <div id="doc-email-fields" class="doc-email-fields">
           <div class="email-field" style="position:relative">
-            <input type="text" id="doc-email-to" placeholder="To  recipient@example.com" autocomplete="off" />
+            <span class="email-field-prefix">To</span>
+            <input type="text" id="doc-email-to" placeholder="recipient@example.com" autocomplete="off" />
             <div id="doc-email-to-suggestions" class="email-autocomplete" style="display:none"></div>
             <button type="button" id="doc-email-show-cc" class="email-cc-toggle" title="Show Cc/Bcc">Cc</button>
           </div>
           <div class="email-field" id="doc-email-cc-row" style="display:none;position:relative">
-            <input type="text" id="doc-email-cc" placeholder="Cc  cc@example.com, example2" autocomplete="off" />
+            <span class="email-field-prefix">Cc</span>
+            <input type="text" id="doc-email-cc" placeholder="cc@example.com, example2" autocomplete="off" />
             <div id="doc-email-cc-suggestions" class="email-autocomplete" style="display:none"></div>
             <button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
           </div>
           <div class="email-field" id="doc-email-bcc-row" style="display:none;position:relative">
-            <input type="text" id="doc-email-bcc" placeholder="Bcc  bcc@example.com" autocomplete="off" />
+            <span class="email-field-prefix">Bcc</span>
+            <input type="text" id="doc-email-bcc" placeholder="bcc@example.com" autocomplete="off" />
             <div id="doc-email-bcc-suggestions" class="email-autocomplete" style="display:none"></div>
             <button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
           </div>
-          <div class="email-field"><input type="text" id="doc-email-subject" placeholder="Subject" /></div>
+          <div class="email-field" style="position:relative"><span class="email-field-prefix">Subject</span><input type="text" id="doc-email-subject" placeholder="" /></div>
           <div id="doc-email-attachments" class="email-attachments" style="display:none"></div>
           <div id="doc-email-compose-atts" class="email-compose-atts" style="display:none"></div>
         </div>
diff --git a/static/style.css b/static/style.css
index 357d1aa4e..4ce801e54 100644
--- a/static/style.css
+++ b/static/style.css
@@ -30107,15 +30107,26 @@ body.doc-find-active mark.doc-find-mark.current {
    from the To input. Anchored to the input's vertical center + 4px
    nudge so the label sits where the user expects it. */
 .email-field .email-cc-toggle {
-  position: absolute; right: 6px; top: calc(50% + 4px); transform: translateY(-50%);
+  position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%);
   z-index: 2;
 }
-/* Tint the placeholder hint (To / Cc / Bcc + example) accent so
-   the field names read as a label even without the <label> tag. */
-.email-field input::placeholder {
+/* Accent-tinted prefix label (To / Cc / Bcc / Subject) sitting at
+   the left edge of each input. Replaces both the old <label> tag
+   and the all-placeholder accent. */
+.email-field .email-field-prefix {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 11px;
+  font-weight: 600;
   color: var(--accent-primary, var(--red));
-  opacity: 0.65;
+  pointer-events: none;
+  z-index: 1;
+  line-height: 1;
 }
+.email-field input { padding-left: 44px; }
+.email-field #doc-email-subject { padding-left: 64px; }
 /* X close button inside Cc / Bcc fields. */
 .email-field .email-cc-close {
   position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%);