RDoc-3711 Fix DOM syntax for Cards

Author: mateuszbartosik

src/components/Common/CardWithImage.tsx

@@ -42,15 +42,16 @@ export default function CardWithImage({
     });
 
     return (
-        <Link to={url} className="card-wrapper">
+        <article className="card-wrapper group">
+            <Link to={url} className={clsx("absolute inset-0 z-1", "!transition-all")} />
             <div
                 className={clsx(
-                    "card group flex h-full flex-col",
+                    "card flex h-full flex-col",
                     "p-4 overflow-hidden rounded-2xl",
                     "border border-black/10 dark:border-white/10",
-                    "!bg-black/5 dark:!bg-white/5 text-inherit hover:no-underline",
-                    "hover:border-black/20 dark:hover:border-white/20",
-                    "hover:!bg-black/10 dark:hover:!bg-white/10",
+                    "!bg-black/5 dark:!bg-white/5 text-inherit group-hover:no-underline",
+                    "group-hover:border-black/20 dark:group-hover:border-white/20",
+                    "group-hover:!bg-black/10 dark:group-hover:!bg-white/10",
                     "!transition-all",
                     "animate-in fade-in slide-in-from-bottom-4"
                 )}
@@ -99,7 +100,7 @@ export default function CardWithImage({
                 </div>
                 <p className="!mb-0 text-sm pt-2">{description}</p>
                 {(hasTags || hasDate) && (
-                    <div className="flex flex-wrap justify-between pt-2 gap-3">
+                    <div className="flex flex-wrap justify-between pt-2 gap-3 z-2">
                         {hasTags && (
                             <div className="flex gap-1 items-center flex-wrap">
                                 {visibleTags.map((tag) => (
@@ -126,6 +127,6 @@ export default function CardWithImage({
                     </div>
                 )}
             </div>
-        </Link>
+        </article>
     );
 }

src/components/Common/GuideListItem.tsx

@@ -18,26 +18,31 @@ export default function GuideListItem({ title, url, tags = [], date }: GuideList
     });
 
     return (
-        <Link
-            to={url}
+        <article
             className={clsx(
                 "flex flex-col-reverse py-3 px-2 gap-1",
                 "border-b border-black/10 dark:border-white/10 !text-inherit",
                 "hover:!no-underline",
                 "group relative",
-                "!transition-all",
-                "hover:bg-black/5 dark:hover:bg-white/5",
                 "sm:flex-row sm:items-center sm:gap-4"
             )}
         >
+            <Link
+                to={url}
+                className={clsx(
+                    "absolute inset-0 z-1",
+                    "!transition-all",
+                    "group-hover:bg-black/5 dark:group-hover:bg-white/5"
+                )}
+            />
             <div
                 className={clsx(
                     "flex flex-col flex-1 flex-wrap justify-between min-w-0 gap-1",
                     "lg:flex-row lg:items-center lg:flex-nowrap"
                 )}
             >
                 <p className={clsx("!mb-0 font-semibold leading-5", "sm:shrink")}>{title}</p>
-                <div className={clsx("flex gap-1 items-center flex-wrap whitespace-normal", "sm:shrink-0")}>
+                <div className={clsx("flex gap-1 items-center flex-wrap whitespace-normal z-2", "sm:shrink-0")}>
                     {visibleTags.map((tag) => (
                         <Tag key={tag.label} size="xs" permalink={tag.permalink}>
                             {tag.label}
@@ -70,6 +75,6 @@ export default function GuideListItem({ title, url, tags = [], date }: GuideList
                     {date}
                 </p>
             )}
-        </Link>
+        </article>
     );
 }

src/css/custom.css

@@ -405,7 +405,7 @@ code {
 
 /* Custom display for card wrapper */
 .card-wrapper {
-    @apply flex !no-underline !text-inherit hover:!no-underline;
+    @apply flex !no-underline !text-inherit hover:!no-underline relative;
 }
 
 .card {
@@ -623,7 +623,7 @@ a {
 
 /* The track (progress bar) of the scrollbar */
 ::-webkit-scrollbar-track {
-    background-color: inherit;
+    background-color: transparent;
 }
 
 /* The entire scrollbar */

src/theme/Tag/index.tsx

@@ -25,7 +25,7 @@ export default function Tag({
     const isXs = size === "xs";
 
     const baseClasses = clsx(
-        "inline-flex items-center select-none border",
+        "inline-flex items-center select-none border cursor-pointer",
         "bg-black/5 dark:bg-white/5 border-black/10 dark:border-white/10",
         "hover:bg-black/10 dark:hover:bg-white/10 hover:!no-underline",
         isXs