salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve dialog text wrapping and sizing

Browse Source
This commit is contained in:
Shantur Rathore
2025-11-27 20:11:38 +00:00
parent 9fa436b0b8
commit b6e43c899b
4 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/App.tsx
View File

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

4
packages/ui/src/components/alert-dialog.tsx
View File

@@ -89,9 +89,9 @@ const AlertDialog: Component = () => {
> >
{accent.symbol} {accent.symbol}
</div> </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.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.message}
{payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>} {payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>}
</Dialog.Description> </Dialog.Description>

2
packages/ui/src/components/instance-disconnected-modal.tsx
View File

@@ -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"> <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
<div> <div>
<Dialog.Title class="text-xl font-semibold text-primary">Instance Disconnected</Dialog.Title> <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. {folderLabel} can no longer be reached. Close the tab to continue working.
</Dialog.Description> </Dialog.Description>
</div> </div>

4
packages/ui/src/styles/panels/modal.css
View File

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