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 ( return (
<> <>
<div <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)" style="background-color: var(--surface-secondary)"
> >
<div <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"} aria-busy={isLoading() ? "true" : "false"}
> >
<Show when={props.onOpenRemoteAccess}> <Show when={props.onOpenRemoteAccess}>

View File

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

View File

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