fix cards display on compact mode

Author: medyo

src/assets/App.css

@@ -431,20 +431,32 @@ a {
   background-color: var(--placeholder-background-color);
   margin-bottom: 12px;
 }
+
 .rowTitle {
   color: var(--primary-text-color);
   margin: 0;
   padding: 0;
   font-size: 16px;
   text-decoration: none;
-  display: block;
+  display: flex;
+  flex-direction: row;
+}
+.rowLink {
+  color: var(--primary-text-color);
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  text-decoration: none;
+  display: flex;
   flex-direction: row;
 }
 
 .rowTitle:hover {
   color: var(--primary-hover-text-color);
 }
-
+.titleWithCover {
+  display: block;
+}
 .dark .blockHeaderWhite {
   color: white;
 }

src/components/Elements/CardLink/CardLink.tsx

@@ -20,7 +20,7 @@ export const CardLink = ({
   return (
     <ClickableItem
       link={link}
-      className={'rowTitle' + (className ? ` ${className}` : '')}
+      className={'rowLink' + (className ? ` ${className}` : '')}
       analyticsAttributes={analyticsAttributes}
       appendRef={appendRef}>
       {children}

src/features/cards/components/aiCard/AICard.tsx

@@ -20,6 +20,11 @@ export function AICard({ meta, withAds }: CardPropsType) {
     error,
   } = useGetAIArticles({
     userTopics: userSelectedTags.map((tag) => tag.label.toLocaleLowerCase()),
+    config: {
+      cacheTime: 0,
+      staleTime: 0,
+      useErrorBoundary: false,
+    },
   })
 
   const renderItem = (item: Article, index: number) => (

src/features/cards/components/aiCard/ArticleItem.tsx

@@ -1,7 +1,6 @@
 import { BiCommentDetail } from 'react-icons/bi'
 import { GoDotFill } from 'react-icons/go'
 import { MdAccessTime } from 'react-icons/md'
-import { VscTriangleUp } from 'react-icons/vsc'
 import { CardItemWithActions, CardLink, ClickableItem } from 'src/components/Elements'
 import { Attributes } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
@@ -23,6 +22,7 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
           <p className="rowTitle">
             <CardLink
               link={item.url}
+              className="titleWithCover"
               analyticsAttributes={{
                 [Attributes.POINTS]: item.reactions,
                 [Attributes.TRIGERED_FROM]: 'card',
@@ -33,13 +33,6 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
               {item.image_url && listingMode === 'normal' && (
                 <img src={item.image_url} className="rowCover" alt="" />
               )}
-              {listingMode === 'compact' && (
-                <span className="counterWrapper">
-                  <VscTriangleUp />
-                  <span className="value">{item.reactions}</span>
-                </span>
-              )}
-
               <span className="subTitle">{item.title}</span>
             </CardLink>
           </p>