Table fixes

src/components/shared/HeaderPage.tsx

@@ -3,23 +3,41 @@ import UrlDropdown from "./UrlDropdown"
 
 const HeaderPage = ({ title }: { title: string }) => {
     return (
-        <div className="flex space-x-4 my-0 md:my-4 lg:flex-row flex-col items-baseline">
+        <div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4">
-            <h1 className="text-xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
+            <div className="flex items-baseline gap-4 flex-wrap">
+                <h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
 
-            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                {/* First SVG dot */}
-            <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                <svg 
-            </svg>
+                    xmlns="http://www.w3.org/2000/svg" 
+                    width="4" 
+                    height="4" 
+                    viewBox="0 0 4 4" 
+                    fill="none"
+                    className="flex-shrink-0 -translate-y-1"
+                >
+                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                </svg>
 
-            <UrlDropdown />
+                <UrlDropdown />
 
-            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                {/* Second SVG dot */}
-                <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                <svg 
-            </svg>
+                    xmlns="http://www.w3.org/2000/svg" 
+                    width="4" 
+                    height="4" 
+                    viewBox="0 0 4 4" 
+                    fill="none"
+                    className="flex-shrink-0 -translate-y-1"
+                >
+                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                </svg>
 
-            <div className="flex gap-1">
+                <div className="flex gap-1 flex-wrap">
-                <MetricCard value="12" label="DR" valueChange="+1" size="sm" />
+                    <MetricCard value="12" label="DR" valueChange="+1" size="sm" />
-                <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
+                    <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
-                <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
+                    <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
+                </div>
             </div>
         </div>
     )

src/components/shared/MetricCard.tsx

@@ -46,11 +46,11 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
 
             <div className="flex-1">
                 <div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2 p-[3px] justify-between `}>
-                    <span className="text-sm text-gray-400">{!tooltipText && label}</span>
+                    <span className="text-sm font-semibold text-[#787B91]">{!tooltipText && label}</span>
 
-                    <span className="text-[#787B91] bg-gray-200 px-1 py-0 rounded-md">{value}</span>
+                    <span className="text-[#787B91] font-semibold bg-gray-200 px-1 py-0 rounded-md">{value}</span>
                     {valueChange && (
-                        <div className="flex items-center text-md font-semibold text-green-500">
+                        <div className="flex items-center text-md font-medium text-[#029056]">
                             {Icon && (
                                 <ArrowUp size={14} className="inline-block mr-1" />
                             )}

src/pages/Portfolio.tsx

@@ -144,7 +144,7 @@ function Portfolio() {
                     {/* Tables */}
                     {categories.map((cat, idx) => (
                         <div key={idx} className='mb-8 last:mb-0'>
-                            <div className={`px-4 py-3 rounded-lg font-bold text-sm ${cat.color} mb-3`}>
+                            <div className={`px-4 py-1 rounded-lg font-bold text-sm m-2 ${cat.color} mb-3`}>
                                 <div className='flex items-center gap-3'>
                                     <div className='flex items-center gap-2'>
                                         {/* <span className='text-lg'>{cat.name === 'Social' ? '💬' : cat.name === 'Citation' ? '📊' : '🌐'}</span> */}
@@ -154,7 +154,7 @@ function Portfolio() {
                                     <span className='text-md font-bold bg-white p-1 px-2  rounded-full'>{cat.rows.length}</span>
                                 </div>
                             </div>
-                            <div className='bg-white rounded-xl border overflow-x-auto shadow-sm'>
+                            <div className='bg-white  border-l-0 border-r-0 border last:border-b-0 overflow-x-auto shadow-sm'>
                                 <table className='w-full min-w-[800px]'>
                                     <tbody>
                                         {cat.rows.map((row, rIdx) => (