fix: stop the welcome banner and message list running under the bottom bar on short screens

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}

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"