fix alignment of tool inputs/outputs

Author: nemozak1

src/lib/components/tool-messages/DefaultToolResponse.svelte

@@ -26,7 +26,7 @@
     }
 </script>
 
-<div class="card rounded-lg border border-surface-300-700 bg-surface-50-950 p-4">
+<div class="card rounded-lg border border-surface-300-700 bg-surface-50-950 p-4 text-left">
     <!-- Header -->
     <div class="mb-3 flex items-center justify-between">
         <div class="flex items-center gap-2">
@@ -64,6 +64,6 @@
 
     <!-- Output Content -->
     {#if showOutput}
-        <pre class="text-xs mt-2 preset-filled-surface-200-800 p-3 rounded-lg max-h-96 overflow-auto font-mono whitespace-pre border border-surface-300-700">{outputContent}</pre>
+        <pre class="text-xs text-left mt-2 preset-filled-surface-200-800 p-3 rounded-lg max-h-96 overflow-auto font-mono whitespace-pre border border-surface-300-700">{outputContent}</pre>
     {/if}
 </div>

src/lib/components/tool-messages/ObpApiResponse.svelte

@@ -43,8 +43,8 @@
     }
 </script>
 
-<div class="card rounded-lg border-2 p-4" 
-     class:border-error-500={isError} 
+<div class="card rounded-lg border-2 p-4 text-left"
+     class:border-error-500={isError}
      class:bg-error-50={isError}
      class:dark:bg-error-950={isError}
      class:border-surface-300-700={!isError}
@@ -107,6 +107,6 @@
 
     <!-- Output Content -->
     {#if showOutput}
-        <pre class="text-xs mt-2 preset-filled-surface-200-800 p-3 rounded-lg max-h-96 overflow-auto font-mono whitespace-pre border border-surface-300-700">{outputContent}</pre>
+        <pre class="text-xs text-left mt-2 preset-filled-surface-200-800 p-3 rounded-lg max-h-96 overflow-auto font-mono whitespace-pre border border-surface-300-700">{outputContent}</pre>
     {/if}
 </div>

src/lib/components/tool-messages/ToolError.svelte

@@ -26,7 +26,7 @@
 	}
 </script>
 
-<div class="card rounded-lg border-2 border-error-500 bg-error-50-950 p-4">
+<div class="card rounded-lg border-2 border-error-500 bg-error-50-950 p-4 text-left">
 	<!-- Header -->
 	<div class="mb-3 flex items-center justify-between">
 		<div class="flex items-center gap-2">
@@ -74,6 +74,6 @@
 
 	<!-- Error Details -->
 	{#if showDetails}
-		<pre class="text-xs mt-3 preset-filled-surface-200-800 p-3 rounded-lg max-h-96 overflow-auto font-mono whitespace-pre border border-error-300 dark:border-error-700">{errorOutput}</pre>
+		<pre class="text-xs text-left mt-3 preset-filled-surface-200-800 p-3 rounded-lg max-h-96 overflow-auto font-mono whitespace-pre border border-error-300 dark:border-error-700">{errorOutput}</pre>
 	{/if}
 </div>

src/lib/components/tool-messages/ToolMessage.svelte

@@ -215,7 +215,7 @@
 
 {#if isBatchApproval && isFirstInBatch}
     <!-- Batch Approval View -->
-    <div class="card variant-ghost-warning rounded-lg border-2 border-warning-500 p-4 space-y-4">
+    <div class="card variant-ghost-warning rounded-lg border-2 border-warning-500 p-4 space-y-4 text-left">
         <!-- Header -->
         <div class="flex items-center justify-between">
             <div class="flex items-center gap-3">
@@ -317,7 +317,7 @@
     <!-- This is part of a batch but not the first - don't render, it's shown above -->
 {:else}
     <!-- Single Tool Card (Simplified) -->
-    <div class="card rounded-lg border-1 {borderColorClass} bg-primary-300-700 transition-all">
+    <div class="card rounded-lg border-1 {borderColorClass} bg-primary-300-700 transition-all text-left">
         <!-- Card Header - Always Visible, Clickable to Expand -->
         <button
             type="button"