Saving Progress

package.json

@@ -32,15 +32,16 @@
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.26.0",
 		"highlight.js": "^11.8.0",
+		"match-sorter": "^6.3.1",
 		"openapi-types": "^12.1.0",
 		"postcss": "^8.4.23",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"sailpoint-api-client": "^1.0.4",
 		"svelte": "^3.54.0",
-		"svelte-algolia-instantsearch": "^0.7.0",
 		"svelte-check": "^3.0.1",
 		"svelte-jsoneditor": "^0.17.3",
+		"svelte-spotlight": "^1.0.14",
 		"sveltekit-adapter-chrome-extension": "^2.0.0",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",

src/app.postcss

@@ -1,9 +1,18 @@
 /*place global styles here */
 html,
 body {
-	@apply h-[600px] w-[800px];
+	@apply !h-[600px] !w-[800px];
 }
 
 .ais-Hits-list {
 	@apply flex flex-col gap-1;
 }
+
+.sl-results-list {
+	@apply flex flex-col gap-1;
+}
+
+.jse-main,
+.jse-theme-dark {
+	@apply h-[335px];
+}

src/lib/Components/CurrentUser.svelte

@@ -4,17 +4,15 @@
 	export let tenantData: Writable<TenantData>;
 </script>
 
-<div class="p-2 card variant-soft-surface min-w-[150px]">
-	<h1 class="text-center pb-2">Current User</h1>
-	<div class="flex flex-row justify-between">
+<h1 class="text-center pb-2">Current User</h1>
+<div class="flex flex-row justify-between">
 	<p class="text-sm">Account:</p>
 	<p class="text-sm">{$tenantData.uid}</p>
-	</div>
+</div>
 
-	<div class="flex flex-col justify-between">
+<div class="flex flex-col justify-between">
 	<p class="text-sm pb-2">Roles:</p>
 	{#each $tenantData.role as role}
 		<p class="text-xs">{role}</p>
 	{/each}
-	</div>
 </div>

src/lib/Components/HostingData.svelte

@@ -4,22 +4,20 @@
 	export let hostingData: Writable<HostingData>;
 </script>
 
-<div class="p-2 card variant-soft-surface min-w-[150px]">
-	<h1 class="text-center pb-2">Hosting Data</h1>
-	<div class="flex flex-row justify-between">
+<h1 class="text-center pb-2">Hosting Data</h1>
+<div class="flex flex-row justify-between">
 	<p class="text-sm">Org:</p>
 	<p class="text-sm">{$hostingData.org}</p>
-	</div>
-	<div class="flex flex-row justify-between">
+</div>
+<div class="flex flex-row justify-between">
 	<p class="text-sm">Pod:</p>
 	<p class="text-sm">{$hostingData.pod}</p>
-	</div>
-	<div class="flex flex-row justify-between">
+</div>
+<div class="flex flex-row justify-between">
 	<p class="text-sm">Layer:</p>
 	<p class="text-sm">{$hostingData.layer}</p>
-	</div>
-	<div class="flex flex-row justify-between">
+</div>
+<div class="flex flex-row justify-between">
 	<p class="text-sm">Region:</p>
 	<p class="text-sm">{$hostingData.region}</p>
-	</div>
 </div>

src/lib/Components/Resources.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
-	import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
-
-	const links: { label: string; href: string }[] = [
+	const resourcelinks: { label: string; href: string }[] = [
 		{
-			label: '🖥 Developer Community',
+			label: '💁 Developer Community',
 			href: 'https://developer.sailpoint.com/discuss/'
 		},
-		{ label: '📎 API Documentation', href: 'https://developer.sailpoint.com/idn/api/v3' },
-		{ label: '🧘‍♂️  CLI Documentation', href: 'https://developer.sailpoint.com/idn/tools/cli' },
+		{ label: '📖 API Documentation', href: 'https://developer.sailpoint.com/idn/api/v3' },
+		{ label: '💻 CLI Documentation', href: 'https://developer.sailpoint.com/idn/tools/cli' },
 		{
 			label: '🔌 Connector Reference',
 			href: 'https://community.sailpoint.com/t5/IdentityNow-Connectors/IdentityNow-Connectors/ta-p/80019'
 		},
 		{
-			label: '🚩 Transform Guides',
+			label: '🧮 Transform Guides',
 			href: 'https://community.sailpoint.com/t5/Search/bd-p/search?searchString=%22IdentityNow+Transforms+-%22'
 		},
 		{
@@ -21,24 +19,15 @@
 			href: 'https://community.sailpoint.com'
 		},
 		{
-			label: '🔏 User Level Access Matrix',
+			label: '🔒 User Level Access Matrix',
 			href: 'https://documentation.sailpoint.com/saas/help/common/users/user_level_matrix.html'
 		}
 	];
-
-	const popupResources: PopupSettings = {
-		event: 'click',
-		target: 'popupResources',
-		placement: 'bottom',
-		closeQuery: '.listbox-item'
-	};
 </script>
 
-<button class="btn btn-sm variant-ghost-primary" use:popup={popupResources}>Resources</button>
-
-<div class="p-2 card" data-popup="popupResources">
-	<ul class="flex flex-col justify-center gap-2">
-		{#each links as link}
+<h1 class="text-center">Resources</h1>
+<ul class="flex flex-col">
+	{#each resourcelinks as link}
 		<li class="listbox-item">
 			<a
 				class="hover:underline text-center hover:text-tertiary-600"
@@ -50,5 +39,4 @@
 			</a>
 		</li>
 	{/each}
-	</ul>
-</div>
+</ul>

src/lib/Components/Search.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import {
 		InstantSearch,
 		SearchBox,
@@ -12,10 +12,6 @@
 
 	const searchClient = algoliasearch('TB01H1DFAM', '726952a7a9389c484b6c96808a3e0010');
 
-	// Available Indexes
-	// prod_DEVELOPER_SAILPOINT_COM
-	// discourse-posts
-
 	let index: string = 'prod_DEVELOPER_SAILPOINT_COM';
 
 	const popupFocusBlur: PopupSettings = {
@@ -66,7 +62,6 @@
 										</div>
 
 										<p class="text-xs opacity-70">Tags: {hit.tags.join(', ')}</p>
-										<!-- <p class="text-xs text-primary-300 opacity-70">{hit.url_without_anchor}</p> -->
 									</div>
 								</a>
 							{:else}
@@ -90,9 +85,6 @@
 											{:else}
 												<p class="text-xs opacity-70">No Tags</p>
 											{/if}
-											<!-- <p class="text-xs text-primary-300 opacity-70 truncate max-w-[550px]">
-												{hit.topic.url}
-											</p> -->
 										</div>
 									</div>
 								</a>
@@ -108,4 +100,4 @@
 			</div>
 		</InstantSearch>
 	{/key}
-</div>
+</div> -->

src/lib/Components/Spotlight/Item.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let result: any;
+	export let selected: boolean;
+</script>
+
+<a href={result.href} target="_blank">
+	<div
+		class="flex flex-col p-2 card {result.category === 'Docs'
+			? 'variant-ringed-tertiary'
+			: 'variant-ringed-success'}"
+	>
+		<div class="flex flex-row justify-between">
+			<p class="max-w-[350px] truncate">{result.title || result.section}</p>
+			<p class="text-xl opacity-70">{result.group}</p>
+		</div>
+		<p class="text-xs">
+			{#if result.tags.length > 0}
+				Tags: {result.tags.join(', ')}
+			{/if}
+		</p>
+		<p class="opacity-60 text-xs truncate">{result.href}</p>
+	</div>
+</a>

src/lib/Components/Spotlight/SpotlightSearch.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { matchSorter } from 'match-sorter';
+	import SvelteSpotlight from 'svelte-spotlight/SvelteSpotlight.svelte';
+	import algoliasearch, { type SearchClient } from 'algoliasearch';
+	import type { Hit, IndexHit } from '$lib/utilities';
+	import { onMount } from 'svelte';
+	import Item from './Item.svelte';
+
+	let isOpen: boolean = false;
+
+	let results: any = [];
+	let query: string = '';
+	let indices = ['prod_DEVELOPER_SAILPOINT_COM', 'discourse-posts'];
+
+	let preSelectedResult: Hit | undefined = undefined;
+	let selectedResult: Hit | undefined = undefined;
+	let client: SearchClient;
+
+	async function search(query: string) {
+		if (client) {
+			client.search<IndexHit>(indices.map((indexName) => ({ indexName, query }))).then((data) => {
+				// @ts-ignore
+				results = [];
+				for (const result of data.results) {
+					results = [
+						...results,
+						...result.hits.map((entry) => {
+							if (entry.hierarchy) {
+								return {
+									objectID: entry.objectID,
+									group: entry.hierarchy.lvl0,
+									section: entry.hierarchy.lvl1,
+									title: entry.hierarchy.lvl2,
+									tags: entry.tags,
+									href: entry.url,
+									category: 'Docs'
+								};
+							} else if (entry.topic) {
+								return {
+									objectID: entry.objectID,
+									group: 'Forum',
+									section: entry.category.name,
+									title: entry.topic.title,
+									tags: entry.topic.tags,
+									href: entry.topic.url,
+									category: 'Forum'
+								};
+							}
+						})
+					];
+				}
+			});
+		}
+	}
+
+	$: search(query);
+
+	onMount(() => (client = algoliasearch('TB01H1DFAM', '726952a7a9389c484b6c96808a3e0010')));
+</script>
+
+<div>
+	<button class="btn btn-sm variant-filled-surface" on:click={() => (isOpen = !isOpen)}>
+		Search
+	</button>
+
+	<SvelteSpotlight
+		{results}
+		bind:isOpen
+		bind:preSelectedResult
+		bind:selectedResult
+		bind:query
+		modalClass="w-[700px] max-h-[600px] overflow-hidden card !top-6"
+		headerClass="p-4 justify-center items-center"
+		inputClass="input bg-transparent"
+		resultIdKey="objectID"
+		resultsClass="py-2 px-2 overflow-y-scroll max-h-[400px]"
+		contentClass="max-h-[400px]"
+	>
+		<Item slot="result" let:result let:selected {selected} {result} />
+		<div slot="footer" class="flex flex-row justify-center gap-8 py-4">
+			<p class="text-tertiary-500">Official Documentation</p>
+			<p class="text-success-500">Forums</p>
+		</div>
+		<div slot="noResults" class="px-10 py-3 text-slate-500 text-sm">No results...</div>
+	</SvelteSpotlight>
+</div>

src/lib/Components/StatusPage.svelte

@@ -1,37 +1,60 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
-	let resp: Promise<Status>;
+	let summaryResp: Promise<any>;
 
 	const getStatus = async () => {
-		console.debug('Getting Status Page Details');
-		resp = await (await fetch('https://status.sailpoint.com/api/v2/status.json')).json();
-		console.debug(resp);
+		console.debug('Getting Status Summary');
+		summaryResp = (await fetch('https://status.sailpoint.com/api/v2/summary.json')).json();
+		console.debug(await summaryResp);
 	};
 
+	let interval: any;
+
 	onMount(async () => {
 		getStatus();
-		setInterval(() => getStatus(), 10000);
+		interval = setInterval(() => getStatus(), 30000);
 	});
+
+	onDestroy(() => clearInterval(interval));
 </script>
 
-<div class="p-2 card variant-soft-surface min-w-[183.53px]">
-	<h1 class="text-center pb-2">Status Page</h1>
+<h1 class="text-center">Status Page</h1>
+
+{#await summaryResp}
 	<div class="flex flex-row gap-2 justify-center">
-		{#await resp}
 		<div class="placeholder-circle w-16" />
 		<p>Checking</p>
-		{:then status}
-			{#if status?.status?.description == 'All Systems Operational'}
-				<p class="text-green-500 text-center">All Systems Operational</p>
-			{:else}
-				<div>
-					<p class="text-red-500 text-center">Ongoing Issues</p>
-					<a href="https://status.sailpoint.com" rel="noreferrer" target="_blank">
-						Click for details
+	</div>
+{:then summary}
+	<div class="flex flex-row align-center gap-2 justify-center">
+		{#if summary?.status?.indicator == 'none'}
+			<a
+				href="https://status.sailpoint.com"
+				class="text-green-500 text-center hover:underline"
+				rel="noreferrer"
+				target="_blank"
+			>
+				{summary?.status?.description}
+			</a>
+		{:else if summary?.status?.indicator == 'minor'}
+			<a
+				href="https://status.sailpoint.com"
+				class="text-yellow-500 text-center hover:underline"
+				rel="noreferrer"
+				target="_blank"
+			>
+				{summary?.status?.description}
+			</a>
+		{:else if summary?.status?.indicator == 'major'}
+			<a
+				href="https://status.sailpoint.com"
+				class="text-red-500 text-center hover:underline"
+				rel="noreferrer"
+				target="_blank"
+			>
+				{summary?.status?.description}
 			</a>
-				</div>
 		{/if}
-		{/await}
 	</div>
-</div>
+{/await}

src/lib/Components/Support.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { labelSort } from '$lib/utilities';
-
-	const links: { label: string; href: string }[] = [
+	const supportLinks: { label: string; href: string }[] = [
 		{
 			label: '🎫 Submit a ticket',
 			href: 'https://support.sailpoint.com/csm?id=sc_cat_item&sys_id=a78364e81bec151050bcc8866e4bcb5c&referrer=popular_items'
@@ -14,13 +12,13 @@
 	];
 </script>
 
-<div class="p-2 card variant-soft-surface">
-	<h1 class="text-center pb-2">Support</h1>
-	<div class="flex flex-col gap-2">
-		{#each links as link}
-			<a class="btn btn-sm variant-filled" target="_blank" rel="noreferrer" href={link.href}>
+<h1 class="text-center">Support</h1>
+<ul class="flex flex-col">
+	{#each supportLinks as link}
+		<li class="flex flex-row gap-1 hover:underline hover:text-tertiary-600">
+			<a target="_blank" rel="noreferrer" href={link.href}>
 				{link.label}
 			</a>
+		</li>
 	{/each}
-	</div>
-</div>
+</ul>

src/lib/Components/TenantData.svelte

@@ -4,24 +4,22 @@
 	export let tenantData: Writable<TenantData>;
 </script>
 
-<div class="p-2 card variant-soft-surface min-w-[150px]">
-	<h1 class="text-center pb-2">Tenant Data</h1>
-	<div class="flex flex-row flex-wrap justify-between">
+<h1 class="text-center pb-2">Tenant Data</h1>
+<div class="flex flex-row flex-wrap justify-between">
 	<p class="text-sm">Name:</p>
 	<p class="text-sm px-1">{$tenantData.org.name}</p>
-	</div>
-	<div class="flex flex-row justify-between">
+</div>
+<div class="flex flex-row justify-between">
 	<p class="text-sm">Tenant:</p>
 	<p class="text-sm">{$tenantData.org.scriptName}</p>
-	</div>
-	<div class="flex flex-row justify-between">
+</div>
+<div class="flex flex-row justify-between">
 	<p class="text-sm">Tenant Type:</p>
 	<p class="text-sm">{$tenantData.org.orgType}</p>
-	</div>
-	<div class="flex flex-col justify-between">
+</div>
+<div class="flex flex-col justify-between">
 	<p class="text-sm pb-2">Enabled Features:</p>
 	{#each $tenantData.feature as feature}
 		<p class="text-xs">{feature}</p>
 	{/each}
-	</div>
 </div>

src/lib/Components/TenantLinks.svelte

@@ -1,40 +1,26 @@
 <script lang="ts">
-	import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
-	import type { Writable } from 'svelte/store';
-
-	export let idnSession: Writable<IdnSession>;
-
-	const links: { label: string; slug: string }[] = [
-		{ label: '🔒 Grant Tenant Access', slug: '/ui/a/admin/global/grant-tenant-access' },
+	import { idnSession } from '$lib/settings';
+	const tenantLinks: { label: string; slug: string }[] = [
+		{ label: '🔑 Grant Tenant Access', slug: '/ui/a/admin/global/grant-tenant-access' },
 		{
 			label: '🏠 Dashboard',
 			slug: '/ui/admin#admin:dashboard:overview'
 		},
-		{ label: '🧔 Identity Profiles', slug: '/ui/admin#admin:identities:profiles' },
-		{ label: '🧮 Identity List', slug: '/ui/a/admin/identities/all-identities' },
-		{ label: '📁 Access Profiles', slug: '/ui/a/admin/access/access-profiles/landing' },
+		{ label: '🙂 Identity Profiles', slug: '/ui/admin#admin:identities:profiles' },
+		{ label: '📋 Identity List', slug: '/ui/a/admin/identities/all-identities' },
+		{ label: '🎭 Access Profiles', slug: '/ui/a/admin/access/access-profiles/landing' },
 		{ label: '📦 Roles', slug: '/ui/a/admin/access/roles/landing-page' },
-		{ label: '🍱 Sources', slug: '/ui/a/admin/connections/sources-list/configured-sources' },
+		{ label: '🔗  Sources', slug: '/ui/a/admin/connections/sources-list/configured-sources' },
 		{
-			label: '🪛 Virtual Appliances',
+			label: '💻 Virtual Appliances',
 			slug: '/ui/a/admin/connections/virtual-appliances/clusters-list'
-		},
-		{ label: '🔍 Search Tenant', slug: '/ui/search/search' }
+		}
 	];
-
-	const popupTenantLinks: PopupSettings = {
-		event: 'click',
-		target: 'popupTenantLinks',
-		placement: 'bottom',
-		closeQuery: '.listbox-item'
-	};
 </script>
 
-<button class="btn btn-sm variant-ghost-primary" use:popup={popupTenantLinks}>Tenant Links</button>
-
-<div class="p-2 card" data-popup="popupTenantLinks">
-	<ul class="flex flex-col gap-2">
-		{#each links as link}
+<h1 class="text-center">Tenant Links</h1>
+<ul class="flex flex-col">
+	{#each tenantLinks as link}
 		<li class="listbox-item">
 			<a
 				class="hover:underline text-center hover:text-tertiary-600"
@@ -46,5 +32,4 @@
 			</a>
 		</li>
 	{/each}
-	</ul>
-</div>
+</ul>

src/lib/Components/searchIcon.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	export let color = 'white';
-</script>
-
-<svg
-	class="absolute h-8 left-0 top-0 bottom-0 z-50 mt-1 pt-1 has:focus:hidden"
-	xmlns="http://www.w3.org/2000/svg"
-	{...$$restProps}
-	viewBox="0 0 50 50"
-	width="50px"
-	height="50px"
-	fill={color}
->
-	<path
-		d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"
-	/>
-</svg>

src/lib/utilities.ts

@@ -1 +1,5 @@
 export const labelSort = (a: any, b: any) => a.label.localeCompare(b.label);
+
+export type IndexHit = { index: string; hits: Hit[] } & Record<string, any>;
+
+export type Hit = { name: string; objectID: string };

src/routes/+layout.svelte

@@ -6,18 +6,17 @@
 	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
 
-	import { AppBar, AppShell, storeHighlightJs } from '@skeletonlabs/skeleton';
+	import { page } from '$app/stores';
+	import TenantLinks from '$lib/Components/TenantLinks.svelte';
 	import { checkSession } from '$lib/authentication';
 	import { idnSession } from '$lib/settings';
 	import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-	import { storePopup } from '@skeletonlabs/skeleton';
+	import { AppBar, AppShell, storeHighlightJs, storePopup } from '@skeletonlabs/skeleton';
 	import dayjs from 'dayjs';
 	import hljs from 'highlight.js';
 	import 'highlight.js/styles/github-dark.css';
 	import { onMount } from 'svelte';
-	import TenantLinks from '$lib/Components/TenantLinks.svelte';
-	import { page } from '$app/stores';
-	import Resources from '$lib/Components/Resources.svelte';
+	import SpotlightSearch from '$lib/Components/Spotlight/SpotlightSearch.svelte';
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 	storeHighlightJs.set(hljs);
@@ -40,19 +39,17 @@
 		<AppBar>
 			<svelte:fragment slot="lead">
 				<div class="flex flex-row gap-4">
-					<a class:text-primary-400={$page.url.pathname === '/'} href="/">Tenant</a>
-					<a class:text-primary-400={$page.url.pathname === '/api-client'} href="/api-client">
+					<a class:text-tertiary-400={$page.url.pathname === '/'} href="/">Tenant</a>
+					<a class:text-tertiary-400={$page.url.pathname === '/api-client'} href="/api-client">
 						API Client
 					</a>
-					<a class:text-primary-400={$page.url.pathname === '/session'} href="/session">Session</a>
+					<a class:text-tertiary-400={$page.url.pathname === '/session'} href="/session">Session</a>
 				</div>
 			</svelte:fragment>
-			<div class="flex flex-row justify-center gap-2">
-				<TenantLinks {idnSession} />
-				<Resources />
-			</div>
+
 			<svelte:fragment slot="trail">
 				<div class="p-1 top-0 right-0 flex flex-row gap-2">
+					<SpotlightSearch />
 					{#if minutesUntil < 0 || secondsUntil < 0}
 						<p class="text-xs text-white my-auto">
 							Strong Auth: <span class="text-red-500">Expired</span>

src/routes/+page.svelte

@@ -2,28 +2,43 @@
 	import CurrentUser from '$lib/Components/CurrentUser.svelte';
 	import HostingData from '$lib/Components/HostingData.svelte';
 	import Resources from '$lib/Components/Resources.svelte';
-	import Support from '$lib/Components/Support.svelte';
 	import StatusPage from '$lib/Components/StatusPage.svelte';
+	import Support from '$lib/Components/Support.svelte';
 	import TenantData from '$lib/Components/TenantData.svelte';
 	import TenantLinks from '$lib/Components/TenantLinks.svelte';
-	import { idnSession, hostingData, tenantData } from '$lib/settings';
-	import Search from '$lib/Components/Search.svelte';
+	import { hostingData, tenantData } from '$lib/settings';
 </script>
 
-<div class="flex flex-col h-full">
-	<Search />
-	<div class="flex flex-row h-full gap-4 p-2 grow">
-		<div class=" flex flex-col gap-4 grow">
+<div class="flex flex-col gap-2 p-2 h-full">
+	<div class="flex flex-row gap-2">
+		<div class="flex flex-col gap-2 grow">
+			<div class="p-2 card variant-soft-surface">
 				<TenantData {tenantData} />
 			</div>
-
-		<div class=" flex flex-col gap-4 grow">
-			<CurrentUser {tenantData} />
+		</div>
+		<div class="flex flex-col gap-2 grow">
+			<div class="p-2 card variant-soft-surface grow">
 				<HostingData {hostingData} />
 			</div>
-		<div class=" flex flex-col gap-4 grow">
+			<div class="p-2 card variant-soft-surface grow">
+				<CurrentUser {tenantData} />
+			</div>
+		</div>
+		<div class="grow flex flex-col gap-2">
+			<div class="p-4 card variant-soft-surface grow">
 				<StatusPage />
+			</div>
+			<div class="p-2 card variant-soft-surface grow">
 				<Support />
 			</div>
 		</div>
+	</div>
+	<div class="flex flex-row gap-2 grow">
+		<div class="p-2 card variant-soft-surface grow">
+			<TenantLinks />
+		</div>
+		<div class="p-2 card variant-soft-surface grow">
+			<Resources />
+		</div>
+	</div>
 </div>

src/routes/api-client/+page.svelte

@@ -80,7 +80,7 @@
 	let selectedAPIMethod = 'GET';
 </script>
 
-<div class="p-4 flex flex-col gap-4 h-full">
+<div class="p-2 flex flex-col gap-4 overflow-hidden overflow-y-auto">
 	<div class="flex flex-row">
 		<select
 			placeholder="Select an API Version"
@@ -138,17 +138,17 @@
 		</button>
 	</div>
 
-	<TabGroup justify="justify-center" class="grow">
+	<TabGroup justify="justify-center">
 		<Tab bind:group={tabSet} name="tab1" value={0}>Request</Tab>
 		<Tab bind:group={tabSet} name="tab2" value={1}>Response</Tab>
 	</TabGroup>
 
 	{#if tabSet === 0}
-		<div class="jse-theme-dark h-full">
+		<div class="jse-theme-dark">
 			<JSONEditor bind:content={requestContent} />
 		</div>
 	{:else if tabSet === 1}
-		<div class="jse-theme-dark h-full">
+		<div class="jse-theme-dark">
 			<JSONEditor bind:content={responseContent} />
 		</div>
 	{/if}