diff --git a/src/lib/ui/components/primitives/Dialog.svelte b/src/lib/ui/components/primitives/Dialog.svelte index 6c55295..50b5488 100644 --- a/src/lib/ui/components/primitives/Dialog.svelte +++ b/src/lib/ui/components/primitives/Dialog.svelte @@ -104,6 +104,13 @@ padding: var(--space-6); border-bottom: 1px solid var(--border-subtle); } + header > div { + min-width: 0; + overflow-wrap: anywhere; + } + header > :global(.btn) { + flex-shrink: 0; + } h2 { margin: 0; font-size: var(--text-xl); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9c56e24..a7b166a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -738,8 +738,13 @@ min-height: 44px; } :global(button), + :global(summary), :global(.btn) { - min-height: 44px; + /* Keep scoped component size rules from shrinking mobile touch targets. */ + min-height: 44px !important; + } + :global(.btn) { + min-width: 44px !important; } } @media (max-width: 360px) { diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte index ef90ee3..7613312 100644 --- a/src/routes/account/+page.svelte +++ b/src/routes/account/+page.svelte @@ -214,6 +214,7 @@ .page { max-width: 760px; display: grid; + grid-template-columns: minmax(0, 1fr); gap: 24px; } .panel { @@ -232,6 +233,10 @@ justify-content: space-between; gap: 20px; } + .identity > div { + min-width: 0; + overflow-wrap: anywhere; + } .identity p { margin: 8px 0 0; color: var(--text-secondary); diff --git a/src/routes/hosts/[id]/+page.svelte b/src/routes/hosts/[id]/+page.svelte index 3745963..ab0d547 100644 --- a/src/routes/hosts/[id]/+page.svelte +++ b/src/routes/hosts/[id]/+page.svelte @@ -752,4 +752,17 @@ background: var(--surface-sunken); font-size: var(--text-xs); } + @media (max-width: 640px) { + .host-menu { + min-width: 0; + width: 100%; + } + .host-menu summary { + min-height: 44px; + } + .host-menu > div { + position: static; + min-width: 0; + } + } diff --git a/src/routes/servers/[name]/+page.svelte b/src/routes/servers/[name]/+page.svelte index 20f886e..b35c40e 100644 --- a/src/routes/servers/[name]/+page.svelte +++ b/src/routes/servers/[name]/+page.svelte @@ -1158,6 +1158,18 @@ clip-path: inset(50%); } @media (max-width: 640px) { + .server-actions { + min-width: 0; + width: 100%; + text-align: left; + } + .server-actions summary { + min-height: 44px; + } + .action-menu { + position: static; + min-width: 0; + } .panel-head, .alert { flex-wrap: wrap;