more ui fixes

src/App.svelte

@@ -12,7 +12,8 @@
 		handleLegacyState,
 		removeLoader,
 		generatePkce,
-		sendPlausibleEvent
+		sendPlausibleEvent,
+		focusAuthzResponseSection
 	} from '$lib/utils.js';
 	import { makeAuthzUrl, makeInviteUrl } from '$lib/request.js';
 	import { parseToken, validateToken } from '@hellocoop/helper-browser';
@@ -29,7 +30,7 @@
 	let customScope = $state('');
 	let isHelloMode = $state(true); // this only matters if hello dev flag is set
 	let mounted = $state(false);
-	let showErrorNotification = $state(false);
+	let showErrorNotification = $state(true);
 	let authzResponse = $state({
 		url: null,
 		token: null,
@@ -89,7 +90,7 @@
 		if (params.has('id_token')) await processIdToken(params);
 		else if (params.has('code')) await processCode(params);
 		else if (params.has('error')) processError(params);
-		else if (params.has('beta')) selectedAuthzServer = BETA_SERVER;
+		else if (params.has('beta')) selectBetaServer();
 
 		cleanUrl();
 		removeLoader();
@@ -229,6 +230,8 @@
 		} catch (err) {
 			console.error(err);
 			showErrorNotification = true;
+		} finally {
+			focusAuthzResponseSection();
 		}
 	}
 
@@ -251,13 +254,20 @@
 		} catch (err) {
 			console.error(err);
 			showErrorNotification = true;
+		} finally {
+			focusAuthzResponseSection();
 		}
 	}
 
 	function processError(params) {
 		authzResponse.url = params.toString();
 		showErrorNotification = true;
 	}
+
+	function selectBetaServer() {
+		selectedAuthzServer = BETA_SERVER;
+		dropdowns.server = true; // expand to show selected beta server
+	}
 </script>
 
 {#if mounted}

src/lib/components/AuthorizationResponse.svelte

@@ -6,7 +6,8 @@
 </script>
 
 <section
-	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6"
+	id="authz-response-container"
+	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6 scroll-mt-5"
 >
 	<span
 		class="absolute -mt-8 bg-white dark:bg-[#151515] px-2 -mx-2 text-charcoal/70 dark:text-[#d4d4d4]/70 uppercase text-xs font-mono"

src/lib/components/Notification.svelte

@@ -5,10 +5,13 @@
 </script>
 
 <div
-	class="bg-red-500 px-2.5 h-9 text-center text-white flex items-center justify-center"
+	class="bg-red-500 px-2.5 h-11 md:h-9 text-center text-white flex items-center justify-center"
 	out:slide
 >
-	<span class="text-sm">Authorization Error - Please see Response section below</span>
+	<span class="text-sm"
+		>Authorization Error <span class="hidden md:inline">-</span><br class="md:hidden" /> Please see Response
+		section below</span
+	>
 	<button class="absolute right-4" onclick={close} aria-label="close">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

src/lib/components/Request/ProtocolParams.svelte

@@ -60,7 +60,7 @@
 					</div>
 					{#if Array.isArray(param.POSSIBLE_VALUE)}
 						<ul
-							class="xl:h-8 p-1 space-y-0.5 xl:space-y-0 xl:space-x-1 w-full ring-1 ring-charcoal dark:ring-gray-800 flex flex-col xl:flex-row items-center rounded-sm"
+							class="xl:h-8 p-1 gap-1 w-full ring-1 ring-charcoal dark:ring-gray-800 flex flex-col xl:flex-row items-center rounded-sm"
 							class:opacity-50={!selected}
 						>
 							{#each param.POSSIBLE_VALUE as value}

src/lib/components/Request/ScopeParam.svelte

@@ -14,7 +14,7 @@
 	} = $props();
 
 	// scope input selected in protocol params
-	const isOverwritten = $derived(selectedProtocolParams.includes('scope'));
+	const isOverridden = $derived(selectedProtocolParams.includes('scope'));
 </script>
 
 <section class="break-inside-avoid-column">
@@ -27,9 +27,9 @@
 		<Tooltip content="Scope Parameter Docs" , href="https://www.hello.dev/docs/scopes/" />
 	</button>
 
-	{#if isOverwritten}
+	{#if isOverridden}
 		<p class="opacity-70 text-xs italic mt-1">
-			Overwritten with 'scope' in Protocol Parameters section
+			Overridden with 'scope' in Protocol Parameters section
 		</p>
 	{/if}
 
@@ -45,8 +45,8 @@
 		<div
 			class="flex mt-2 space-x-2"
 			transition:slide={{ duration: 150 }}
-			class:opacity-50={isOverwritten}
-			class:pointer-events-none={isOverwritten}
+			class:opacity-50={isOverridden}
+			class:pointer-events-none={isOverridden}
 		>
 			<ul class="space-y-2 w-40 md:w-48">
 				{#each ALL_STANDARD_SCOEPS as stdScope}

src/lib/utils.js

@@ -78,12 +78,18 @@ async function sendPlausibleEvent() {
 	}
 }
 
+function focusAuthzResponseSection() {
+	const ele = document.querySelector('#authz-response-container');
+	if (ele) ele.scrollIntoView();
+}
+
 export {
 	cleanUrl,
 	removeLoader,
 	lineBreakUrl,
 	reset,
 	handleLegacyState,
 	generatePkce,
-	sendPlausibleEvent
+	sendPlausibleEvent,
+	focusAuthzResponseSection
 };