fix(integrationer): en adresse kan læses helt, også på en telefon

Feed'et, mailadressen, krogen, curl-eksemplet, CalDAV-serveren og de to
redirect-URI'er lå i skrivebeskyttede <input>. Et input ombryder ikke — det
ruller indeni — så på en telefon stoppede adressen midt i kassen, og resten
fandtes kun ved at trække inde i feltet. Der var ikke engang et rullepanel at
se: feltet så ud som om det indeholdt det, der stod i det. Målt ved 390 px var
kassen 306 px og krogens adresse 634.

De er nu <output>. Det er stadig et felt, en <label for> kan pege på, så
navnene på felterne bliver ved med at høre sammen med dem, og det er tekst,
der ombryder. `user-select: all` beholder det ene, inputtet gjorde bedre: ét
tryk tager hele adressen.

Det samme gjaldt invitationslinket i en delt note, som vises netop når der
ikke er nogen post at sende det med — altså når det er det eneste, der findes.

Prøven nævner felterne ved navn frem for at forespørge på en klasse. Den, der
måler `.field output` og finder nul, består også den dag felterne er lavet om
til noget andet klippet.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/src/routes/indstillinger/+layout.svelte

@@ -151,7 +151,8 @@
 
 	.settings :global(.field input),
 	.settings :global(.field select),
-	.settings :global(.field textarea) {
+	.settings :global(.field textarea),
+	.settings :global(.field output) {
 		width: 100%;
 		padding: var(--s2) var(--s3);
 		background: var(--surface-sunken);
@@ -168,6 +169,22 @@
 		border-color: var(--accent);
 	}
 
+	/* Adresserne — feed'et, krogen, CalDAV-serveren — vises i et <output> og ikke i
+	   et skrivebeskyttet <input>. Et input kan ikke ombryde: det ruller indeni, så
+	   på en telefon står halvdelen af adressen uden for kassen, og der er ingen måde
+	   at se resten på. <output> er stadig et felt, en <label for> kan pege på, og det
+	   er tekst, der ombryder.
+
+	   `user-select: all` er der, fordi det var det eneste, inputtet gjorde bedre: ét
+	   tryk tog hele adressen. Uden den skulle man trække hen over fire linjer. */
+	.settings :global(.field output) {
+		display: block;
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+		user-select: all;
+		line-height: 1.5;
+	}
+
 	/* The field error sits under its own input rather than in a summary at the top:
 	   the server answers with a map of field to message, and putting each one where
 	   it belongs is the whole point of that shape. */

web/src/routes/indstillinger/integrationer/+page.svelte

@@ -460,7 +460,7 @@
 						     it has to match Google's copy exactly, and the error Google gives
 						     when it does not names neither value. Google afviser desuden
 						     private IP-adresser over http — det skal være https. -->
-						<input id="redirect" readonly value={client.redirect_uri} />
+						<output id="redirect">{client.redirect_uri}</output>
 					</div>
 
 					<form onsubmit={saveClient}>
@@ -546,7 +546,7 @@
 		{#if app.user?.is_admin}
 			<div class="field">
 				<label for="calendar-redirect">{t('int.redirectURI')}</label>
-				<input id="calendar-redirect" class="mono" readonly value={calendar.redirect_uri} />
+				<output id="calendar-redirect" class="mono">{calendar.redirect_uri}</output>
 				<p class="hint">{t('int.calendarSameClient')}</p>
 			</div>
 		{:else if !calendar.has_client}
@@ -653,7 +653,7 @@
 
 	<div class="field">
 		<label for="feed">{t('int.address')}</label>
-		<input id="feed" class="mono" value={feedURL} readonly />
+		<output id="feed" class="mono">{feedURL}</output>
 	</div>
 
 	<div class="row">
@@ -681,7 +681,7 @@
 
 	<div class="field">
 		<label for="mail">{t('int.yourAddress')}</label>
-		<input id="mail" class="mono" value={mailAddress} readonly />
+		<output id="mail" class="mono">{mailAddress}</output>
 	</div>
 
 	<div class="row">
@@ -700,7 +700,7 @@
 
 	<div class="field">
 		<label for="hook">{t('int.yourHook')}</label>
-		<input id="hook" class="mono" value={hookURL} readonly />
+		<output id="hook" class="mono">{hookURL}</output>
 		<p class="hint">
 			{t('int.hookHow')}
 		</p>
@@ -711,8 +711,8 @@
 	     kroppen bare er den linje, opgaven skal hedde. -->
 	<div class="field">
 		<label for="hookcurl">{t('int.hookExample')}</label>
-		<textarea id="hookcurl" class="mono" rows="3" readonly
-			>{`curl -X POST ${hookURL} \\\n  -H "Content-Type: text/plain" \\\n  -d "Ring til Anders i morgen p1 #Firma"`}</textarea
+		<output id="hookcurl" class="mono"
+			>{`curl -X POST ${hookURL} \\\n  -H "Content-Type: text/plain" \\\n  -d "Ring til Anders i morgen p1 #Firma"`}</output
 		>
 	</div>
 
@@ -732,7 +732,7 @@
 
 	<div class="field">
 		<label for="caldav">{t('int.server')}</label>
-		<input id="caldav" class="mono" value={`${location.origin}/caldav/`} readonly />
+		<output id="caldav" class="mono">{`${location.origin}/caldav/`}</output>
 		<p class="hint">
 			{t('int.caldavAuth')}
 		</p>
@@ -817,7 +817,7 @@
 		color: var(--ink-muted);
 	}
 
-	.setup input[readonly] {
+	.setup output {
 		font-family: var(--font-mono);
 		font-size: var(--text-xs);
 		color: var(--ink-muted);

web/src/routes/noter/+page.svelte

@@ -1279,7 +1279,7 @@
 											     lovet i en besked, der ikke kom af sted. -->
 											<p class="invitelink">
 												{t('notes.inviteNoMail')}
-												<input readonly value={shareInviteLink} onclick={(e) => e.target.select()} />
+												<output>{shareInviteLink}</output>
 											</p>
 										{/if}
 									</section>
@@ -2216,11 +2216,23 @@
 		line-height: 1.5;
 	}
 
-	.invitelink input {
+	/* <output> og ikke et skrivebeskyttet <input>: et input kan ikke ombryde, så et
+	   invitationslink stod halvt uden for kassen på en telefon, og resten kunne kun
+	   nås ved at rulle inde i feltet. `user-select: all` beholder det, inputtet var
+	   god til — ét tryk tager hele linket. */
+	.invitelink output {
+		display: block;
 		width: 100%;
 		margin-top: 2px;
-		font-size: var(--text-xs);
 		padding: 2px var(--s1);
+		background: var(--surface-sunken);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-sm);
+		font-family: var(--font-mono);
+		font-size: var(--text-xs);
+		color: var(--ink);
+		overflow-wrap: anywhere;
+		user-select: all;
 	}
 
 	.addshare {