drawer nits + logo in top menu

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -95,9 +95,21 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
-<div class="flex divide-y flex-col space-y-2 h-screen bg-white p-6 w-full">
-	<div class="flex justify-between w-full ">
-		<div class="flex flex-row justify-center items-center w-full mr-4">
+<div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
+	<div class="flex flex-row justify-between w-full ">
+		<Button
+			variant="border"
+			size="lg"
+			color="dark"
+			btnClasses="!p-0 !w-8 !h-8"
+			on:click={() => {
+				dispatch('close')
+			}}
+		>
+			<Icon data={faClose} />
+		</Button>
+
+		<div class="flex flex-row justify-center items-center">
 			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2 ">
 				<Icon data={faPlay} scale={1} class="text-blue-500" />
 			</div>
@@ -110,27 +122,16 @@
 						? `up to step ${$selectedId.split('-').join(',')}`
 						: ' whole flow'}
 				</div>
-				<Button
-					btnClasses="ml-2"
-					size="sm"
-					variant="border"
-					on:click={() => {
-						capturePayload.openDrawer()
-					}}>Fill test args from payload</Button
-				>
 			</h3>
 		</div>
 		<Button
+			btnClasses="ml-2"
+			size="sm"
 			variant="border"
-			size="lg"
-			color="dark"
-			btnClasses="!p-0 !w-8 !h-8"
 			on:click={() => {
-				dispatch('close')
-			}}
+				capturePayload.openDrawer()
+			}}>Fill test args from payload</Button
 		>
-			<Icon data={faClose} />
-		</Button>
 	</div>
 	<div class="grow pb-8 max-h-1/2 overflow-auto">
 		<SchemaForm

frontend/src/lib/components/ItemPicker.svelte

@@ -66,7 +66,7 @@
 									<IconedResourceType silent={true} name={obj['app']} />
 									<span class="mr-2" />
 								{/if}
-								<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-all"
+								<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-words"
 									>{obj['path'] ?? ''}</span
 								>
 							</p>

frontend/src/lib/components/LogViewer.svelte

@@ -18,8 +18,9 @@
 
 <div class="relative w-full h-full">
 	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
-		<pre
-			class="whitespace-pre-wrap break-all bg-gray-50 text-xs w-full p-2">{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre>
+		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
+			>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+		>
 	</div>
 	<div class="absolute top-0 right-0 mr-2 text-gray-500 text-sm bg-gray-50/20">
 		Auto scroll

frontend/src/lib/components/ModulePreview.svelte

@@ -84,7 +84,7 @@
 			</Pane>
 			<Pane size={50} minSize={10} class="text-sm text-gray-600">
 				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
-					<pre class="overflow-x-auto break-all relative h-full px-2">
+					<pre class="overflow-x-auto break-words relative h-full px-2">
 						<DisplayResult result={testJob.result} />
 					</pre>
 				{:else}

frontend/src/lib/components/PageHeader.svelte

@@ -6,7 +6,7 @@
 	export let primary: boolean = true
 </script>
 
-<div class="flex flex-col sm:flex-row justify-between mt-4 mb-2 min-h-[48px]">
+<div class="flex flex-row flex-wrap justify-between mt-4 mb-2 min-h-[48px]">
 	{#if primary}
 		<span class="flex items-center space-x-2">
 			<h1 class="mr-0.5">{title}</h1>

frontend/src/lib/components/ResourceEditor.svelte

@@ -125,7 +125,7 @@
 		<div>
 			<!-- content -->
 			{#if step === 1}
-				<div class="flex flex-col gap-3	px-6 py-3 bg-gray-50 text-gray-700">
+				<div class="flex flex-col gap-3 py-3  text-gray-700">
 					<div>
 						<span class="text-red-600 text-2xs grow">{error ?? ''}</span>
 						<span class="mb-1 font-semibold text-gray-700">Path</span>

frontend/src/lib/components/RunChart.svelte

@@ -80,7 +80,10 @@
 		responsive: true,
 		maintainAspectRatio: false,
 		plugins: {
-			zoom: zoomOptions
+			zoom: zoomOptions,
+			legend: {
+				display: false
+			}
 		},
 		scales: {
 			x: {

frontend/src/lib/components/ScriptEditor.svelte

@@ -171,7 +171,7 @@
 					</Tooltip></div
 				>
 				<div class="px-2">
-					<div class="break-all relative font-sans">
+					<div class="break-words relative font-sans">
 						<SchemaForm {schema} bind:args bind:isValid />
 					</div>
 				</div>

frontend/src/lib/components/SuperadminSettings.svelte

@@ -101,8 +101,8 @@
 									<td>{email}</td>
 									<td>{super_admin ? 'yes' : ''}</td>
 									<td>{login_type}</td>
-									<td><span class="break-all">{name ?? ''}</span></td>
-									<td><span class="break-all">{company ?? ''}</span></td>
+									<td><span class="break-words">{name ?? ''}</span></td>
+									<td><span class="break-words">{company ?? ''}</span></td>
 									<td>
 										<div class="flex flex-row gap-x-1">
 											<button

frontend/src/lib/components/TableSimple.svelte

@@ -33,7 +33,7 @@
 						<tr>
 							{#each keys as key, i}
 								<td
-									class="py-2 text-sm text-gray-700 break-all {i == 0
+									class="py-2 text-sm text-gray-700 break-words {i == 0
 										? 'pl-4 pr-3 sm:pl-6 md:pl-0 font-semibold'
 										: 'px-3'} {twTextSize}"
 								>

frontend/src/lib/components/VariableEditor.svelte

@@ -180,11 +180,10 @@
 		</div>
 		<div slot="submission">
 			<Button
-				size="sm"
 				on:click={() => (edit ? updateVariable() : createVariable())}
 				disabled={!valid || pathError != ''}
 			>
-				{edit ? 'Save' : 'Add a variable'}
+				{edit ? 'Save' : 'Add'}
 			</Button>
 		</div>
 	</DrawerContent>

frontend/src/lib/components/common/drawer/DrawerContent.svelte

@@ -2,6 +2,7 @@
 	import { faClose } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
+	import Button from '../button/Button.svelte'
 
 	export let title: string | undefined = undefined
 	export let overflow_y = true
@@ -9,21 +10,26 @@
 </script>
 
 <div class="flex flex-col divide-y h-screen max-h-screen">
-	<div class="flex justify-between items-center py-2 px-4">
-		<span class="text-sm font-bold">{title}</span>
-		<button on:click={() => dispatch('close')}>
-			<Icon data={faClose} class="w-4 h-4" />
-		</button>
+	<div class="flex justify-between items-center py-2 px-6">
+		<Button
+			variant="border"
+			size="lg"
+			color="dark"
+			on:click={() => {
+				dispatch('close')
+			}}
+		>
+			<Icon data={faClose} />
+		</Button>
+		<span class="font-bold">{title}</span>
+		<div class="flex flex-row">
+			{#if $$slots.submission}
+				<slot name="submission" class="sticky" />
+			{/if}
+		</div>
 	</div>
 
-	<div class="p-2 grow h-full max-h-full" class:overflow-y-auto={overflow_y}>
+	<div class="py-2 px-6 grow h-full max-h-full" class:overflow-y-auto={overflow_y}>
 		<slot />
 	</div>
-	{#if $$slots.submission}
-		<div class="flex flex-col bg-white border-gray-200 p-2">
-			<div class="flex flex-row-reverse p-2 ">
-				<slot name="submission" class="sticky" />
-			</div>
-		</div>
-	{/if}
 </div>

frontend/src/lib/components/landing/FlowLandingBox.svelte

@@ -14,7 +14,7 @@
 >
 	<div class="font-bold">{flow.summary || flow.path}</div>
 
-	<div class="inline-flex justify-between w-full break-all">
+	<div class="inline-flex justify-between w-full break-words">
 		<div class="text-xs">{flow.path}</div>
 	</div>
 

frontend/src/lib/components/scriptEditor/LogPanel.svelte

@@ -55,7 +55,8 @@
 		{#if drawerContent?.mode === 'json'}
 			<Highlight language={json} code={JSON.stringify(drawerContent.content, null, 4)} />
 		{:else if drawerContent?.mode === 'plain'}
-			<pre class="overflow-x-auto break-all relative h-full m-2 text-xs bg-white shadow-inner p-2">
+			<pre
+				class="overflow-x-auto break-words relative h-full m-2 text-xs bg-white shadow-inner p-2">
 				{drawerContent?.content}
 			</pre>
 		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go'}
@@ -81,7 +82,7 @@
 				</Pane>
 				<Pane class="!duration-[0ms]">
 					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
-						<pre class="overflow-x-auto break-all relative h-full px-2">
+						<pre class="overflow-x-auto break-words relative h-full px-2">
 							<DisplayResult result={previewJob.result} />
 						</pre>
 					{:else}

frontend/src/routes/__layout@root.svelte

@@ -84,7 +84,7 @@
 							on:click={() => {
 								menuOpen = !menuOpen
 							}}
-							class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+							class="ml-1 flex items-center justify-center h-8 w-8 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white border border-white"
 						>
 							<svg
 								class="h-6 w-6 text-white"
@@ -100,8 +100,9 @@
 						</button>
 					</div>
 					<div class="bg-blue-500 h-full">
-						<div class="flex items-center flex-shrink-0 p-4 font-extrabold text-white">
-							Windmill
+						<div class="flex items-center gap-x-2 flex-shrink-0 p-4 font-extrabold text-white w-40">
+							<WindmillIcon white={true} height="20px" width="20px" />
+							{#if !isCollapsed}Windmill{/if}
 						</div>
 
 						<div class="px-2 py-4 space-y-2 border-y border-blue-400">
@@ -125,13 +126,16 @@
 			)}
 		>
 			<div class="flex-1 flex flex-col min-h-0 shadow-lg bg-blue-500">
-				<div class="flex items-center flex-shrink-0 p-4 font-extrabold text-white">
-					{#if isCollapsed}
-						W
-					{:else}
-						Windmill
-					{/if}
-				</div>
+				<button
+					on:click={() => {
+						isCollapsed = !isCollapsed
+					}}
+				>
+					<div class="flex items-center gap-x-2 flex-shrink-0 p-4 font-extrabold text-white w-40">
+						<WindmillIcon white={true} height="20px" width="20px" />
+						{#if !isCollapsed}Windmill{/if}
+					</div>
+				</button>
 
 				<div class="px-2 py-4 space-y-2 border-y border-blue-400">
 					<WorkspaceMenu {isCollapsed} />

frontend/src/routes/resources.svelte

@@ -42,6 +42,7 @@
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
+	import Popover from '$lib/components/Popover.svelte'
 
 	type ResourceW = Resource & { canWrite: boolean }
 	type ResourceTypeW = ResourceType & { canWrite: boolean }
@@ -216,8 +217,7 @@
 			</Button>
 		</div>
 	</PageHeader>
-
-	<div class="relative">
+	<div class="relative overflow-auto">
 		{#if loading.resources}
 			<Skeleton layout={[0.5, [2], 1]} />
 			{#each new Array(6) as _}
@@ -238,7 +238,7 @@
 							<tr>
 								<td class="my-12"
 									><a
-										class="break-all"
+										class="break-words"
 										href="#{path}"
 										on:click={async () => {
 											resourceViewerTitle = `Resource ${path}`
@@ -262,12 +262,18 @@
 								>
 								<td class="text-center">
 									{#if is_oauth}
-										<Icon
-											class="text-green-600"
-											data={faCircle}
-											scale={0.7}
-											label="Resource is tied to an OAuth app"
-										/>
+										<Popover>
+											<Icon
+												class="text-green-600 animate-[pulse_5s_linear_infinite]"
+												data={faCircle}
+												scale={0.7}
+												label="Variable is tied to an OAuth app"
+											/>
+											<div slot="text">
+												The resource is tied to an OAuth app. The token is refreshed automatically
+												if applicable.
+											</div>
+										</Popover>
 									{/if}
 								</td>
 								<td>
@@ -334,56 +340,58 @@
 			<Skeleton layout={[[4], 0.7]} />
 		{/each}
 	{:else}
-		<TableCustom>
-			<tr slot="header-row">
-				<th>name</th>
-				<th>description</th>
-				<th />
-			</tr>
-			<tbody slot="body">
-				{#if resourceTypes}
-					{#each resourceTypes as { name, description, schema, canWrite }}
-						<tr>
-							<td
-								><a
-									href="#{name}"
-									on:click={() => {
-										resourceViewerTitle = `Resource type ${name}`
-										resourceViewerSchema = schema
-										resourceViewerDescription = description ?? ''
-										typeDrawerMode = 'view-type'
-										resourceViewer.openDrawer()
-									}}><IconedResourceType after={true} {name} /></a
-								></td
-							>
-							<td
-								><span class="text-gray-500 text-xs"
-									><SvelteMarkdown source={truncate(description ?? '', 30)} /></span
-								></td
-							>
-							<td>
-								{#if canWrite}
-									<Button
-										size="sm"
-										color="red"
-										variant="border"
-										startIcon={{ icon: faTrash }}
-										on:click={() => handleDeleteResourceType(name)}
-										disabled={!($userStore?.is_admin || false)}
-									>
-										Delete
-									</Button>
-								{/if}
-							</td>
-						</tr>
-					{/each}
-				{:else if resources}
-					<tr> No resources types to display</tr>
-				{:else}
-					<tr>Loading...</tr>
-				{/if}
-			</tbody>
-		</TableCustom>
+		<div class="overflow-auto">
+			<TableCustom>
+				<tr slot="header-row">
+					<th>name</th>
+					<th>description</th>
+					<th />
+				</tr>
+				<tbody slot="body">
+					{#if resourceTypes}
+						{#each resourceTypes as { name, description, schema, canWrite }}
+							<tr>
+								<td
+									><a
+										href="#{name}"
+										on:click={() => {
+											resourceViewerTitle = `Resource type ${name}`
+											resourceViewerSchema = schema
+											resourceViewerDescription = description ?? ''
+											typeDrawerMode = 'view-type'
+											resourceViewer.openDrawer()
+										}}><IconedResourceType after={true} {name} /></a
+									></td
+								>
+								<td
+									><span class="text-gray-500 text-xs"
+										><SvelteMarkdown source={truncate(description ?? '', 30)} /></span
+									></td
+								>
+								<td>
+									{#if canWrite}
+										<Button
+											size="sm"
+											color="red"
+											variant="border"
+											startIcon={{ icon: faTrash }}
+											on:click={() => handleDeleteResourceType(name)}
+											disabled={!($userStore?.is_admin || false)}
+										>
+											Delete
+										</Button>
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					{:else if resources}
+						<tr> No resources types to display</tr>
+					{:else}
+						<tr>Loading...</tr>
+					{/if}
+				</tbody>
+			</TableCustom>
+		</div>
 	{/if}
 </CenteredPage>
 

frontend/src/routes/schedules.svelte

@@ -88,12 +88,12 @@
 					{#each schedules as { path, edited_by, edited_at, schedule, offset_, enabled, script_path, is_flow, extra_perms, canWrite }}
 						<tr class={enabled ? '' : 'bg-gray-50'}>
 							<td class="max-w-sm"
-								><a class="break-all text-sm" href="/schedule/add?edit={path}&isFlow={is_flow}"
+								><a class="break-words text-sm" href="/schedule/add?edit={path}&isFlow={is_flow}"
 									>{path}</a
 								>
 								<SharedBadge {canWrite} extraPerms={extra_perms} />
 							</td>
-							<td class="break-all"
+							<td class="break-words"
 								><a class="text-sm" href="{is_flow ? '/flows/get' : '/scripts/get'}/{script_path}"
 									>{script_path}</a
 								><span class="text-2xs text-gray-500 bg-gray-100 font-mono ml-2"

frontend/src/routes/scripts/get/[...hash].svelte

@@ -242,7 +242,7 @@
 		<div class="flex flex-row flex-wrap justify-between gap-4">
 			<div>
 				<div class="flex items-center flex-wrap mb-2">
-					<h1 class="font-bold text-blue-500 break-all !p-0 mr-2">
+					<h1 class="font-bold text-blue-500 break-words !p-0 mr-2">
 						{script?.path ?? 'Loading...'}
 					</h1>
 					<div class="flex items-center gap-2">

frontend/src/routes/user/login_callback/[client_name]@none.svelte

@@ -50,8 +50,10 @@
 	})
 </script>
 
-<CenteredModal title="Login from {clientName} in progress">
-	<div class="mx-auto w-0">
-		<WindmillIcon class="animate-[spin_5s_linear_infinite]" height="80px" width="80px" />
+<CenteredModal title="Login from {clientName}">
+	<div class="w-full ">
+		<div class="block m-auto w-20">
+			<WindmillIcon class="animate-[spin_6s_linear_infinite]" height="80px" width="80px" />
+		</div>
 	</div>
 </CenteredModal>

frontend/src/routes/variables.svelte

@@ -85,7 +85,7 @@
 	</PageHeader>
 
 	<VariableEditor bind:this={variableEditor} on:create={loadVariables} />
-	<div class="relative">
+	<div class="relative overflow-auto">
 		{#if loading.variables}
 			<Skeleton layout={[0.5, [2], 1]} />
 			{#each new Array(3) as _}
@@ -106,16 +106,18 @@
 						<tr>
 							<td
 								><a
-									class="break-all"
+									class="break-words"
 									id="edit-{path}"
 									on:click={() => variableEditor.editVariable(path)}
 									href="#{path}">{path}</a
 								>
 								<div><SharedBadge {canWrite} extraPerms={extra_perms} /></div>
 							</td>
-							<td
-								><span class="text-sm break-all">
-									{truncate(value ?? '******', 20)}
+							<td>
+								<span class="inline-flex flex-row">
+									<span class="text-sm break-words">
+										{truncate(value ?? '****', 20)}
+									</span>
 									{#if is_secret}
 										<Popover>
 											<Icon
@@ -127,20 +129,26 @@
 											<span slot="text">This item is secret</span>
 										</Popover>
 									{/if}
-								</span></td
-							>
-							<td class="break-all"
+								</span>
+							</td>
+							<td class="break-words"
 								><span class="text-xs text-gray-500">{truncate(description ?? '', 50)}</span></td
 							>
 
 							<td class="text-center">
 								{#if is_oauth}
-									<Icon
-										class="text-green-500"
-										data={faCircle}
-										scale={0.7}
-										label="Variable is tied to an OAuth app"
-									/>
+									<Popover>
+										<Icon
+											class="text-green-600 animate-[pulse_5s_linear_infinite]"
+											data={faCircle}
+											scale={0.7}
+											label="Variable is tied to an OAuth app"
+										/>
+										<div slot="text">
+											The variable is tied to an OAuth app. The token is refreshed automatically if
+											applicable.
+										</div>
+									</Popover>
 								{/if}
 							</td>
 							<td
@@ -217,20 +225,22 @@
 		primary={false}
 	/>
 
-	<div class="my-5" />
-	{#if loading.contextual}
-		<Skeleton layout={[0.5, [2], 1]} />
-		{#each new Array(8) as _}
-			<Skeleton layout={[[2.8], 0.5]} />
-		{/each}
-	{:else}
-		<TableSimple
-			headers={['name', 'example of value', 'description']}
-			data={contextualVariables}
-			keys={['name', 'value', 'description']}
-			twTextSize="text-sm"
-		/>
-	{/if}
+	<div class="overflow-auto">
+		<div class="my-5" />
+		{#if loading.contextual}
+			<Skeleton layout={[0.5, [2], 1]} />
+			{#each new Array(8) as _}
+				<Skeleton layout={[[2.8], 0.5]} />
+			{/each}
+		{:else}
+			<TableSimple
+				headers={['name', 'example of value', 'description']}
+				data={contextualVariables}
+				keys={['name', 'value', 'description']}
+				twTextSize="text-sm"
+			/>
+		{/if}
+	</div>
 </CenteredPage>
 
 <ConfirmationModal