From c6545a11b12702a25608b7c36d02fe6f7430b4c6 Mon Sep 17 00:00:00 2001
From: me <ramvignesh-b@github.com>
Date: Fri, 8 May 2026 20:16:09 +0530
Subject: [PATCH] style: improve mobile responsiveness and a11y for
 WelcomeModal

---
 frontend/src/components/login/WelcomeModal.tsx | 18 +++++++++---------
 frontend/src/components/ui/Modal.tsx           |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/login/WelcomeModal.tsx b/frontend/src/components/login/WelcomeModal.tsx
index 97dd30d..7a2f502 100644
--- a/frontend/src/components/login/WelcomeModal.tsx
+++ b/frontend/src/components/login/WelcomeModal.tsx
@@ -15,7 +15,7 @@ export default function WelcomeModal({
   return (
     <>
       <Modal isOpen={true}>
-        <div className="flex flex-col items-center text-center gap-4">
+        <div className="flex flex-col items-center text-center gap-2 md:gap-4">
           <div className="bg-primary/10 p-4 rounded-full animate-pulse">
             <ShieldCheckIcon
               size={48}
@@ -25,25 +25,25 @@ export default function WelcomeModal({
           </div>
           <h3 className="font-display text-2xl font-bold text-primary">
             Welcome to &nbsp;
-            <Logo /> &nbsp;!
+            <Logo />
           </h3>
-          <p className="text-base-content/80 leading-relaxed">
+          <p className="text-sm md:text-base text-base-content/80 md:leading-relaxed">
             Before we begin, let me make a small promise.
             <HandPalmIcon
               size={18}
               className="inline text-primary"
               weight="fill"
             />
-            <span className="divider my-0 block"></span>
+            <span className="divider my-0"></span>
             Everything you write here is sealed with your password,{" "}
             <span className="font-display text-success">cryptographically</span>
             , before it leaves your hands.
             <br />A fancy way of saying, I couldn't if I tried.
           </p>
 
-          <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
-            <WarningIcon size={24} weight="fill" className="shrink-0 mt-0.5" />
-            <div className="text-sm font-medium text-primary-content">
+          <div className="alert alert-warning flex items-start gap-3 text-left py-3">
+            <WarningIcon size={24} weight="fill" className="shrink-0" />
+            <div className="text-xs md:text-sm font-medium text-primary-content">
               If you ever happen to forget your password, your letters are lost
               to time, forever.
               <br />
@@ -52,7 +52,7 @@ export default function WelcomeModal({
                 <a
                   href="https://www.privacyguides.org/en/passwords/"
                   target="_blank"
-                  className="link link-primary-content"
+                  className="link link-neutral!"
                   rel="noopener noreferrer"
                 >
                   password manager
@@ -76,7 +76,7 @@ export default function WelcomeModal({
       </Modal>
       <div className="absolute bottom-0 right-0 z-1000 font-sans w-full">
         <Saajan
-          position="top"
+          position="left"
           message={"I've lost words before.\nI know what it feels like."}
         />
       </div>
diff --git a/frontend/src/components/ui/Modal.tsx b/frontend/src/components/ui/Modal.tsx
index e3e29c9..bce8601 100644
--- a/frontend/src/components/ui/Modal.tsx
+++ b/frontend/src/components/ui/Modal.tsx
@@ -24,7 +24,7 @@ export function Modal({
       data-testid={testId}
       className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
     >
-      <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6 max-w-screen">
+      <div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
         {onClose && (
           <button
             type="button"