From d8ad9a39877a35aa0d2642898e3c23278ea987c4 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Fri, 23 Jan 2026 22:19:33 -0700
Subject: [PATCH] fix view more card sizing

---
 .../discover/components/MediaCarousel.tsx     | 22 ++++++++++---------
 src/pages/parts/home/BookmarksCarousel.tsx    | 22 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx
index 5e9d4b77..3e28c0a7 100644
--- a/src/pages/discover/components/MediaCarousel.tsx
+++ b/src/pages/discover/components/MediaCarousel.tsx
@@ -46,22 +46,24 @@ function MoreCard({ link }: { link: string }) {
   return (
     <div className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto">
       <Link to={link} className="block">
-        <Flare.Base className="group -m-[0.705em] h-[20rem] hover:scale-95 transition-all rounded-xl bg-background-main duration-300 hover:bg-mediaCard-hoverBackground tabbable">
+        <Flare.Base className="group -m-[0.705em] hover:scale-95 transition-all rounded-xl bg-background-main duration-300 hover:bg-mediaCard-hoverBackground tabbable">
           <Flare.Light
             flareSize={300}
             cssColorVar="--colors-mediaCard-hoverAccent"
             backgroundClass="bg-mediaCard-hoverBackground duration-100"
             className="rounded-xl bg-background-main group-hover:opacity-100"
           />
-          <Flare.Child className="pointer-events-auto h-[20rem] relative mb-2 p-[0.4em] transition-transform duration-300">
-            <div className="flex absolute inset-0 flex-col items-center justify-center">
-              <Icon
-                icon={Icons.ARROW_RIGHT}
-                className="text-4xl mb-2 transition-transform duration-300"
-              />
-              <span className="text-sm text-center px-2">
-                {t("discover.carousel.more")}
-              </span>
+          <Flare.Child className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300">
+            <div className="relative pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground flex items-center justify-center">
+              <div className="flex absolute inset-0 flex-col items-center justify-center">
+                <Icon
+                  icon={Icons.ARROW_RIGHT}
+                  className="text-4xl mb-2 transition-transform duration-300"
+                />
+                <span className="text-sm text-center px-2">
+                  {t("discover.carousel.more")}
+                </span>
+              </div>
             </div>
           </Flare.Child>
         </Flare.Base>
diff --git a/src/pages/parts/home/BookmarksCarousel.tsx b/src/pages/parts/home/BookmarksCarousel.tsx
index 13183d1b..d9d7a8f5 100644
--- a/src/pages/parts/home/BookmarksCarousel.tsx
+++ b/src/pages/parts/home/BookmarksCarousel.tsx
@@ -59,22 +59,24 @@ function MoreBookmarksCard() {
   return (
     <div className="relative mt-4 group cursor-pointer rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto">
       <Link to="/bookmarks" className="block">
-        <Flare.Base className="group -m-[0.705em] h-[20rem] hover:scale-95 transition-all rounded-xl bg-background-main duration-300 hover:bg-mediaCard-hoverBackground tabbable">
+        <Flare.Base className="group -m-[0.705em] hover:scale-95 transition-all rounded-xl bg-background-main duration-300 hover:bg-mediaCard-hoverBackground tabbable">
           <Flare.Light
             flareSize={300}
             cssColorVar="--colors-mediaCard-hoverAccent"
             backgroundClass="bg-mediaCard-hoverBackground duration-100"
             className="rounded-xl bg-background-main group-hover:opacity-100"
           />
-          <Flare.Child className="pointer-events-auto h-[20rem] relative mb-2 p-[0.4em] transition-transform duration-300">
-            <div className="flex absolute inset-0 flex-col items-center justify-center">
-              <Icon
-                icon={Icons.ARROW_RIGHT}
-                className="text-4xl mb-2 transition-transform duration-300"
-              />
-              <span className="text-sm text-center px-2">
-                {t("home.bookmarks.showAll")}
-              </span>
+          <Flare.Child className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300">
+            <div className="relative pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground flex items-center justify-center">
+              <div className="flex absolute inset-0 flex-col items-center justify-center">
+                <Icon
+                  icon={Icons.ARROW_RIGHT}
+                  className="text-4xl mb-2 transition-transform duration-300"
+                />
+                <span className="text-sm text-center px-2">
+                  {t("home.bookmarks.showAll")}
+                </span>
+              </div>
             </div>
           </Flare.Child>
         </Flare.Base>