sharing-pane: tighten typography, prevent name overflow, add copy button#16
Merged
Merged
Conversation
…ton (#15) - Reduce font sizes ~1px across header, public-access card, permissions label, agent name, WebID, and the add-WebID input/button. - Truncate the agent name with ellipsis (and full text in title=) so long unbreakable identifiers like did:nostr:<hex> stay inside the card on narrow viewports. - Add a copy button next to each WebID; the URI is also click-to-copy. Brief checkmark confirmation, with execCommand fallback for non-secure contexts. Only on individual-agent rows.
There was a problem hiding this comment.
Pull request overview
This PR polishes the Sharing pane UI (panes/sharing-pane.js) by tightening typography, preventing long agent labels from overflowing, and adding a one-click “copy WebID” affordance to individual-agent rows (per #15).
Changes:
- Reduce font sizes/padding across header, public-access card, permissions label, agent rows, and add-WebID controls.
- Truncate long agent display names with ellipsis and add a tooltip via
title. - Add a clipboard copy action (clickable URI text + 📋 button) with a brief ✓ confirmation and an
execCommand('copy')fallback.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+187
to
+189
| header.innerHTML = '<h2 style="font-size:18px;font-weight:700;color:#1a1a1a;margin:0 0 6px;">\u{1F91D} Sharing</h2>' | ||
| + '<div style="font-size:12px;color:#999;word-break:break-all;">' + resourceUrl + '</div>' | ||
| if (statusMsg) header.innerHTML += '<div style="font-size:11px;color:#7c3aed;margin-top:6px;">' + statusMsg + '</div>' |
Comment on lines
257
to
+265
| var uri = document.createElement('div') | ||
| uri.style.cssText = 'font-size:11px;color:#bbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' | ||
| uri.style.cssText = 'font-size:10px;color:#bbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;cursor:pointer;' | ||
| uri.textContent = auth.agent | ||
| uri.title = auth.agent | ||
| info.appendChild(uri) | ||
| uri.title = 'Click to copy: ' + auth.agent | ||
|
|
||
| var copyBtn = document.createElement('button') | ||
| copyBtn.style.cssText = 'background:none;border:none;cursor:pointer;color:#bbb;font-size:11px;padding:2px 4px;flex-shrink:0;line-height:1;' | ||
| copyBtn.textContent = '\u{1F4CB}' | ||
| copyBtn.title = 'Copy WebID' |
Comment on lines
+271
to
+280
| setTimeout(function() { copyBtn.textContent = '\u{1F4CB}'; copyBtn.style.color = '#bbb' }, 1200) | ||
| }).catch(function() { | ||
| var ta = document.createElement('textarea') | ||
| ta.value = auth.agent | ||
| ta.style.position = 'fixed'; ta.style.opacity = '0' | ||
| document.body.appendChild(ta); ta.select() | ||
| try { document.execCommand('copy') } catch (e) {} | ||
| document.body.removeChild(ta) | ||
| copyBtn.textContent = '✓'; copyBtn.style.color = '#7c3aed' | ||
| setTimeout(function() { copyBtn.textContent = '\u{1F4CB}'; copyBtn.style.color = '#bbb' }, 1200) |
Comment on lines
+187
to
+189
| header.innerHTML = '<h2 style="font-size:18px;font-weight:700;color:#1a1a1a;margin:0 0 6px;">\u{1F91D} Sharing</h2>' | ||
| + '<div style="font-size:12px;color:#999;word-break:break-all;">' + resourceUrl + '</div>' | ||
| if (statusMsg) header.innerHTML += '<div style="font-size:11px;color:#7c3aed;margin-top:6px;">' + statusMsg + '</div>' |
Contributor
Author
|
Thanks @copilot — declining all four for this PR; goal here is to keep the pane small.
Happy to revisit any of these if it comes up in real use. |
Copilot stopped work on behalf of
melvincarvalho due to an error
May 5, 2026 20:36
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #15.
Summary
overflow:hidden;text-overflow:ellipsis;white-space:nowrapand put the full label intitle=. Fixes long unbreakable identifiers (e.g.did:nostr:<64-hex>) from blowing past the card boundary on narrow viewports.document.execCommand('copy')for non-secure contexts. Only on individual-agent rows (skipped for Everyone/Authenticated class rows since the class URI isn't useful to copy).All three changes are scoped to
panes/sharing-pane.js— no other files touched.Test plan
/public/(or any container with an.acl) → Sharing tab. Confirm headings, agent names, and form controls feel a touch tighter than before.did:nostr:<hex>WebID). Confirm the agent name truncates with…and the card stays inside its parent on a 414px-wide viewport.