Improve dialog text wrapping and sizing

packages/ui/src/App.tsx

@@ -248,7 +248,7 @@ const App: Component = () => {
             <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
               <div>
                 <Dialog.Title class="text-xl font-semibold text-primary">Unable to launch OpenCode</Dialog.Title>
-                <Dialog.Description class="text-sm text-secondary mt-2">
+                <Dialog.Description class="text-sm text-secondary mt-2 break-words">
                   Install the OpenCode CLI and make sure it is available in your PATH, or pick a custom binary from
                   Advanced Settings.
                 </Dialog.Description>

packages/ui/src/components/alert-dialog.tsx

@@ -89,9 +89,9 @@ const AlertDialog: Component = () => {
                     >
                       {accent.symbol}
                     </div>
-                    <div class="flex-1">
+                    <div class="flex-1 min-w-0">
                       <Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title>
-                      <Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line">
+                      <Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line break-words">
                         {payload.message}
                         {payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>}
                       </Dialog.Description>

packages/ui/src/components/instance-disconnected-modal.tsx

@@ -19,7 +19,7 @@ export default function InstanceDisconnectedModal(props: InstanceDisconnectedMod
           <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
             <div>
               <Dialog.Title class="text-xl font-semibold text-primary">Instance Disconnected</Dialog.Title>
-              <Dialog.Description class="text-sm text-secondary mt-2">
+              <Dialog.Description class="text-sm text-secondary mt-2 break-words">
                 {folderLabel} can no longer be reached. Close the tab to continue working.
               </Dialog.Description>
             </div>

packages/ui/src/styles/panels/modal.css

@@ -8,6 +8,10 @@
   @apply rounded-lg shadow-2xl flex flex-col;
   background-color: var(--surface-base);
   color: var(--text-primary);
+  max-width: min(100%, calc(100vw - 32px));
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  min-width: 0;
 }
 
 .modal-search-container {