fix mobilecard gap and padding + eslint fix

Author: NikolasKataja

frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.module.scss

@@ -65,14 +65,17 @@ main :where(.SearchBarDesktop, .SearchBarMobile) {
 }
 
 .MobileCardContainer {
-  --gap: 1rem;
+  --gap: 0.45rem;
+  --row-gap: 0.95rem;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--gap);
+  column-gap: var(--gap);
+  row-gap: var(--row-gap);
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
-  margin-top: .5rem;
+  padding-inline: 0;
+  margin-top: 0.25rem;
 }
 
 .MobileCardItemWrap {

frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx

@@ -216,16 +216,16 @@ const ClansViewDesktop = ({ clans, onClickToClan }: DesktopProps) => {
                                 </div>
 
                                 <div className={cardCls.ClanLabels}>
-                                    {MOCK_LABELS.map((l) => (
+                                    {MOCK_LABELS.map((label) => (
                                         <span
                                             className={cardCls.ClanLabel}
-                                            key={l.text}
+                                            key={label.text}
                                         >
                                             <Image
-                                                src={l.icon}
-                                                alt={l.text}
+                                                src={label.icon}
+                                                alt={label.text}
                                             />
-                                            {l.text}
+                                            {label.text}
                                         </span>
                                     ))}
                                 </div>

frontend-next-migration/src/preparedPages/ClanPages/ui/ClanLayout/ClanLayout.module.scss

@@ -12,7 +12,6 @@
   width: 100%;
   max-width: unset;
   overflow-x: hidden;
-  padding: 0 16px;
   margin: 0 auto;
 }
 

frontend-next-migration/src/preparedPages/ClanPages/ui/ClanLayout/ClanLayout.tsx

@@ -40,7 +40,7 @@ export const SearchBar = ({
             <input
                 type="text"
                 value={value}
-                onChange={(e) => onChange(e.target.value)}
+                onChange={(event) => onChange(event.target.value)}
                 placeholder="Search"
                 className={inputClassName}
                 aria-label={ariaLabel}

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

@@ -202,9 +202,10 @@
       margin: 0;
       text-align: center;
       max-width: 100%;
-      white-space: nowrap;
+      white-space: normal;
       overflow: hidden;
-      text-overflow: ellipsis;
+      word-break: break-word;
+      text-overflow: clip;
     }
 
     .Text { margin: 0; }
@@ -218,7 +219,7 @@
     padding: 0.25rem 0;
 
     .Image {
-      height: 74%;
+      height: auto;
       object-fit: contain !important;
     }
   }
@@ -268,8 +269,20 @@
   }
 }
 
+@media (min-width: 768px) and (max-width: 1024px) {
+  .MobileCard.ClanCard > .ImageContainer .Image {
+    width: 80%;
+  }
+}
+
+@media (max-width: 400px) {
+  .MobileCard.ClanCard > .TextContainer:first-of-type .Title1 {
+    font-size: 1.15rem;
+  }
+}
+
 @media (max-width: 360px) {
   .MobileCard.ClanCard > .TextContainer:first-of-type .Title1 {
-    font-size: 1.1rem;
+    font-size: 1rem;
   }
 }