From 319d9858d46991e36d080d3391360fa6726bb90d Mon Sep 17 00:00:00 2001
From: Ram Shukla <codewithrex@gmail.com>
Date: Tue, 30 Dec 2025 21:07:46 +0530
Subject: [PATCH] fix: improve Insights empty state responsive design at 320px
 (#26203)

* fix: improve Insights empty state responsive design at 320px

* Update apps/web/modules/shell/UpgradeTip.tsx

Co-authored-by: Keith Williams <keithwillcode@gmail.com>

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
---
 apps/web/modules/shell/UpgradeTip.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/modules/shell/UpgradeTip.tsx b/apps/web/modules/shell/UpgradeTip.tsx
index 87a34353f9..8545182bdc 100644
--- a/apps/web/modules/shell/UpgradeTip.tsx
+++ b/apps/web/modules/shell/UpgradeTip.tsx
@@ -45,18 +45,18 @@ export function UpgradeTip({
   return (
     <>
       <div className="relative flex min-h-[295px] w-full items-center justify-between overflow-hidden rounded-lg pb-10">
-        <picture className="absolute min-h-[295px] w-full rounded-lg object-cover">
-          <source srcSet={imageSrc} media="(prefers-color-scheme: dark)" />
+         <picture className="absolute min-h-full w-full rounded-lg object-cover">
+          {" "}
+                    <source srcSet={imageSrc} media="(prefers-color-scheme: dark)" />
           <img
-            className="absolute min-h-[295px] w-full select-none rounded-lg object-cover object-left md:object-center"
-            src={imageSrc}
+ className="absolute min-h-full w-full select-none rounded-lg object-cover object-left md:object-center"            src={imageSrc}
             loading="lazy"
             alt={title}
           />
         </picture>
-        <div className="relative my-4 px-8 pb-4 sm:px-14">
-          <h1 className={classNames("font-cal mt-4 text-3xl")}>{title}</h1>
-          <p className={classNames("mb-8 mt-4 max-w-sm")}>{description}</p>
+         <div className="relative my-4 w-full px-4 pb-4 sm:px-8 md:px-14">
+          <h1 className={classNames("font-cal mt-4 text-2xl sm:text-3xl")}>{title}</h1>
+          <p className={classNames("mb-8 mt-4 max-w-sm text-sm sm:text-base")}>{description}</p>
           {buttons}
         </div>
       </div>