Ensure welcome and palette layouts wrap on phone

This commit is contained in:
Shantur Rathore
2025-12-14 12:40:00 +00:00
parent cd4afb5314
commit 8155fc9956
3 changed files with 7 additions and 7 deletions

View File

@@ -224,11 +224,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
return (
<>
<div
class="flex h-screen w-full items-start justify-center overflow-hidden py-6 relative"
class="flex h-screen w-full items-start justify-center overflow-hidden py-6 px-4 sm:px-6 relative"
style="background-color: var(--surface-secondary)"
>
<div
class="w-full max-w-3xl h-full px-8 pb-2 flex flex-col overflow-hidden"
class="w-full max-w-3xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
aria-busy={isLoading() ? "true" : "false"}
>
<Show when={props.onOpenRemoteAccess}>

View File

@@ -314,8 +314,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
return (
<div class="flex-1 flex flex-col overflow-hidden bg-surface-secondary">
<div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto">
<div class="flex-1 flex flex-col gap-4 min-h-0">
<div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto min-w-0">
<div class="flex-1 flex flex-col gap-4 min-h-0 min-w-0">
<Show
when={parentSessions().length > 0}
fallback={

View File

@@ -702,7 +702,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
when={!isPhoneLayout()}
fallback={
<div class="flex flex-col w-full gap-1.5">
<div class="flex items-center justify-between gap-2">
<div class="flex flex-wrap items-center justify-between gap-2 w-full">
<IconButton
ref={setLeftToggleButtonEl}
color="inherit"
@@ -715,7 +715,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
{leftAppBarButtonIcon()}
</IconButton>
<div class="flex items-center gap-2 justify-center">
<div class="flex flex-wrap items-center gap-1 justify-center">
<button
type="button"
class="connection-status-button px-2 py-0.5 text-xs"
@@ -749,7 +749,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
</IconButton>
</div>
<div class="flex items-center justify-center gap-2 pb-1">
<div class="flex flex-wrap items-center justify-center gap-2 pb-1">
<div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
<span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
<span class="font-semibold text-primary">{formattedUsedTokens()}</span>