fixed resizing and added css from mon patcher so it looks prettier

app/(authenticated)/chunithm/page.tsx

@@ -137,7 +137,7 @@ const Page = async () => {
         <TabsContent value="HotPlays">
           <ChunithmHotPlays chuniProfileHotPlays={HotChuniPlays} />
         </TabsContent>
-        <TabsContent value="Patcher">
+        <TabsContent className="" value="Patcher">
           <Patcher />
         </TabsContent>
       </Tabs>

app/globals.css

@@ -328,3 +328,38 @@ video {
 .avatar_item_l img {
   transform: translate(-100px, 0px);
 }
+
+
+.icons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 180px);
+  grid-auto-flow: dense;
+  align-items: stretch;
+  margin: 0 auto;
+  text-align: center;
+  justify-content: center;
+
+}
+
+.gameicon,
+.patchContainer {
+    border-radius: 2px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    color: inherit;
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+.gameicon {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    margin: 15px;
+    width: 144px;
+    padding: 10px;
+    justify-content: center;
+}
+
+label.gameicon {
+    cursor: pointer;
+    background: #fffcf0;
+}

components/patcher/page.tsx

@@ -11,7 +11,7 @@ const Patcher = () => {
         <link rel="stylesheet" href="/patcher/css/style.css" />
       </Head>
 
-      <div className="grid grid-cols-1 place-items-center gap-6 pt-8 md:grid-cols-4">
+      <div className="icons">
         <Link href="/patcher/chuni.html" className="gameicon">
           <Image
             src="/patcher/img/chu/ni01.png"
@@ -92,13 +92,11 @@ const Patcher = () => {
             height={120}
           />
         </Link>
-
         <Link href="/patcher/chuniparadise.html" className="gameicon">
           <div className="image-wrapper">
             <Image
               src="/patcher/img/chu/ni11paradise.png"
               alt="CHUNITHM PARADISE"
-              className="image"
               width={120}
               height={120}
             />
@@ -109,7 +107,6 @@ const Patcher = () => {
             <Image
               src="/patcher/img/chu/ni11paradiselost.png"
               alt="CHUNITHM PARADISE LOST"
-              className="image-hover"
               width={120}
               height={120}
             />

components/userRatingBaseHotList/page.tsx

@@ -25,7 +25,8 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
   chuniProfileHotPlays,
 }) => {
   return (
-    <div className="grid grid-cols-1 gap-2 md:grid-cols-8">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+      {" "}
       {chuniProfileHotPlays.hotRating.map((playerHotRatingList, index) => {
         const jacketPath = playerHotRatingList.jacketPath?.replace(
           ".dds",

components/userRatingBaseList/page.tsx

@@ -30,7 +30,8 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
   chuniProfileTopPlays,
 }) => {
   return (
-    <div className="grid grid-cols-1 gap-2 md:grid-cols-8">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+      {" "}
       {chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
         const jacketPath = chuniProfileTopPlays.jacketPath?.replace(
           ".dds",