tricu

commit 86e92aab6dbc854d005877095c5fcdfaa97959d4
parent eb0509a086b697d572f2a0b1444a31f1bd6b0551
Author: James Eversole <james@eversole.co>
Date:   Mon, 26 Oct 2026 19:34:51 -0500

Fix overlapping module export labels in inline cards

Diffstat:
M
ext/demo-site/style.css
 | 
1
+
M
ext/demo-site/test/import-folds.mjs
 | 
19
++++++++++++++++++-

2 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/ext/demo-site/style.css b/ext/demo-site/style.css
@@ -91,3 +91,4 @@ header nav{align-items:center;gap:12px}#theme-separator{color:var(--muted)}
 .source-editor .import-hash-full{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
 .module-card input{width:100%;box-sizing:border-box;margin:.5rem 0}
 .module-exports{display:flex;flex-wrap:wrap;gap:.4rem}
+.definition-card .module-exports button{display:block;flex:0 1 auto;min-width:0;width:auto;height:auto;min-height:32px;padding:5px 8px;font:inherit;font-size:13px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;border:1px solid #587362}
diff --git a/ext/demo-site/test/import-folds.mjs b/ext/demo-site/test/import-folds.mjs
@@ -75,5 +75,22 @@ try{
  await click('.import-hash-full');
  assert.equal(await evaluate("document.querySelector('.module-card').hidden"),false);
  assert.equal(await evaluate("document.querySelectorAll('.module-exports button').length"),2);
- console.log(result+'; trusted mouse clicks passed');
+ // Export labels must fit their buttons at both desktop and narrow widths.
+ for(const width of [1440,390]){
+  await send('Emulation.setDeviceMetricsOverride',{width,height:900,deviceScaleFactor:1,mobile:false});
+  const layout=await evaluate(`(async()=>{
+   const {renderLibraryExports}=await import('/dist/library-browser.js');
+   const list=document.querySelector('.module-exports');
+   renderLibraryExports(list,['false_', 'resultMatch', 'mapMaybe', 'iterateUntil', 'extraordinarilyLongExportName'.repeat(5)],'',()=>{});
+   await new Promise(resolve=>requestAnimationFrame(resolve));
+   const buttons=[...list.querySelectorAll('button')];
+   return buttons.every(button=>{
+    const box=button.getBoundingClientRect(),range=document.createRange();range.selectNodeContents(button);
+    const text=range.getBoundingClientRect();
+    return text.left>=box.left&&text.right<=box.right&&text.top>=box.top&&text.bottom<=box.bottom&&button.scrollWidth<=button.clientWidth;
+   })&&list.scrollWidth<=list.clientWidth;
+  })()`);
+  assert.equal(layout,true,`Export labels fit without overlap at ${width}px`);
+ }
+ console.log(result+'; trusted mouse clicks and export layout passed');
 }finally{socket?.close();browser?.kill();server?.close();await rm(dir,{recursive:true,force:true,maxRetries:10,retryDelay:100});}