diff --git a/client/app/components/SearchResultItem.tsx b/client/app/components/SearchResultItem.tsx
index eb72f94d..5b22ae95 100644
--- a/client/app/components/SearchResultItem.tsx
+++ b/client/app/components/SearchResultItem.tsx
@@ -59,25 +59,25 @@ function SearchResultArtistItem(props: Props) {
             // eased with https://larsenwork.com/easing-gradients/
             backgroundImage: `linear-gradient(to top,
             var(--color-bg-secondary) 0%,
-            color-mix(in srgb, var(--color-bg-secondary) 99.4%, transparent) 2.9%,
-            color-mix(in srgb, var(--color-bg-secondary) 97.4%, transparent) 6.2%,
-            color-mix(in srgb, var(--color-bg-secondary) 92.6%, transparent) 10.5%,
-            color-mix(in srgb, var(--color-bg-secondary) 84.4%, transparent) 15.5%,
-            color-mix(in srgb, var(--color-bg-secondary) 70.8%, transparent) 21.1%,
-            color-mix(in srgb, var(--color-bg-secondary) 57.8%, transparent) 27%,
-            color-mix(in srgb, var(--color-bg-secondary) 42.2%, transparent) 33%,
-            color-mix(in srgb, var(--color-bg-secondary) 29.2%, transparent) 38.9%,
-            color-mix(in srgb, var(--color-bg-secondary) 15.6%, transparent) 44.5%,
-            color-mix(in srgb, var(--color-bg-secondary) 7.4%, transparent) 49.5%,
-            color-mix(in srgb, var(--color-bg-secondary) 2.6%, transparent) 53.8%,
-            color-mix(in srgb, var(--color-bg-secondary) 0.6%, transparent) 57.1%,
-            transparent 60%
+            color-mix(in srgb, var(--color-bg-secondary) 99%, transparent) 5%,
+            color-mix(in srgb, var(--color-bg-secondary) 95%, transparent) 12%,
+            color-mix(in srgb, var(--color-bg-secondary) 86%, transparent) 20%,
+            color-mix(in srgb, var(--color-bg-secondary) 72%, transparent) 28%,
+            color-mix(in srgb, var(--color-bg-secondary) 55%, transparent) 36%,
+            color-mix(in srgb, var(--color-bg-secondary) 37%, transparent) 44%,
+            color-mix(in srgb, var(--color-bg-secondary) 22%, transparent) 51%,
+            color-mix(in srgb, var(--color-bg-secondary) 11%, transparent) 57%,
+            color-mix(in srgb, var(--color-bg-secondary) 4%, transparent) 61%,
+            color-mix(in srgb, var(--color-bg-secondary) 1%, transparent) 63.5%,
+            transparent 65%
             )`,
             borderRadius: "var(--border-radius)",
           }}
         />
-        <div className="absolute bottom-3 left-3">
-          <h5 className="text-xl font-semibold line-clamp-2">{props.text}</h5>
+        <div className="absolute bottom-3 left-3 pr-2">
+          <h5 className="text-xl font-semibold line-clamp-3 wrap-anywhere text-shadow-lg">
+            {props.text}
+          </h5>
         </div>
       </div>
     </Link>
diff --git a/client/app/components/TopAlbumsCard.tsx b/client/app/components/TopAlbumsCard.tsx
index 4a79a5ec..232d24ae 100644
--- a/client/app/components/TopAlbumsCard.tsx
+++ b/client/app/components/TopAlbumsCard.tsx
@@ -33,7 +33,7 @@ export default function TopAlbumsCard({ period }: Props) {
     return <TopCardSkeleton header={header} numItems={numItems} />;
   } else if (isError) {
     return (
-      <div className="w-[300px]">
+      <div className="w-[350px]">
         <CardHeader to={`/chart/top/albums?period=${period}`} isOffset>
           {header}
         </CardHeader>
@@ -44,7 +44,7 @@ export default function TopAlbumsCard({ period }: Props) {
 
   if (!data.items[0]) {
     return (
-      <div className="w-[348px]">
+      <div className="w-[350px]">
         <CardHeader to={`/chart/top/albums?period=${period}`} isOffset>
           {header}
         </CardHeader>
@@ -77,26 +77,24 @@ export default function TopAlbumsCard({ period }: Props) {
               // eased with https://larsenwork.com/easing-gradients/
               backgroundImage: `linear-gradient(to top,
               var(--color-bg-secondary) 0%,
-              color-mix(in srgb, var(--color-bg-secondary) 99.4%, transparent) 2.9%,
-              color-mix(in srgb, var(--color-bg-secondary) 97.4%, transparent) 6.2%,
-              color-mix(in srgb, var(--color-bg-secondary) 92.6%, transparent) 10.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 84.4%, transparent) 15.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 70.8%, transparent) 21.1%,
-              color-mix(in srgb, var(--color-bg-secondary) 57.8%, transparent) 27%,
-              color-mix(in srgb, var(--color-bg-secondary) 42.2%, transparent) 33%,
-              color-mix(in srgb, var(--color-bg-secondary) 29.2%, transparent) 38.9%,
-              color-mix(in srgb, var(--color-bg-secondary) 15.6%, transparent) 44.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 7.4%, transparent) 49.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 2.6%, transparent) 53.8%,
-              color-mix(in srgb, var(--color-bg-secondary) 0.6%, transparent) 57.1%,
-              transparent 60%
+              color-mix(in srgb, var(--color-bg-secondary) 99%, transparent) 5%,
+              color-mix(in srgb, var(--color-bg-secondary) 95%, transparent) 12%,
+              color-mix(in srgb, var(--color-bg-secondary) 86%, transparent) 20%,
+              color-mix(in srgb, var(--color-bg-secondary) 72%, transparent) 28%,
+              color-mix(in srgb, var(--color-bg-secondary) 55%, transparent) 36%,
+              color-mix(in srgb, var(--color-bg-secondary) 37%, transparent) 44%,
+              color-mix(in srgb, var(--color-bg-secondary) 22%, transparent) 51%,
+              color-mix(in srgb, var(--color-bg-secondary) 11%, transparent) 57%,
+              color-mix(in srgb, var(--color-bg-secondary) 4%, transparent) 61%,
+              color-mix(in srgb, var(--color-bg-secondary) 1%, transparent) 63.5%,
+              transparent 65%
               )`,
               borderRadius: "var(--border-radius) var(--border-radius) 0 0",
             }}
           />
-          <div className="absolute bottom-10 left-5">
-            <Link to={`/album/${data.items[0].item.id}`}>
-              <h5 className="text-3xl font-semibold">
+          <div className="absolute bottom-8 left-5">
+            <Link to={`/album/${data.items[0].item.id}`} className="">
+              <h5 className="text-3xl font-semibold line-clamp-3 wrap-anywhere text-shadow-lg">
                 {data.items[0]?.item.title}
               </h5>
             </Link>
diff --git a/client/app/components/TopArtistsCard.tsx b/client/app/components/TopArtistsCard.tsx
index 65982237..fca910ea 100644
--- a/client/app/components/TopArtistsCard.tsx
+++ b/client/app/components/TopArtistsCard.tsx
@@ -76,26 +76,24 @@ export default function TopArtistsCard({ period }: Props) {
               // eased with https://larsenwork.com/easing-gradients/
               backgroundImage: `linear-gradient(to top,
               var(--color-bg-secondary) 0%,
-              color-mix(in srgb, var(--color-bg-secondary) 99.4%, transparent) 2.9%,
-              color-mix(in srgb, var(--color-bg-secondary) 97.4%, transparent) 6.2%,
-              color-mix(in srgb, var(--color-bg-secondary) 92.6%, transparent) 10.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 84.4%, transparent) 15.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 70.8%, transparent) 21.1%,
-              color-mix(in srgb, var(--color-bg-secondary) 57.8%, transparent) 27%,
-              color-mix(in srgb, var(--color-bg-secondary) 42.2%, transparent) 33%,
-              color-mix(in srgb, var(--color-bg-secondary) 29.2%, transparent) 38.9%,
-              color-mix(in srgb, var(--color-bg-secondary) 15.6%, transparent) 44.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 7.4%, transparent) 49.5%,
-              color-mix(in srgb, var(--color-bg-secondary) 2.6%, transparent) 53.8%,
-              color-mix(in srgb, var(--color-bg-secondary) 0.6%, transparent) 57.1%,
-              transparent 60%
+              color-mix(in srgb, var(--color-bg-secondary) 99%, transparent) 5%,
+              color-mix(in srgb, var(--color-bg-secondary) 95%, transparent) 12%,
+              color-mix(in srgb, var(--color-bg-secondary) 86%, transparent) 20%,
+              color-mix(in srgb, var(--color-bg-secondary) 72%, transparent) 28%,
+              color-mix(in srgb, var(--color-bg-secondary) 55%, transparent) 36%,
+              color-mix(in srgb, var(--color-bg-secondary) 37%, transparent) 44%,
+              color-mix(in srgb, var(--color-bg-secondary) 22%, transparent) 51%,
+              color-mix(in srgb, var(--color-bg-secondary) 11%, transparent) 57%,
+              color-mix(in srgb, var(--color-bg-secondary) 4%, transparent) 61%,
+              color-mix(in srgb, var(--color-bg-secondary) 1%, transparent) 63.5%,
+              transparent 65%
               )`,
               borderRadius: "var(--border-radius) var(--border-radius) 0 0",
             }}
           />
-          <div className="absolute bottom-10 left-5">
+          <div className="absolute bottom-8 left-5">
             <Link to={`/artist/${data.items[0].item.id}`}>
-              <h5 className="text-3xl font-semibold">
+              <h5 className="text-3xl font-semibold line-clamp-3 wrap-anywhere text-shadow-lg">
                 {data.items[0]?.item.name}
               </h5>
             </Link>
diff --git a/client/app/components/primitives/MediaItem.tsx b/client/app/components/primitives/MediaItem.tsx
index 4ebdb057..a77fac7f 100644
--- a/client/app/components/primitives/MediaItem.tsx
+++ b/client/app/components/primitives/MediaItem.tsx
@@ -91,12 +91,14 @@ export default function MediaItem({
         style={alignTop ? { marginTop: 6 } : undefined}
       >
         <Link to={link} style={{ minWidth: sizeToPx(size) }}>
-          <div className="line-clamp-2 hover:text-(--color-fg-secondary)">
+          <div className="line-clamp-2 wrap-anywhere hover:text-(--color-fg-secondary)">
             {title}
           </div>
         </Link>
         {subtitle !== undefined && (
-          <div className="text-[12px] sm:text-[14px]">{subtitle}</div>
+          <div className="text-[12px] sm:text-[14px] wrap-anywhere">
+            {subtitle}
+          </div>
         )}
         {meta !== undefined && (
           <div className="color-fg-secondary text-[12px] sm:text-[14px]">