responsive stuffs

src/lib/components/flow/actions/InstructionsModal.svelte

@@ -5,6 +5,7 @@
 	import * as Dialog from '$lib/components/ui/sheet/index.js';
 	import Code from '$lib/components/chat/markdown/Code.svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	type Instruction = {
 		library: string;
@@ -188,9 +189,11 @@ for chunk in chunks:
 
 <Dialog.Root bind:open>
 	<Dialog.Trigger class="">
-		<Button variant="outline">
+		<Button variant="outline" size={breakpointsState.isMobile ? 'icon-sm' : 'default'}>
 			<CodeXml />
-			How to use the API
+			{#if !breakpointsState.isMobile}
+				How to use the API
+			{/if}
 		</Button>
 	</Dialog.Trigger>
 

src/lib/components/flow/actions/PanelRightActions.svelte

@@ -10,6 +10,7 @@
 	import defaultAvatar from '$lib/assets/default-avatar.svg';
 	import BillingManagementModal from '$lib/components/billing/BillingManagementModal.svelte';
 	import InstructionsModal from './InstructionsModal.svelte';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	let { canReset }: { canReset: boolean } = $props();
 
@@ -27,16 +28,23 @@
 
 <Panel position="top-right" class="flex items-center justify-end gap-2 p-1 lg:p-2">
 	{#if showResetButton}
-		<Button variant="outline" class="" onclick={handleReset}>
+		<Button
+			variant="outline"
+			size={breakpointsState.isMobile ? 'icon-sm' : 'default'}
+			class=""
+			onclick={handleReset}
+		>
 			<RefreshCcw />
-			Start new chat
+			{#if !breakpointsState.isMobile}
+				Start new chat
+			{/if}
 		</Button>
 	{/if}
 	<InstructionsModal />
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger>
 			{#snippet child({ props })}
-				<Button {...props} variant="outline">
+				<Button {...props} variant="outline" size={breakpointsState.isMobile ? 'sm' : 'default'}>
 					{#if authState.loading}
 						<div class="h-2 w-12 animate-pulse rounded-full bg-accent-foreground/20"></div>
 					{:else if authState.user}