fix: UI overflowing issues

frontend/src/pages/front/Recent.tsx

@@ -2,6 +2,8 @@ import { Component, For } from "solid-js";
 import { ImageComponent } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 
+const NUMBER_OF_MAX_RECENT_IMAGES = 10;
+
 export const Recent: Component = () => {
 	const { userImages } = useSearchImageContext();
 
@@ -11,7 +13,7 @@ export const Recent: Component = () => {
 				(a, b) =>
 					new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
 			)
-			.slice(0, 10);
+			.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
 
 	return (
 		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">