From fb20b0444f5058cc57a3edbd77e2fd6bffe76409 Mon Sep 17 00:00:00 2001
From: ArvinFarrelP <farel877629@gmail.com>
Date: Fri, 3 Apr 2026 21:51:08 +0700
Subject: [PATCH 1/2] fix(navbar): remove key prop causing unnecessary remount
 in mobile navbar

---
 surfsense_web/components/homepage/navbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index 6ed5265bc..5dfacafb6 100644
--- a/surfsense_web/components/homepage/navbar.tsx
+++ b/surfsense_web/components/homepage/navbar.tsx
@@ -143,7 +143,6 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 		<motion.div
 			ref={navRef}
 			animate={{ borderRadius: open ? "4px" : "2rem" }}
-			key={String(open)}
 			className={cn(
 				"relative mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
 				isScrolled

From bb84bb25a313be2397947a1b6a9bb9ac7e2db1d4 Mon Sep 17 00:00:00 2001
From: ArvinFarrelP <farel877629@gmail.com>
Date: Fri, 3 Apr 2026 22:11:21 +0700
Subject: [PATCH 2/2] perf(images): add sizes prop to improve Next.js image
 loading

---
 surfsense_web/components/homepage/features-bento-grid.tsx | 1 +
 surfsense_web/components/tool-ui/image/index.tsx          | 1 +
 surfsense_web/mdx-components.tsx                          | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/surfsense_web/components/homepage/features-bento-grid.tsx b/surfsense_web/components/homepage/features-bento-grid.tsx
index 07fe4fc22..32cbe2582 100644
--- a/surfsense_web/components/homepage/features-bento-grid.tsx
+++ b/surfsense_web/components/homepage/features-bento-grid.tsx
@@ -408,6 +408,7 @@ const AudioCommentIllustration = () => (
 			src="/homepage/comments-audio.webp"
 			alt="Audio Comment Illustration"
 			fill
+			sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
 			className="object-cover"
 		/>
 	</div>
diff --git a/surfsense_web/components/tool-ui/image/index.tsx b/surfsense_web/components/tool-ui/image/index.tsx
index 81c55d10a..9c39f4928 100644
--- a/surfsense_web/components/tool-ui/image/index.tsx
+++ b/surfsense_web/components/tool-ui/image/index.tsx
@@ -307,6 +307,7 @@ export function Image({
 							src={src}
 							alt={alt}
 							fill
+							sizes="(max-width: 512px) 100vw, 512px"
 							className={cn(
 								"transition-transform duration-300",
 								fit === "cover" ? "object-cover" : "object-contain",
diff --git a/surfsense_web/mdx-components.tsx b/surfsense_web/mdx-components.tsx
index 9dedbd20f..8297f732d 100644
--- a/surfsense_web/mdx-components.tsx
+++ b/surfsense_web/mdx-components.tsx
@@ -15,8 +15,9 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
 		img: ({ className, alt, ...props }: React.ComponentProps<"img">) => (
 			<Image
 				{...(props as ImageProps)}
-				className={cn("rounded-md border", className)}
 				alt={alt ?? ""}
+				sizes="(max-width: 768px) 100vw, 896px"
+				className={cn("rounded-md border", className)}
 			/>
 		),
 		Video: ({ className, ...props }: React.ComponentProps<"video">) => (