fix apps UX nits

frontend/Caddyfile

@@ -1,12 +1,7 @@
-{
-  auto_https off
-}
-
 http://localhost {  
   bind {$ADDRESS}
   reverse_proxy /api/* http://localhost:8000
   reverse_proxy /* http://localhost:3000
-  reverse_proxy /ws/* http://localhost:3001
 }
 
 https://localhost {  

frontend/src/lib/components/Editor.svelte

@@ -40,6 +40,8 @@
 		noSuggestionDiagnostics: true,
 		noSyntaxValidation: true
 	})
+	languages.typescript.typescriptDefaults.setExtraLibs([])
+
 	meditor.defineTheme('myTheme', {
 		base: 'vs',
 		inherit: true,
@@ -201,7 +203,6 @@
 						isTrusted: true
 					},
 
-					// workspaceFolder: { uri: Uri.parse(`/tmp/${name}`), name: 'tmp', index: 0 },
 					initializationOptions,
 					middleware: {
 						workspace: {
@@ -409,10 +410,9 @@
 		const model = meditor.createModel(code, lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
-		editor = meditor.create(
-			divEl as HTMLDivElement,
-			editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
-		)
+		editor = meditor.create(divEl as HTMLDivElement, {
+			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
+		})
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		editor.onDidChangeModelContent((event) => {

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -169,7 +169,7 @@
 								{#if $selectedComponent !== undefined}
 									<SettingsPanel />
 								{:else}
-									<div class="p-4 min-w-[150px] text-sm">No component selected.</div>
+									<div class="p-2 min-w-[150px] text-sm">No component selected.</div>
 								{/if}
 							</TabContent>
 							<TabContent value="insert">

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -43,7 +43,7 @@
 
 <PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">
 	<div
-		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-4 pt-4 pb-2"
+		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-2 pt-4 pb-2"
 	>
 		{#each panels as [componentId, outputs] (componentId)}
 			{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -54,7 +54,7 @@
 
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
-<div class="h-full p-4 flex flex-col gap-2" transition:fly={{ duration: 50 }}>
+<div class="h-full p-2 flex flex-col gap-2" transition:fly={{ duration: 50 }}>
 	<div class="flex justify-between w-full gap-1 flex-row items-center">
 		{#if name !== undefined}
 			<input bind:value={name} placeholder="Inline script name" />
@@ -102,7 +102,7 @@
 			class="flex flex-1 grow h-full"
 			lang={scriptLangToEditorLang(inlineScript?.language)}
 			bind:code={inlineScript.content}
-			fixedOverflowWidgets={false}
+			fixedOverflowWidgets={true}
 			on:change={async (e) => {
 				if (inlineScript) {
 					const oldSchema = JSON.stringify(inlineScript.schema)

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -12,7 +12,7 @@
 	let selectedScriptComponentId: string | undefined = undefined
 </script>
 
-<SplitPanesWrapper>
+<SplitPanesWrapper panesClass="!overflow-visible">
 	<Pane size={25}>
 		<InlineScriptsPanelList bind:selectedScriptComponentId />
 	</Pane>

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -93,7 +93,10 @@ declare const ${k} = ${JSON.stringify(v)};
 {#if component}
 	<div class="flex flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
-			<PanelSection title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}>
+			<PanelSection
+				smallPadding
+				title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}
+			>
 				<svelte:fragment slot="action">
 					<span
 						class={classNames(

frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -41,7 +41,7 @@
 		bind:inlineScript={appInput.runnable.inlineScript}
 	/>
 {/if}
-<div class="flex flex-col xl:flex-row justify-between w-full items-center gap-1">
+<div class="flex flex-col xl:flex-row justify-between w-full flex-wrap items-center gap-1">
 	<span class="text-xs font-semibold truncate">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
@@ -49,7 +49,7 @@
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1">
+	<div class="flex gap-1 flex-wrap justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
 			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
 				Edit

frontend/src/lib/components/apps/utils.ts

@@ -19,7 +19,7 @@ import {
 	Calendar,
 	ToggleLeft
 } from 'lucide-svelte'
-import type { AppInput, AppInputs, InputType, ResultAppInput, StaticAppInput, StaticInput } from './inputType'
+import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType'
 import type { AppComponent } from './types'
 
 export async function loadSchema(