feat: Show collection slug when shareable

[SuaYoo]

Partially addresses #3312

Changes

• Displays updated collection slug near name
• Updates collection header layout to match header spacing on other pages
• Fixes editable text field pencil icon hidden when name is too long
• Fixes editable text field placeholder width

Manual testing

1. Log in as crawler
2. Go to unlisted collection detail page. Verify slug is displayed under name
3. Edit name. Verify slug updates as name is updated

Screenshots

Page	Image/video
Collection (private)
Collection (unlisted)
Collection (editing name)
Collection (small screen)

[emma-sg]

Good first step, but there's a couple issues I encountered:

• When editing the collection name, the polling on the frontend overwrites the collection url preview whenever it occurs:

  Collections.Default.Org.-.Helium.2026-05-27.18-24-01.mp4

• The layout of the title/collection sharing status/caption feels a little messy - how would you feel about maybe moving the visibility badge above the title?

• The visibility icon was previously clickable to edit the visibility, the badge no longer is, I feel like it still should be

• The "Open in New Tab" icon visually appears much larger than the "Copy Shareable Link" icon (even though I know they both occupy the same 14px square): visually, I think it needs to be about size-2.5 to match:

  

[SuaYoo]

* The layout of the title/collection sharing status/caption feels a little messy - how would you feel about maybe moving the visibility badge above the title?

That's fair, I think the layout makes more sense when the thumbnail is present (wip #3350 ) I set up a feature branch so that this change isn't merged into main without the other layout updates https://github.com/webrecorder/browsertrix/tree/frontend-collection-editing-ux-updates

* The visibility icon was previously clickable to edit the visibility, the badge no longer is, I feel like it still should be

Similarly, I think this could be addressed with the general header layout updates. I'd avoid making badges clickable.

* The "Open in New Tab" icon visually appears much larger than the "Copy Shareable Link" icon

Fixed, good call!

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	sinon@​12.0.1
	glob@​8.1.0
	postinstall-postinstall@​2.1.0
	msw-storybook-addon@​2.0.6
	replaywebpage@​2.4.3
	update-dotenv@​1.1.1
	lit-shared-state@​0.2.1
	url-pattern@​1.0.3
	regex-colorizer@​1.0.2
	tlds@​1.259.0
	ink-mde@​0.33.0
	postcss-lit@​1.1.1
	husky@​8.0.3
	storybook@​8.6.12
	parse-ms@​4.0.0
	rollup-plugin-typescript-paths@​1.4.0
	micromark-extension-gfm-strikethrough@​2.0.0
	micromark@​4.0.0
	nanoid@​5.1.5
	iso-639-1@​2.1.15
	webpack-merge@​5.8.0
	fork-ts-checker-webpack-plugin@​8.0.0 ⏵ 6.5.3			+1
	lodash@​4.17.21
	pretty-ms@​7.0.1
	patch-package@​8.0.0
	remark-gfm@​4.0.1
	thread-loader@​4.0.4
	tabbable@​6.2.0
	yaml@​2.2.1
	ts-lit-plugin@​2.0.1
	highlight.js@​11.8.0
	slugify@​1.6.6
	immutable@​4.3.0
See 25 more rows in the dashboard

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm replaywebpage is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: frontend/package.json → npm/replaywebpage@2.4.3 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/replaywebpage@2.4.3. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[emma-sg]

Nice, looking good! Thanks for bearing with me on the details I've been bugging you about 😅

[tw4l]

Nice work!