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

fix(ui): prevent settings modal overflow on phones

Browse Source
This commit is contained in:
Shantur Rathore
2026-04-09 21:00:17 +01:00
parent d50c00afb4
commit c7d4f99e48
2 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/components/settings/speech-settings-card.tsx
View File

@@ -334,7 +334,7 @@ const Field: Component<{
<div class="settings-toggle-title">{props.label}</div> <div class="settings-toggle-title">{props.label}</div>
<div class="settings-toggle-caption">{props.caption}</div> <div class="settings-toggle-caption">{props.caption}</div>
</div> </div>
<div class="flex items-center gap-2 min-w-[18rem] max-w-[24rem] w-full"> <div class="flex items-center gap-2 w-full min-w-0 sm:min-w-[18rem] sm:max-w-[24rem]">
{props.icon} {props.icon}
<input <input
type={props.type ?? "text"} type={props.type ?? "text"}
@@ -361,7 +361,7 @@ const SelectField: Component<{
<div class="settings-toggle-title">{props.label}</div> <div class="settings-toggle-title">{props.label}</div>
<div class="settings-toggle-caption">{props.caption}</div> <div class="settings-toggle-caption">{props.caption}</div>
</div> </div>
<div class="min-w-[18rem] max-w-[24rem] w-full"> <div class="w-full min-w-0 sm:min-w-[18rem] sm:max-w-[24rem]">
<select value={props.value} onInput={(event) => props.onInput(event.currentTarget.value)} class="selector-input w-full"> <select value={props.value} onInput={(event) => props.onInput(event.currentTarget.value)} class="selector-input w-full">
<For each={props.options}>{(option) => <option value={option.value}>{option.label}</option>}</For> <For each={props.options}>{(option) => <option value={option.value}>{option.label}</option>}</For>
</select> </select>

35
packages/ui/src/styles/components/settings-screen.css
View File

@@ -526,14 +526,49 @@
@media (max-width: 640px) { @media (max-width: 640px) {
.settings-screen-frame { .settings-screen-frame {
padding: 0; padding: 0;
overflow: hidden;
} }
.modal-surface.settings-screen-shell { .modal-surface.settings-screen-shell {
width: 100%; width: 100%;
max-width: 100%;
height: 100%; height: 100%;
max-height: none; max-height: none;
min-height: 100%; min-height: 100%;
border-radius: 0; border-radius: 0;
overflow-x: hidden;
}
.modal-surface.settings-screen-shell .settings-screen-nav,
.modal-surface.settings-screen-shell .settings-screen-nav-list,
.modal-surface.settings-screen-shell .settings-screen-content,
.modal-surface.settings-screen-shell .settings-screen-scroll,
.modal-surface.settings-screen-shell .settings-section-stack,
.modal-surface.settings-screen-shell .settings-stack,
.modal-surface.settings-screen-shell .settings-card,
.modal-surface.settings-screen-shell .settings-card-content,
.modal-surface.settings-screen-shell .settings-toggle-row,
.modal-surface.settings-screen-shell .settings-toggle-row > * {
min-width: 0;
}
.modal-surface.settings-screen-shell .selector-trigger,
.modal-surface.settings-screen-shell .selector-input,
.modal-surface.settings-screen-shell .selector-button {
min-width: 0;
max-width: 100%;
}
.modal-surface.settings-screen-shell .settings-toggle-caption,
.modal-surface.settings-screen-shell .settings-inline-note,
.modal-surface.settings-screen-shell .remote-address-url,
.modal-surface.settings-screen-shell code {
overflow-wrap: anywhere;
word-break: break-word;
}
.modal-surface.settings-screen-shell .whitespace-nowrap {
white-space: normal;
} }
.settings-screen-content-header, .settings-screen-content-header,