Fixed the responsiveness for new layout

.prettierrc

@@ -4,6 +4,6 @@
   "plugins": [
     "prettier-plugin-tailwindcss"
   ],
-  "printWidth": 120,
+  "printWidth": 140,
   "trailingComma": "es5"
 }

src/components/comparison.tsx

@@ -51,15 +51,8 @@ const Comparison = ({ cpus }: { cpus: [CPU, CPU] }) => {
 						<tr className="border-b border-black">
 							<th className="p-2 text-left">Feature</th>
 							{cpus.map((cpu) => (
-								<th
-									className="p-2 text-left underline transition-colors hover:text-white"
-									key={cpu.name}
-								>
-									<Link
-										href={cpu?.ref ?? `/cpu/${cpu.name?.replace(/ /g, "-")}`}
-										target="_blank"
-										rel="noreferrer"
-									>
+								<th className="p-2 text-left underline transition-colors hover:text-white" key={cpu.name}>
+									<Link href={cpu?.ref ?? `/cpu/${cpu.name?.replace(/ /g, "-")}`} target="_blank" rel="noreferrer">
 										{cpu.name}
 									</Link>
 								</th>
@@ -92,8 +85,8 @@ const RenderComparison: (cpus: [CPU, CPU], list: FeatureList, ...keys: string[])
 					return (
 						<tr key={key}>
 							<td>{feature.title}</td>
-							<td>{cpu1[key] as string}</td>
-							<td>{cpu2[key] as string}</td>
+							<td className="text-center md:text-left">{cpu1[key] as string}</td>
+							<td className="text-center md:text-left">{cpu2[key] as string}</td>
 						</tr>
 					);
 				case "number": {
@@ -102,18 +95,14 @@ const RenderComparison: (cpus: [CPU, CPU], list: FeatureList, ...keys: string[])
 					return (
 						<tr key={key}>
 							<td>{feature.title}</td>
-							<td>
+							<td className="text-center md:text-left">
 								<span className={colorDiff(a, b, feature.reverse === true)}>
-									{feature.prefix === false
-										? (a ?? "N/A") + (feature?.unit || "")
-										: formatNumber(a, feature.unit || "")}
+									{feature.prefix === false ? (a ?? "N/A") + (feature?.unit || "") : formatNumber(a, feature.unit || "")}
 								</span>
 							</td>
-							<td>
+							<td className="text-center md:text-left">
 								<span className={colorDiff(a, b, feature.reverse !== true)}>
-									{feature.prefix === false
-										? (b ?? "N/A") + (feature?.unit || "")
-										: formatNumber(b, feature.unit || "")}
+									{feature.prefix === false ? (b ?? "N/A") + (feature?.unit || "") : formatNumber(b, feature.unit || "")}
 								</span>
 							</td>
 						</tr>
@@ -132,7 +121,7 @@ const FeatureNames: FeatureList = {
 			<tr key="cores">
 				<td className="p-2">Cores</td>
 				{cpus.map((cpu, i) => (
-					<td className="p-2" key={cpu.name}>
+					<td className="p-2 text-center md:text-left" key={cpu.name}>
 						<span className={colorDiff(cpu.cores.total, cpus[1 - i].cores.total)}>
 							{cpu.cores.performance !== null && cpu.cores.efficient !== null ? (
 								<>
@@ -170,7 +159,7 @@ const FeatureNames: FeatureList = {
 		title: "TDP",
 		type: "number",
 		unit: "W",
-		reverse: true
+		reverse: true,
 	},
 	lithography: {
 		title: "Lithography",
@@ -183,11 +172,10 @@ const FeatureNames: FeatureList = {
 			<tr key="marketSegment">
 				<td className="p-2">Market Segment</td>
 				{cpus.map((cpu) => {
-					const hidePrice =
-						cpu.marketSegment == "embedded" || (cpu.marketSegment == "mobile" && cpu.manufacturer == "amd");
+					const hidePrice = cpu.marketSegment == "embedded" || (cpu.marketSegment == "mobile" && cpu.manufacturer == "amd");
 					return (
 						<td
-							className={`p-2 ${hidePrice ? "text-center" : ""}`}
+							className={`p-2 ${hidePrice ? "text-center" : "text-center md:text-left"} `}
 							key={cpu.name}
 							rowSpan={hidePrice ? 2 : 1}
 						>
@@ -205,12 +193,11 @@ const FeatureNames: FeatureList = {
 			<tr key="MSRP">
 				<td className="p-2">Price</td>
 				{cpus.map((cpu, i) => {
-					const hidePrice =
-						cpu.marketSegment == "embedded" || (cpu.marketSegment == "mobile" && cpu.manufacturer == "amd");
+					const hidePrice = cpu.marketSegment == "embedded" || (cpu.marketSegment == "mobile" && cpu.manufacturer == "amd");
 					if (hidePrice) return <></>;
 
 					return (
-						<td className="p-2" key={cpu.name}>
+						<td className="p-2 text-center md:text-left" key={cpu.name}>
 							<span className={colorDiff(cpu.MSRP, cpus[1 - i].MSRP, true)} id={"price-" + i}>
 								{formatNumber(cpu.MSRP, "$")}
 							</span>

src/components/footer.tsx

@@ -1,8 +1,7 @@
 const Footer = () => (
-	<footer className="flex min-h-[10vh] w-full flex-col items-center gap-x-4 gap-y-2 border-t bg-slate-700/25 py-4 text-center md:flex-row md:justify-center">
+	<footer className="flex h-full w-full flex-col items-center gap-x-4 gap-y-2 border-t bg-slate-700/25 py-4 text-center md:flex-row md:justify-center">
 		<p className="text-white">
 			Made by
-			{/* eslint-disable-next-line react/jsx-no-target-blank */}
 			<a className="text-blue-500" href="https://pkozak.org" target="_blank">
 				{" "}
 				Piotr Kozak

src/components/navbar.tsx

@@ -8,12 +8,16 @@ const Navbar = () => (
 					<Link href="/">PrimeCPU</Link>
 				</h1>
 			</div>
-			<div className="flex items-center">
-				<Link href="/" className="rounded-md px-4 py-2 text-lg font-semibold hover:bg-gray-800/60">Comparison</Link>
-				<Link href="/list" className="rounded-md px-4 py-2 text-lg font-semibold hover:bg-gray-800/60">List</Link>
+			<div className="flex items-center gap-2">
+				<Link href="/" className="rounded-md px-1 py-2 text-lg font-semibold hover:bg-gray-800/60 md:px-4">
+					Comparison
+				</Link>
+				<Link href="/list" className="rounded-md px-1 py-2 text-lg font-semibold hover:bg-gray-800/60 md:px-4">
+					List
+				</Link>
 			</div>
 		</div>
 	</nav>
 );
 
-export default Navbar;
+export default Navbar;

src/components/selector.tsx

@@ -13,7 +13,7 @@ const Selector = ({ setCPU, urlId }: SelectorProps) => {
 			manufacturer: "intel",
 			model: "",
 			state: "idle",
-		}
+		},
 	);
 
 	const [tempModel, setTempModel] = useState("");
@@ -35,7 +35,7 @@ const Selector = ({ setCPU, urlId }: SelectorProps) => {
 		if (selection.state === "loading") return () => clearInterval(intervalRef.current);
 
 		if (barVisible) {
-			// The addional 30 is for the delay before the bar starts to decrease for the user
+			// The additional 30 is for the delay before the bar starts to decrease for the user
 			let percent = 130;
 			intervalRef.current = window.setInterval(async () => {
 				percent -= 1;
@@ -79,7 +79,7 @@ const Selector = ({ setCPU, urlId }: SelectorProps) => {
 				const url = new URL(window.location.href);
 				url.searchParams.set(
 					urlId,
-					`${encodeURI(selection.manufacturer)}-${encodeURI(selection.model.toLowerCase())}`
+					`${encodeURI(selection.manufacturer)}-${encodeURI(selection.model.toLowerCase())}`,
 				);
 				window.history.pushState({}, "", url.toString());
 
@@ -118,8 +118,8 @@ const Selector = ({ setCPU, urlId }: SelectorProps) => {
 						if (cpu.error) {
 							toast.error(
 								cpu.error.code === 504
-									? "The server is taking too long to respond. Try again later."
-									: cpu.error.text
+								? "The server is taking too long to respond. Try again later."
+								: cpu.error.text,
 							);
 							return;
 						}
@@ -142,11 +142,7 @@ const Selector = ({ setCPU, urlId }: SelectorProps) => {
 	};
 
 	return (
-		<div
-			className={`relative flex items-center gap-3 rounded-md border p-4 transition-colors ${getMarkings(
-				selection.state
-			)}`}
-		>
+		<div className={`relative flex items-center gap-3 rounded-md border p-4 transition-colors ${getMarkings(selection.state)}`}>
 			<select
 				value={selection.manufacturer}
 				disabled={selection.state === "loading" || refetch}
@@ -175,7 +171,7 @@ const Selector = ({ setCPU, urlId }: SelectorProps) => {
 					onBlur={() => setShowResults(false)}
 					onChange={(e) => setTempModel(e.target.value.trimStart())}
 					placeholder={selection.manufacturer === "intel" ? "Core i5-7400" : "Ryzen 7 5800H"}
-					className="rounded-md bg-gray-200 p-2 disabled:cursor-not-allowed disabled:opacity-75"
+					className="w-48 rounded-md bg-gray-200 p-2 disabled:cursor-not-allowed disabled:opacity-75 sm:w-52"
 				/>
 
 				<Transition
@@ -188,11 +184,7 @@ const Selector = ({ setCPU, urlId }: SelectorProps) => {
 					leaveFrom="opacity-100"
 					leaveTo="opacity-0"
 				>
-					<div
-						className={`absolute top-full z-20 flex w-max rounded-lg bg-white p-2 shadow-md transition-all ${
-							previewPositions[omittedSearch.length - 1]
-						}`}
-					>
+					<div className={`absolute left-5 top-full z-20 flex w-max flex-col rounded-lg bg-white p-2 shadow-md transition-all md:left-0 md:flex-row ${previewPositions[omittedSearch.length - 1]}`}>
 						{omittedSearch.map((result) => (
 							<div
 								key={result}