From c1956bfb2df20aa1117940b4435164b1d388233f Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 10 Mar 2026 16:11:14 +0100
Subject: [PATCH] feat: enhance WelcomeBanner with settings button and update
 styles for better layout

---
 app/[locale]/page.tsx            |  4 +++-
 app/globals.css                  | 10 ++++++++++
 components/email/email-list.tsx  |  2 +-
 components/ui/welcome-banner.tsx | 29 ++++++++++++++++++++---------
 locales/en/common.json           |  1 +
 5 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 1f600100..58d80e77 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1044,6 +1044,7 @@ export default function Home() {
               )}
             </div>
 
+            <div className="flex-1 min-h-0 flex flex-col">
             <WelcomeBanner />
 
             <ErrorBoundary fallback={EmailListErrorFallback}>
@@ -1100,9 +1101,10 @@ export default function Home() {
                   selectEmail(email);
                   await handleUndoSpam();
                 }}
-                className="flex-1"
+                className="flex-1 min-h-0"
               />
             </ErrorBoundary>
+            </div>
           </div>
 
           {/* Email list resize handle (desktop only) */}
diff --git a/app/globals.css b/app/globals.css
index 0ccda18a..97c17dc5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -92,6 +92,10 @@ body {
   min-width: 100%;
 }
 
+.email-content-text {
+  padding: 1rem 1.25rem;
+}
+
 .email-content {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 0.9375rem;
@@ -100,6 +104,12 @@ body {
   max-width: none;
   overflow-wrap: break-word;
   word-wrap: break-word;
+  padding: 1rem 1.25rem;
+}
+
+/* Remove padding for rich HTML emails with table-based layouts */
+.email-content:has(> table) {
+  padding: 0;
 }
 
 .email-content p {
diff --git a/components/email/email-list.tsx b/components/email/email-list.tsx
index 78ce4113..b026edc5 100644
--- a/components/email/email-list.tsx
+++ b/components/email/email-list.tsx
@@ -210,7 +210,7 @@ export function EmailList({
   }, [listDensity, showPreview]);
 
   return (
-    <div className={cn("flex flex-col h-full", className)}>
+    <div className={cn("flex flex-col min-h-0", className)}>
       {/* Batch Actions Toolbar */}
       <div
         className={cn(
diff --git a/components/ui/welcome-banner.tsx b/components/ui/welcome-banner.tsx
index 21042adc..25a498f6 100644
--- a/components/ui/welcome-banner.tsx
+++ b/components/ui/welcome-banner.tsx
@@ -2,13 +2,15 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
-import { X, Lightbulb } from "lucide-react";
+import { X, Lightbulb, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useRouter } from "@/i18n/navigation";
 
 const ONBOARDING_KEY = "onboarding_completed";
 
 export function WelcomeBanner() {
   const t = useTranslations("welcome");
+  const router = useRouter();
   const [visible, setVisible] = useState(false);
   const [dismissed, setDismissed] = useState(false);
 
@@ -42,24 +44,24 @@ export function WelcomeBanner() {
     <div
       role="complementary"
       aria-label={t("title")}
-      className={`mx-4 mt-3 mb-1 rounded-lg border border-border bg-background shadow-sm transition-all duration-300 ease-out ${
-        dismissed ? "opacity-0 scale-95 pointer-events-none" : "opacity-100 scale-100"
+      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"
       }`}
       onTransitionEnd={() => {
         if (dismissed) setVisible(false);
       }}
     >
-      <div className="p-4">
+      <div className="px-4 py-3">
         <div className="flex items-start justify-between gap-3">
           <div className="flex items-start gap-3">
             <div className="flex-shrink-0 mt-0.5 p-1.5 rounded-md bg-primary/10">
               <Lightbulb className="w-4 h-4 text-primary" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <h3 className="text-sm font-medium text-foreground">
                 {t("title")}
               </h3>
-              <ul className="space-y-1.5 text-sm text-muted-foreground">
+              <ul className="space-y-1 text-sm text-muted-foreground">
                 <li>{t("tip_compose")}</li>
                 <li>{t("tip_shortcuts")}</li>
                 <li>{t("tip_sidebar")}</li>
@@ -75,12 +77,21 @@ export function WelcomeBanner() {
             <X className="w-4 h-4" />
           </button>
         </div>
-        <div className="mt-3 flex justify-end">
+        <div className="mt-2.5 flex justify-end gap-2">
           <Button
-            variant="ghost"
+            variant="outline"
+            size="sm"
+            onClick={() => { dismiss(); router.push('/settings'); }}
+            className="text-xs h-7"
+          >
+            <Settings className="w-3.5 h-3.5 mr-1" />
+            {t("settings")}
+          </Button>
+          <Button
+            variant="default"
             size="sm"
             onClick={dismiss}
-            className="text-xs"
+            className="text-xs h-7"
           >
             {t("got_it")}
           </Button>
diff --git a/locales/en/common.json b/locales/en/common.json
index c868b301..eb5f75fa 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -1426,6 +1426,7 @@
     "tip_sidebar": "Find Calendar, Contacts and Settings in the sidebar menu",
     "tip_settings": "Customize your experience in Settings",
     "got_it": "Got it",
+    "settings": "Settings",
     "dismiss": "Dismiss"
   }
 }