fix visual overflow errors & update workflow

.github/workflows/deploy-to-spaces.yml

@@ -7,7 +7,37 @@ on:
   workflow_dispatch:
 
 jobs:
+  test-build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: false
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: "Build"
+        run: |
+          pnpm run build
   sync-to-hub:
+    needs: test-build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

src/lib/actions/observe.svelte.ts

@@ -0,0 +1,136 @@
+import type { Action } from "svelte/action";
+
+export enum ObservedElements {
+	BottomActions = "bottom-actions",
+	TokenCountEnd = "token-count-end",
+	TokenCountStart = "token-count-start",
+	// Add other elements here as needed
+}
+
+type ObservedData = {
+	rect: {
+		width: number;
+		height: number;
+		top: number;
+		left: number;
+		right: number;
+		bottom: number;
+	};
+	offset: {
+		width: number;
+		height: number;
+		top: number;
+		left: number;
+		right: number;
+		bottom: number;
+	};
+};
+
+export const observed: Record<ObservedElements, ObservedData> = $state(
+	Object.values(ObservedElements).reduce(
+		(acc, key) => {
+			acc[key] = {
+				rect: {
+					width: 0,
+					height: 0,
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+				},
+				offset: {
+					width: 0,
+					height: 0,
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+				},
+			};
+			return acc;
+		},
+		{} as Record<ObservedElements, ObservedData>
+	)
+);
+
+type ObserveArgs = {
+	name: ObservedElements;
+};
+
+function getOffsetPosition(el: HTMLElement) {
+	let top = 0;
+	let left = 0;
+	const width = el.offsetWidth;
+	const height = el.offsetHeight;
+
+	while (el) {
+		top += el.offsetTop;
+		left += el.offsetLeft;
+		el = el.offsetParent as HTMLElement;
+	}
+
+	return { top, left, width, height, right: left + width, bottom: top + height };
+}
+
+export const observe: Action<HTMLElement, ObserveArgs> = (node, args) => {
+	let resizeObserver: ResizeObserver;
+
+	function setVars(name: ObservedElements) {
+		// 1. Standard rect (includes transforms)
+		const rect = node.getBoundingClientRect();
+		document.documentElement.style.setProperty(`--${name}-width`, `${rect.width}px`);
+		document.documentElement.style.setProperty(`--${name}-height`, `${rect.height}px`);
+		document.documentElement.style.setProperty(`--${name}-top`, `${rect.top}px`);
+		document.documentElement.style.setProperty(`--${name}-left`, `${rect.left}px`);
+		document.documentElement.style.setProperty(`--${name}-right`, `${rect.right}px`);
+		document.documentElement.style.setProperty(`--${name}-bottom`, `${rect.bottom}px`);
+
+		// 2. Offset position (ignores transforms)
+		const offset = getOffsetPosition(node);
+		document.documentElement.style.setProperty(`--${name}-width-offset`, `${offset.width}px`);
+		document.documentElement.style.setProperty(`--${name}-height-offset`, `${offset.height}px`);
+		document.documentElement.style.setProperty(`--${name}-top-offset`, `${offset.top}px`);
+		document.documentElement.style.setProperty(`--${name}-left-offset`, `${offset.left}px`);
+		document.documentElement.style.setProperty(`--${name}-right-offset`, `${offset.right}px`);
+		document.documentElement.style.setProperty(`--${name}-bottom-offset`, `${offset.bottom}px`);
+
+		observed[name] = {
+			rect,
+			offset,
+		};
+	}
+
+	function update(args: ObserveArgs) {
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+		}
+
+		resizeObserver = new ResizeObserver(() => {
+			setVars(args.name);
+		});
+		resizeObserver.observe(node);
+
+		// Listen for scroll and resize events
+		window.addEventListener("scroll", onWindowChange, true);
+		window.addEventListener("resize", onWindowChange, true);
+
+		setVars(args.name); // Initial set after observing
+	}
+
+	function onWindowChange() {
+		setVars(args.name);
+	}
+
+	update(args); // Initial setup
+
+	function destroy() {
+		resizeObserver.disconnect();
+		window.removeEventListener("scroll", onWindowChange, true);
+		window.removeEventListener("resize", onWindowChange, true);
+	}
+
+	return {
+		update,
+		destroy,
+	};
+};

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

@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { type ConversationMessage, type Model, type Project } from "$lib/types.js";
-
-	import { getTokens, handleNonStreamingResponse, handleStreamingResponse, isSystemPromptSupported } from "./utils.js";
-
+	import { observe, observed, ObservedElements } from "$lib/actions/observe.svelte.js";
 	import { AbortManager } from "$lib/spells/abort-manager.svelte.js";
 	import { models } from "$lib/state/models.svelte.js";
 	import { session } from "$lib/state/session.svelte.js";
 	import { token } from "$lib/state/token.svelte.js";
+	import { type ConversationMessage, type Model, type Project } from "$lib/types.js";
 	import { isMac } from "$lib/utils/platform.js";
 	import { watch } from "runed";
 	import typia from "typia";
@@ -29,6 +27,7 @@
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
+	import { getTokens, handleNonStreamingResponse, handleStreamingResponse, isSystemPromptSupported } from "./utils.js";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
@@ -307,12 +306,24 @@
 			<div
 				class="pointer-events-none absolute inset-0 flex flex-1 shrink-0 items-center justify-around gap-x-8 text-center text-sm text-gray-500 max-xl:hidden"
 			>
-				{#each generationStats as { latency, generatedTokensCount }}
-					<span>{generatedTokensCount} tokens · Latency {latency}ms</span>
+				{#each generationStats as { latency, generatedTokensCount }, index}
+					{@const isLast = index === generationStats.length - 1}
+					{@const baLeft = observed["bottom-actions"].rect.left}
+					{@const tceRight = observed["token-count-end"].offset.right}
+					<span
+						style:translate={isLast ? (baLeft - 12 < tceRight ? baLeft - tceRight - 12 + "px" : "") : undefined}
+						use:observe={{ name: isLast ? ObservedElements.TokenCountEnd : ObservedElements.TokenCountStart }}
+						>{generatedTokensCount} tokens · Latency {latency}ms</span
+					>
 				{/each}
 			</div>
 			<div class="flex flex-1 justify-end gap-x-2">
-				<button type="button" onclick={() => (viewCode = !viewCode)} class="btn">
+				<button
+					type="button"
+					onclick={() => (viewCode = !viewCode)}
+					class="btn"
+					use:observe={{ name: ObservedElements.BottomActions }}
+				>
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}
 				</button>