From 9e12266e1b9dc5a63ff0f56f36010e723cd04c2a Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 06:00:20 +0100
Subject: [PATCH] fix: stop the welcome banner and message list running under
 the bottom bar on short screens

---
 components/mail/mail-app.tsx     | 2 +-
 components/ui/welcome-banner.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/mail/mail-app.tsx b/components/mail/mail-app.tsx
index d58c007a2..2b512afad 100644
--- a/components/mail/mail-app.tsx
+++ b/components/mail/mail-app.tsx
@@ -5351,7 +5351,7 @@ export function MailApp({ linkSegments: routeSegments }: MailAppProps = {}) {
             {!isScheduledView && <MessageListTabs panelId={messageListPanelId} />}
             <WelcomeBanner />
 
-            <div {...messageListPanelProps} className="flex-1 min-h-0 flex flex-col">
+            <div {...messageListPanelProps} className="flex-1 min-h-0 flex flex-col overflow-hidden">
             <ErrorBoundary fallback={EmailListErrorFallback}>
               <EmailList
                 onFindFromSender={mvShell ? (sender) => void handleSelectContactSuggestion(sender, 'from') : undefined}
diff --git a/components/ui/welcome-banner.tsx b/components/ui/welcome-banner.tsx
index e45338cf4..c72aa60bd 100644
--- a/components/ui/welcome-banner.tsx
+++ b/components/ui/welcome-banner.tsx
@@ -71,7 +71,7 @@ export function WelcomeBanner() {
       role="complementary"
       aria-label={t("title")}
       className={`border-b border-border bg-accent/30 transition-all duration-300 ease-out ${
-        dismissed ? "opacity-0 scale-y-0 max-h-0 pointer-events-none" : "opacity-100 scale-y-100 max-h-96"
+        dismissed ? "opacity-0 scale-y-0 max-h-0 pointer-events-none" : "opacity-100 scale-y-100 max-h-[min(24rem,40dvh)] [@media(max-height:480px)]:max-h-[30dvh] overflow-y-auto"
       }`}
       onTransitionEnd={() => {
         if (dismissed) setVisible(false);
@@ -99,7 +99,7 @@ export function WelcomeBanner() {
             <X />
           </IconButton>
         </div>
-        <div className="mt-2.5 flex justify-end gap-2">
+        <div className="mt-2.5 flex flex-wrap justify-end gap-2">
           <Button
             variant="outline"
             size="xs"