Make Manga-Cards smaller,

Manga-Cover covers whole Card

tranga-website/src/App.tsx

@@ -31,7 +31,7 @@ export default function App () {
                         <Badge invisible>
                             <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
                                 <CardCover sx={{margin:"var(--Card-padding)"}}>
-                                    <img src={"/blahaj.png"} style={{height:"400px", width:"300px"}} />
+                                    <img src={"/blahaj.png"} style={{height:"300px", width:"200px"}} />
                                 </CardCover>
                                 <CardCover sx={{
                                     background: 'rgba(234, 119, 246, 0.14)',
@@ -39,7 +39,7 @@ export default function App () {
                                     webkitBackdropFilter: 'blur(6.9px)',
                                 }}/>
                                 <CardContent>
-                                    <Box style={{height:"400px", width:"300px"}} >
+                                    <Box style={{height:"300px", width:"200px"}} >
                                         <Typography level={"h1"}>Search</Typography>
                                     </Box>
                                 </CardContent>

tranga-website/src/Components/Manga.tsx

@@ -12,7 +12,7 @@ import {
     Typography
 } from "@mui/joy";
 import IManga, {DefaultManga} from "../api/types/IManga.ts";
-import {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
+import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
 import {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
 import {ApiUriContext} from "../api/fetchApi.tsx";
 import AuthorTag from "./AuthorTag.tsx";
@@ -78,12 +78,20 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
         CoverRef.current.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
     }, [useManga, apiUri])
 
+    const width = "200px";
+    const height = "300px";
+
     const sideSx : SxProps = {
-        height: "400px",
-        width: "300px",
+        height: height,
+        width: width,
         position: "relative",
     }
 
+    const cssProps : CSSProperties = {
+        maxHeight: "100%",
+        maxWidth: "100%",
+    }
+
     const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
 
     return (
@@ -93,8 +101,8 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                 if(interactiveElements.find(x => x == target.localName) == undefined)
                     setExpanded(!expanded)}
             }>
-                <CardCover sx={{margin: "var(--Card-padding)"}}>
-                    <img style={{maxHeight:"100%",height:"400px",width:"300px"}} src="/blahaj.png" alt="Manga Cover"
+                <CardCover>
+                    <img style={cssProps} src="/blahaj.png" alt="Manga Cover"
                          ref={CoverRef}
                          onLoad={LoadMangaCover}
                          onResize={LoadMangaCover}/>
@@ -106,7 +114,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                 <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
                     <Box sx={sideSx}>
                         <Skeleton loading={loading}>
-                            <Link href={useManga.websiteUrl} level={"h1"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                            <Link href={useManga.websiteUrl} level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
                                 {useManga.name}
                             </Link>
                         </Skeleton>

tranga-website/src/Components/MangaList.tsx

@@ -40,7 +40,7 @@ export default function MangaList({connected, children}: {connected: boolean, ch
     }, [connected,]);
 
     return(
-        <Stack direction="row" spacing={1}>
+        <Stack direction="row" spacing={1} flexWrap={"wrap"}>
             {children}
             {jobList.map((job) => (
                 <MangaFromId key={job.mangaId} mangaId={job.mangaId}>

tranga-website/src/Components/Search.tsx

@@ -145,7 +145,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
                     </StepIndicator>}>
                     <Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results.length}</Chip>}>Results</Typography>
                     <Skeleton loading={resultsLoading}>
-                        <Stack direction={"row"} spacing={1}>
+                        <Stack direction={"row"} spacing={1} flexWrap={"wrap"}>
                             {results.map((result) =>
                                 <Manga key={result.mangaId} manga={result}>
                                     <Select