improve zooming

src/lib/components/inference-playground/generation-config.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { isMcpEnabled } from "$lib/constants.js";
 	import type { ConversationClass } from "$lib/state/conversations.svelte.js";
-	import { settings } from "$lib/state/settings.svelte.js";
+	import { mcpServers } from "$lib/state/mcps.svelte.js";
 	import { maxAllowedTokens } from "$lib/utils/business.svelte.js";
 	import { cn } from "$lib/utils/cn.js";
 	import { isNumber } from "$lib/utils/is.js";
@@ -10,10 +11,6 @@
 	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
 	import MCPModal from "./mcp-modal.svelte";
 	import StructuredOutputModal, { openStructuredOutputModal } from "./structured-output-modal.svelte";
-	import { mcpServers } from "$lib/state/mcps.svelte.js";
-	import { isMcpEnabled } from "$lib/constants.js";
-	import IconMinus from "~icons/carbon/subtract";
-	import IconPlus from "~icons/carbon/add-large";
 
 	interface Props {
 		conversation: ConversationClass;
@@ -170,36 +167,6 @@
 			class="peer relative h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-black peer-focus:outline-hidden after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
 		></div>
 	</label>
-
-	<!-- Text Size Setting -->
-	<div class="mt-4 flex items-center justify-between">
-		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Text Size</span>
-		<div class="flex items-center gap-2">
-			<button
-				type="button"
-				onclick={() => {
-					if (settings.textSize > 50) {
-						settings.textSize = settings.textSize - 10;
-					}
-				}}
-				class="btn-mini aspect-square"
-			>
-				<IconMinus />
-			</button>
-			<span class="text-sm">{settings.textSize}%</span>
-			<button
-				type="button"
-				onclick={() => {
-					if (settings.textSize < 200) {
-						settings.textSize = settings.textSize + 10;
-					}
-				}}
-				class="btn-mini aspect-square"
-			>
-				<IconPlus />
-			</button>
-		</div>
-	</div>
 </div>
 
 <StructuredOutputModal {conversation} />

src/lib/components/inference-playground/message-textarea.svelte

@@ -4,7 +4,6 @@
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { conversations } from "$lib/state/conversations.svelte";
 	import { images } from "$lib/state/images.svelte";
-	import { settings } from "$lib/state/settings.svelte.js";
 	import type { ConversationMessage } from "$lib/types.js";
 	import { fileToDataURL } from "$lib/utils/file.js";
 	import { omit } from "$lib/utils/object.svelte";
@@ -15,8 +14,6 @@
 	import IconMaximize from "~icons/carbon/maximize";
 	import Tooltip from "../tooltip.svelte";
 	import { previewImage } from "./img-preview.svelte";
-	import { watch } from "runed";
-	import { tick } from "svelte";
 
 	const multiple = $derived(conversations.active.length > 1);
 	const loading = $derived(conversations.generating);
@@ -95,17 +92,6 @@
 	});
 
 	const autosized = new TextareaAutosize();
-
-	// Watch for text size changes and trigger resize
-	watch(
-		() => settings.textSize,
-		() => {
-			// Trigger resize on next tick to ensure styles are applied
-			tick().then(() => {
-				autosized.triggerResize();
-			});
-		},
-	);
 </script>
 
 <svelte:window onkeydown={onKeydown} />
@@ -132,7 +118,6 @@
 				bind:value={input}
 				{@attach autosized.attachment}
 				{@attach autofocus()}
-				style="font-size: {settings.textSize}%"
 			></textarea>
 			{#if canUploadImgs}
 				<Tooltip openDelay={250}>

src/lib/components/inference-playground/message.svelte

@@ -1,33 +1,30 @@
 <script lang="ts">
+	import { clickOutside } from "$lib/attachments/click-outside.js";
+	import { addToast } from "$lib/components/toaster.svelte.js";
 	import Tooltip from "$lib/components/tooltip.svelte";
 	import { TEST_IDS } from "$lib/constants.js";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { type ConversationClass } from "$lib/state/conversations.svelte.js";
 	import { images } from "$lib/state/images.svelte";
-	import { settings } from "$lib/state/settings.svelte.js";
+	import { projects } from "$lib/state/projects.svelte";
 	import { type ConversationMessage } from "$lib/types.js";
 	import { copyToClipboard } from "$lib/utils/copy.js";
 	import { cmdOrCtrl } from "$lib/utils/platform.js";
 	import { AsyncQueue } from "$lib/utils/queue.js";
-	import { clickOutside } from "$lib/attachments/click-outside.js";
+	import { parseThinkingTokens } from "$lib/utils/thinking.js";
+	import { marked } from "marked";
 	import { FileUpload } from "melt/builders";
 	import { fade } from "svelte/transition";
-	import { watch } from "runed";
-	import { tick } from "svelte";
+	import IconChevronDown from "~icons/carbon/chevron-down";
+	import IconChevronRight from "~icons/carbon/chevron-right";
 	import IconCopy from "~icons/carbon/copy";
+	import IconEdit from "~icons/carbon/edit";
 	import IconImage from "~icons/carbon/image-reference";
 	import IconMaximize from "~icons/carbon/maximize";
-	import IconEdit from "~icons/carbon/edit";
+	import ArrowSplitRounded from "~icons/material-symbols/arrow-split-rounded";
 	import IconCustom from "../icon-custom.svelte";
 	import LocalToasts from "../local-toasts.svelte";
 	import { previewImage } from "./img-preview.svelte";
-	import { marked } from "marked";
-	import { parseThinkingTokens } from "$lib/utils/thinking.js";
-	import IconChevronDown from "~icons/carbon/chevron-down";
-	import IconChevronRight from "~icons/carbon/chevron-right";
-	import ArrowSplitRounded from "~icons/material-symbols/arrow-split-rounded";
-	import { addToast } from "$lib/components/toaster.svelte.js";
-	import { projects } from "$lib/state/projects.svelte";
 
 	type Props = {
 		conversation: ConversationClass;
@@ -94,18 +91,6 @@
 		}
 		return marked(parsedMessage.thinking);
 	});
-
-	// Watch for text size changes and trigger resize
-	watch(
-		() => settings.textSize,
-		() => {
-			// Trigger resize on next tick to ensure styles are applied
-			tick().then(() => {
-				autosized.triggerResize();
-				reasoningAutosized.triggerResize();
-			});
-		},
-	);
 </script>
 
 <div
@@ -157,7 +142,6 @@
 							{#if conversation.data.parseMarkdown && !isEditing}
 								<div
 									class="relative w-full max-w-none rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900"
-									style="font-size: {settings.textSize}%"
 								>
 									<div class="prose prose-sm dark:prose-invert">
 										{@html parsedReasoning}
@@ -187,7 +171,6 @@
 									class="w-full resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 									rows="1"
 									{@attach reasoningAutosized.attachment}
-									style="font-size: {settings.textSize}%"
 								></textarea>
 							{/if}
 						{/if}
@@ -201,7 +184,6 @@
 						data-message
 						data-test-id={TEST_IDS.message}
 						{@attach clickOutside(() => (isEditing = false))}
-						style="font-size: {settings.textSize}%"
 					>
 						<Tooltip>
 							{#snippet trigger(tooltip)}
@@ -246,7 +228,6 @@
 								class="w-full resize-none overflow-hidden border-none bg-transparent outline-none"
 								rows="1"
 								{@attach autosized.attachment}
-								style="font-size: {settings.textSize}%"
 							></textarea>
 						{/if}
 					</div>
@@ -276,7 +257,6 @@
 						data-message
 						data-test-id={TEST_IDS.message}
 						{@attach autosized.attachment}
-						style="font-size: {settings.textSize}%"
 					></textarea>
 				{/if}
 			</div>

src/lib/components/inference-playground/playground.svelte

@@ -1,36 +1,35 @@
 <script lang="ts">
 	import { observe, observed, ObservedElements } from "$lib/attachments/observe.svelte.js";
+	import { TEST_IDS } from "$lib/constants.js";
 	import { conversations } from "$lib/state/conversations.svelte";
 	import { projects } from "$lib/state/projects.svelte";
-	import { settings } from "$lib/state/settings.svelte.js";
 	import { token } from "$lib/state/token.svelte.js";
 	import { isHFModel } from "$lib/types.js";
 	import { iterate } from "$lib/utils/array.js";
 	import { isSystemPromptSupported } from "$lib/utils/business.svelte.js";
+	import { atLeastNDecimals } from "$lib/utils/number.js";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconWaterfall from "~icons/carbon/chart-waterfall";
+	import IconClose from "~icons/carbon/close";
 	import IconCode from "~icons/carbon/code";
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
 	import IconSettings from "~icons/carbon/settings";
 	import IconShare from "~icons/carbon/share";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
+	import BillingIndicator from "../billing-indicator.svelte";
 	import { showShareModal } from "../share-modal.svelte";
 	import Toaster from "../toaster.svelte";
 	import Tooltip from "../tooltip.svelte";
+	import BillingModal from "./billing-modal.svelte";
 	import PlaygroundConversationHeader from "./conversation-header.svelte";
 	import PlaygroundConversation from "./conversation.svelte";
 	import GenerationConfig from "./generation-config.svelte";
 	import HFTokenModal from "./hf-token-modal.svelte";
+	import MessageTextarea from "./message-textarea.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
-	import BillingModal from "./billing-modal.svelte";
-	import BillingIndicator from "../billing-indicator.svelte";
-	import { TEST_IDS } from "$lib/constants.js";
-	import MessageTextarea from "./message-textarea.svelte";
-	import { atLeastNDecimals } from "$lib/utils/number.js";
-	import IconClose from "~icons/carbon/close";
 
 	let viewCode = $state(false);
 	let viewSettings = $state(false);
@@ -97,7 +96,6 @@
 					projects.update({ ...projects.current, systemMessage: e.currentTarget.value });
 				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
-				style="font-size: {settings.textSize}%"
 			></textarea>
 		</div>
 	</div>
@@ -191,7 +189,7 @@
 	{#if !compareActive}
 		<div
 			class={[
-				"z-50 flex h-full flex-col p-3 max-md:fixed max-md:inset-0 max-md:backdrop-blur-lg ",
+				"z-50 flex h-full flex-col overflow-y-auto p-3 max-md:fixed max-md:inset-0 max-md:backdrop-blur-lg ",
 				!viewSettings && "max-md:hidden",
 			]}
 		>
@@ -239,7 +237,7 @@
 					<div class="flex items-center justify-end">
 						<BillingIndicator showModal={() => (billingModalOpen = true)} />
 					</div>
-					<div class="flex items-center justify-end gap-4 whitespace-nowrap">
+					<div class="flex flex-wrap items-center justify-end gap-4 whitespace-nowrap">
 						<button
 							onclick={() => projects.current && showShareModal(projects.current)}
 							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"

src/lib/components/inference-playground/project-select.svelte

@@ -31,6 +31,9 @@
 			if (v) projects.activeId = v;
 		},
 		sameWidth: true,
+		onOpenChange(open) {
+			console.log("open", open);
+		},
 	});
 
 	type SaveDialogState = {

src/lib/state/settings.svelte.ts

@@ -1,27 +0,0 @@
-const TEXT_SIZE_KEY = "textSize";
-
-class Settings {
-	#textSize = $state(100);
-
-	constructor() {
-		const storedTextSize = localStorage.getItem(TEXT_SIZE_KEY);
-		const parsed = storedTextSize ? parseInt(storedTextSize, 10) : null;
-		this.textSize = parsed && !isNaN(parsed) ? parsed : 100;
-	}
-
-	get textSize() {
-		return this.#textSize;
-	}
-
-	set textSize(size: number) {
-		localStorage.setItem(TEXT_SIZE_KEY, JSON.stringify(size));
-		this.#textSize = size;
-	}
-
-	// Reset to default
-	resetTextSize = () => {
-		this.textSize = 100;
-	};
-}
-
-export const settings = new Settings();