fixed icon sizes

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview-tab.tsx

@@ -850,6 +850,7 @@ export function WebsiteOverviewTab({
 			accessorKey: 'name',
 			header: 'Browser',
 			cell: createTechnologyCell('browser'),
+			size: 180,
 		},
 		{
 			id: 'visitors',
@@ -885,6 +886,7 @@ export function WebsiteOverviewTab({
 			accessorKey: 'name',
 			header: 'Operating System',
 			cell: createTechnologyCell('os'),
+			size: 200,
 		},
 		{
 			id: 'visitors',

apps/dashboard/components/icon.tsx

@@ -177,8 +177,16 @@ export function PublicIcon({
 
 	return (
 		<div
-			className={cn('relative flex-shrink-0', className)}
-			style={{ width: iconSize, height: iconSize }}
+			className={cn(
+				'relative flex-shrink-0 overflow-hidden rounded',
+				className
+			)}
+			style={{
+				width: iconSize,
+				height: iconSize,
+				minWidth: iconSize,
+				minHeight: iconSize,
+			}}
 		>
 			<Image
 				alt={name}
@@ -258,16 +266,24 @@ export function CountryFlag({
 	}
 
 	return (
-		<Image
-			alt={`${country} flag`}
-			className={cn('h-4 w-6 rounded-sm object-cover', className)}
-			height={iconSize}
-			onError={(e) => {
-				const img = e.target as HTMLImageElement;
-				img.style.display = 'none';
-			}}
-			src={`https://purecatamphetamine.github.io/country-flag-icons/3x2/${country.toUpperCase()}.svg`}
-			width={24}
-		/>
+		<div
+			className={cn(
+				'relative flex-shrink-0 overflow-hidden rounded-sm',
+				className
+			)}
+			style={{ width: 24, height: iconSize, minWidth: 24, minHeight: iconSize }}
+		>
+			<Image
+				alt={`${country} flag`}
+				className={cn('object-cover')}
+				height={iconSize}
+				onError={(e) => {
+					const img = e.target as HTMLImageElement;
+					img.style.display = 'none';
+				}}
+				src={`https://purecatamphetamine.github.io/country-flag-icons/3x2/${country.toUpperCase()}.svg`}
+				width={24}
+			/>
+		</div>
 	);
 }