feat(desktop): startup errors shown

2 files changed, 17 insertions, 2 deletions

diff --git a/packages/ui/src/components/text-field.css b/packages/ui/src/components/text-field.css
index 897050a63..a739c4eb2 100644
--- a/packages/ui/src/components/text-field.css
+++ b/packages/ui/src/components/text-field.css
@@ -42,7 +42,7 @@
 
     [data-slot="input-wrapper"] {
       display: flex;
-      align-items: center;
+      align-items: start;
       justify-content: space-between;
       width: 100%;
       padding-right: 4px;
@@ -101,8 +101,16 @@
       }
     }
 
+    textarea[data-slot="input-input"] {
+      height: auto;
+      min-height: 32px;
+      padding: 6px 12px;
+      resize: none;
+    }
+
     [data-slot="input-copy-button"] {
       flex-shrink: 0;
+      margin-top: 4px;
       color: var(--icon-base);
 
       &:hover {
diff --git a/packages/ui/src/components/text-field.tsx b/packages/ui/src/components/text-field.tsx
index 77f014b6b..ed3d13fe3 100644
--- a/packages/ui/src/components/text-field.tsx
+++ b/packages/ui/src/components/text-field.tsx
@@ -26,6 +26,7 @@ export interface TextFieldProps
   error?: string
   variant?: "normal" | "ghost"
   copyable?: boolean
+  multiline?: boolean
 }
 
 export function TextField(props: TextFieldProps) {
@@ -46,6 +47,7 @@ export function TextField(props: TextFieldProps) {
     "error",
     "variant",
     "copyable",
+    "multiline",
   ])
   const [copied, setCopied] = createSignal(false)
 
@@ -81,7 +83,12 @@ export function TextField(props: TextFieldProps) {
         </Kobalte.Label>
       </Show>
       <div data-slot="input-wrapper">
-        <Kobalte.Input {...others} data-slot="input-input" class={local.class} />
+        <Show
+          when={local.multiline}
+          fallback={<Kobalte.Input {...others} data-slot="input-input" class={local.class} />}
+        >
+          <Kobalte.TextArea {...others} autoResize data-slot="input-input" class={local.class} />
+        </Show>
         <Show when={local.copyable}>
           <Tooltip value={copied() ? "Copied" : "Copy to clipboard"} placement="top" gutter={8}>
             <IconButton