Composer: wider default (620px) + drag left edge to resize/expand drawer (persists), taller flex-grow draft body, field values wrap fully so nothing truncates

58db3f691af9dea99bc276f00a8aac594570e2c2 · 2026-08-13 15:02:04 -0700 · Steve Abrams
Files touched

M public_live/index.html
Diff

commit 58db3f691af9dea99bc276f00a8aac594570e2c2
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Aug 13 15:02:04 2026 -0700

    Composer: wider default (620px) + drag left edge to resize/expand drawer (persists), taller flex-grow draft body, field values wrap fully so nothing truncates
---
 public_live/index.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/public_live/index.html b/public_live/index.html
index f7f417a..40d1bbc 100644
--- a/public_live/index.html
+++ b/public_live/index.html
@@ -89,12 +89,16 @@
   .legend{display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-size:11px}
   .legend .sw{width:11px;height:11px;border-radius:3px;background:rgba(123,192,67,.25);box-shadow:inset 3px 0 0 #7bc043}
   /* composer */
-  #scrim{position:fixed;inset:0;background:#000a;z-index:60;display:none} #drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:var(--panel);border-left:1px solid var(--line);z-index:61;transform:translateX(100%);transition:transform .2s;display:flex;flex-direction:column}
+  #scrim{position:fixed;inset:0;background:#000a;z-index:60;display:none} #drawer{position:fixed;top:0;right:0;height:100%;width:min(620px,100%);background:var(--panel);border-left:1px solid var(--line);z-index:61;transform:translateX(100%);transition:transform .2s;display:flex;flex-direction:column}
+  #drawer.resizing{transition:none}
+  #dresize{position:absolute;left:0;top:0;bottom:0;width:7px;cursor:col-resize;z-index:63} #dresize:hover{background:var(--accent)}
+  #d-fields a{word-break:break-all}
   #drawer.open{transform:none} #drawer header{position:static;background:var(--panel2)}
   .dbody{padding:15px;overflow:auto;flex:1} .dbody h2{margin:0 0 2px;font-size:18px} .dbody .sub{color:var(--dim);font-size:13px;margin-bottom:12px}
   .fieldgrid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin-bottom:12px} .fieldgrid .k{color:var(--dim)}
   .drow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:9px 0} label.lbl{color:var(--dim);font-size:12px;min-width:60px}
-  textarea{width:100%;min-height:210px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px;font:inherit;line-height:1.5;resize:vertical}
+  textarea{width:100%;min-height:300px;flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px;font:inherit;line-height:1.5;resize:vertical}
+  .dbody{display:flex;flex-direction:column}
   .subj{width:100%;margin-bottom:8px} .actions{display:flex;gap:8px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid var(--line);background:var(--panel2)} .actions .primary{background:var(--accent);color:#04121f;font-weight:700;border:0}
   .chdis{opacity:.4;pointer-events:none} .hint{color:var(--dim);font-size:12px}
 </style>
@@ -122,6 +126,7 @@
 
 <div id="scrim"></div>
 <div id="drawer">
+  <div id="dresize" title="drag to widen"></div>
   <header><strong>✍ Draft outreach</strong><span class="grow"></span><button id="dclose">✕ Close</button></header>
   <div class="dbody">
     <h2 id="d-company">—</h2><div class="sub" id="d-who">—</div>
@@ -461,6 +466,13 @@ $$('#viewseg button').forEach(b=>b.onclick=()=>{VIEW=b.dataset.v;LS.set('view',V
 $('#railtog').onclick=()=>{$('#rail').classList.toggle('hide');if(!$('#rail').classList.contains('hide'))buildRail()};
 $('#refresh').onclick=async()=>{setSync('load');$('#refresh').textContent='↻ refreshing…';try{await fetch('/api/refresh',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'});await loadMeta();$('#tab').value=GID;await loadTab()}catch(e){setSync('err')}$('#refresh').textContent='↻ Refresh'};
 $('#dclose').onclick=closeDraft;$('#scrim').onclick=closeDraft;
+(function(){const dr=$('#drawer'),h=$('#dresize');const sw=LS.get('drawerW',0);if(sw)dr.style.width=sw+'px';
+  h.addEventListener('mousedown',e=>{e.preventDefault();dr.classList.add('resizing');
+    const sx=e.clientX,sW=dr.getBoundingClientRect().width;
+    const mv=ev=>{dr.style.width=Math.min(innerWidth-40,Math.max(380,sW+(sx-ev.clientX)))+'px'};
+    const up=()=>{document.removeEventListener('mousemove',mv);document.removeEventListener('mouseup',up);dr.classList.remove('resizing');LS.set('drawerW',Math.round(dr.getBoundingClientRect().width))};
+    document.addEventListener('mousemove',mv);document.addEventListener('mouseup',up);});
+})();
 $$('#chanseg button').forEach(b=>b.onclick=()=>{if(b.classList.contains('chdis'))return;curChan=b.dataset.c;syncChan();regen()});
 $('#purpose').onchange=regen;$('#tone').onchange=regen;$('#regen').onclick=regen;$('#enhance').onclick=doEnhance;$('#act-go').onclick=doGo;
 $('#act-copy').onclick=()=>{navigator.clipboard?.writeText(($('#d-subject').value?('Subject: '+$('#d-subject').value+'\n\n'):'')+$('#d-body').value);$('#act-copy').textContent='✓ Copied';setTimeout(()=>$('#act-copy').textContent='⧉ Copy draft',1200)};
← ff8d35a Phone UX: number renders as plain text + a 📞 call icon besi · back to Rentv Sheet Enrich Refine · Left-panel Sheets selector: check 1..all sheets by name (wit 775dcab →