Fix mobile ClanCard hover overflow and lock layout heights

Author: NikolasKataja

frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.module.scss

@@ -176,6 +176,7 @@
 // ClanCard
 .MobileCard.ClanCard {
   @include card-dimensions;
+  position: relative;
   overflow: hidden;
   border-radius: var(--corner-radius-web);
   background-color: var(--base-card-background);
@@ -193,6 +194,8 @@
     justify-content: center;
     gap: 0.25rem;
     align-items: center;
+    position: relative;
+    z-index: 1;
 
     .Title1 {
       color: var(--white);
@@ -202,9 +205,7 @@
       text-align: center;
       max-width: 100%;
       white-space: normal;
-      overflow: hidden;
       word-break: break-word;
-      text-overflow: clip;
     }
 
     .Text { margin: 0; }
@@ -216,10 +217,14 @@
     justify-content: center;
     align-items: center;
     padding: 0.25rem 0;
+    position: relative;
+    z-index: 0;
 
     .Image {
       height: auto;
+      max-width: 100%;
       object-fit: contain !important;
+      transform-origin: center;
     }
   }
 
@@ -284,4 +289,21 @@
   .MobileCard.ClanCard > .TextContainer:first-of-type .Title1 {
     font-size: 1rem;
   }
-}
+}
+
+// Override withScalableLink behaviour for ClanCard only
+.withScalableLink {
+  .MobileCard.ClanCard {
+    > .TextContainer:first-of-type {
+      height: 24% !important;
+    }
+
+    > .ImageContainer {
+      height: 48% !important;
+    }
+
+    > .TextContainer:last-of-type {
+      height: 28% !important;
+    }
+  }
+}