diff --git a/static/css/layout.css b/static/css/layout.css
index 228e374..39944e1 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -333,11 +333,37 @@
display: flex;
flex-direction: column;
gap: 0.45rem;
+ min-width: 0;
}
.links-block {
display: grid;
gap: 0.2rem;
+ min-width: 0;
+}
+
+.share-link-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 0.35rem;
+ align-items: center;
+}
+
+.share-admin-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ white-space: nowrap;
+}
+
+#share-link {
+ min-width: 0;
+}
+
+#room-status {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ word-break: break-word;
}
.admin-controls {
diff --git a/static/js/room.js b/static/js/room.js
index 9af8f1b..348f552 100644
--- a/static/js/room.js
+++ b/static/js/room.js
@@ -16,8 +16,8 @@ const participantList = document.getElementById('participant-list');
const adminControls = document.getElementById('admin-controls');
const revealBtn = document.getElementById('reveal-btn');
const resetBtn = document.getElementById('reset-btn');
-const participantLinkInput = document.getElementById('participant-link');
-const adminLinkInput = document.getElementById('admin-link');
+const shareLinkInput = document.getElementById('share-link');
+const shareAdminToggle = document.getElementById('share-admin-toggle');
const roomStatus = document.getElementById('room-status');
const joinPanel = document.getElementById('join-panel');
@@ -30,6 +30,7 @@ const joinError = document.getElementById('join-error');
let participantID = params.get('participantId') || '';
let adminToken = params.get('adminToken') || '';
let eventSource = null;
+let latestLinks = { participantLink: '', adminLink: '' };
const savedUsername = localStorage.getItem(USERNAME_KEY) || '';
joinUsernameInput.value = savedUsername;
@@ -247,8 +248,8 @@ function renderState(state) {
renderCards(state.cards, state.participants, state.revealed);
renderSummary(state);
- participantLinkInput.value = `${window.location.origin}${state.links.participantLink}`;
- adminLinkInput.value = state.links.adminLink ? `${window.location.origin}${state.links.adminLink}` : '';
+ latestLinks = state.links || { participantLink: '', adminLink: '' };
+ updateShareLink();
if (state.viewerIsAdmin) {
adminControls.classList.remove('hidden');
@@ -261,6 +262,12 @@ function renderState(state) {
roomStatus.textContent = `Votes: ${votedCount}/${totalParticipants}`;
}
+function updateShareLink() {
+ const useAdmin = shareAdminToggle.checked && latestLinks.adminLink;
+ const raw = useAdmin ? latestLinks.adminLink : latestLinks.participantLink;
+ shareLinkInput.value = raw ? `${window.location.origin}${raw}` : '';
+}
+
function connectSSE() {
if (eventSource) {
eventSource.close();
@@ -326,6 +333,7 @@ async function adminAction(action) {
revealBtn.addEventListener('click', () => adminAction('reveal'));
resetBtn.addEventListener('click', () => adminAction('reset'));
+shareAdminToggle.addEventListener('change', updateShareLink);
joinForm.addEventListener('submit', async (event) => {
event.preventDefault();