Update responsive page

src/App.css

@@ -26,6 +26,7 @@
   
   @media (min-width: 1600px) {
     .container {
-      max-width: 1824px;
+      max-width: 1600px;
     }
   }
+  

src/components/DashboardGrid.tsx

@@ -425,7 +425,7 @@ export default function DashboardGrid() {
                                         {card.title}
                                     </div>
                                     {/* Tags */}
-                                    <div className="mt-3 flex flex-row gap-2 flex-wrap justify-center">
+                                    <div className="mt-2 flex flex-row gap-2 flex-wrap justify-center">
                                         {card.tags.map((tag, i) => (
                                             <TagComponent
                                                 key={i}
@@ -440,7 +440,7 @@ export default function DashboardGrid() {
                                         </div>
                                     )}
                                     {card.paused && (
-                                        <div className="mt-3 text-center">
+                                        <div className="mt-1 text-center">
                                             <div className="text-gray-400 text-sm">Campaign paused</div>
                                             <button className="text-blue-600 text-sm hover:underline transition-all duration-300 hover:text-blue-800">Resume</button>
                                         </div>

src/components/Strategy/ProgressMetrics.tsx

@@ -37,10 +37,10 @@ function ProgressMetrics() {
                     {/* 60% Progress */}
                     <div className="w-[100%]">
                         <div className="flex items-center justify-between">
-                            <div className="text-4xl font-bold text-gray-900 mb-1">60%</div>
+                            <div className="text-lg 2xl:text-4xl font-bold text-gray-900 mb-1">60%</div>
-                            <div className="text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
+                            <div className="text-lg 2xl:text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
                         </div>
-                        <div className="text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
+                        <div className="text-xs 2xl:text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
                         {/* Progress bar */}
                         <div className="w-70 h-3 bg-gray-200 rounded-full overflow-hidden">
                             <div
@@ -52,15 +52,15 @@ function ProgressMetrics() {
 
                 </div>
 
-                <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-32 gap-3">
+                <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-12 lg:gap-6 gap-3">
                     {/* 75% Keyword Visibility */}
                     <div className="w-[30%]">
-                        <div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
+                        <div className="text-xl 2xl:text-3xl font-bold text-gray-900 mb-1">75%</div>
                         <div className="text-sm text-gray-500">Keyword Visibility</div>
                     </div>
 
                     <div className="flex items-center gap-3 w-[100%]">
-                        <div className="flex items-center gap-3">
+                        <div className="flex items-center gap-3 flex-wrap">
                             <MetricCard
                                 img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />
 

src/components/shared/MetricCard.tsx

@@ -12,7 +12,7 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}>
                 <div className={`${extraStyle}`}>
-                    <img src={Img} alt="Img" className="w-10 h-10" />
+                    <img src={Img} alt="Img" className="w-8 2xl:w-10 h-8 2xl:h-10" />
                 </div>
                 <div className="">
                     {tooltipText && (

src/components/shared/UrlDropdown.tsx

@@ -15,7 +15,7 @@ export default function UrlDropdown() {
     const [selected, setSelected] = useState(urlOptions[0]);
 
     const toggleDropdown = () => setIsOpen((prev) => !prev);
-    const handleSelect = (url) => {
+    const handleSelect = (url: string) => {
         setSelected(url);
         setIsOpen(false);
     };
@@ -24,7 +24,7 @@ export default function UrlDropdown() {
         <div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
             {/* Input box */}
             <div
-                className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer focus:border-2 focus:border-blue-500"
+                className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded cursor-pointer focus:border-2 focus:border-blue-500"
                 onClick={toggleDropdown}
             >
                 <span className="truncate text-gray-800">{selected}</span>

tailwind.config.js

@@ -16,7 +16,7 @@ export default {
         lg: '1024px',
         xl: '1400px',
         '2xl': '1800px',
-        // '3xl': '1800px',
+        '3xl': '2000px',
       },
     },
   },