fix: UI overflowing issues

frontend/src/components/app-wrapper/index.tsx

@@ -3,7 +3,7 @@ import { Component, ParentProps } from "solid-js";
 export const AppWrapper: Component<ParentProps> = (props) => {
 	return (
 		<div class="w-full flex flex-col items-center h-screen">
-			<div class="container flex flex-col w-full h-full gap-4 m-4">
+			<div class="container flex flex-col w-full h-full gap-4 p-4">
 				{props.children}
 			</div>
 		</div>

frontend/src/components/app-wrapper/with-topbar-and-dock.tsx

@@ -5,9 +5,13 @@ import { Dock } from "./dock";
 export const WithTopbarAndDock: Component<ParentProps> = (props) => {
 	return (
 		<>
-			<Topbar />
-			{props.children}
-			<Dock />
+			<div class="">
+				<Topbar />
+			</div>
+			<div class="h-full overflow-y-auto">{props.children}</div>
+			<div class="">
+				<Dock />
+			</div>
 		</>
 	);
 };

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">