From 8d9e78f6beda9fa8010770cddd15bb400d9abd46 Mon Sep 17 00:00:00 2001
From: Mateusz Bartosik <mateusz@ravendb.net>
Date: Tue, 10 Feb 2026 16:40:24 +0100
Subject: [PATCH] RDoc-3691 Fix responsiveness for Guides list items

---
 src/components/Common/CardWithImage.tsx       |  2 +-
 src/components/Common/GuideListItem.tsx       | 25 +++++++++++++------
 .../Guides/RecentGuidesListItem.tsx           |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/Common/CardWithImage.tsx b/src/components/Common/CardWithImage.tsx
index 838980d6e4..0d2b312602 100644
--- a/src/components/Common/CardWithImage.tsx
+++ b/src/components/Common/CardWithImage.tsx
@@ -108,7 +108,7 @@ export default function CardWithImage({
                 </div>
                 <p className="!mb-0 text-sm pt-2">{description}</p>
                 {(hasTags || hasDate) && (
-                    <div className="flex justify-between pt-2 gap-3">
+                    <div className="flex flex-wrap justify-between pt-2 gap-3">
                         {hasTags && (
                             <div className="flex gap-1 items-center flex-wrap">
                                 {visibleTags.map((tag) => (
diff --git a/src/components/Common/GuideListItem.tsx b/src/components/Common/GuideListItem.tsx
index d53d4e1642..3f515af7f3 100644
--- a/src/components/Common/GuideListItem.tsx
+++ b/src/components/Common/GuideListItem.tsx
@@ -26,24 +26,35 @@ export default function GuideListItem({
         <Link
             to={url}
             className={clsx(
-                "flex items-center py-3 px-2 gap-4",
+                "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",
             )}
         >
-            <div className="flex flex-1 items-center justify-between flex-wrap min-w-0 gap-1">
+            <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 text-base font-semibold leading-5",
-                        "overflow-hidden text-ellipsis whitespace-nowrap shrink-0",
+                        "!mb-0 font-semibold leading-5",
+                        "sm:shrink",
                     )}
                 >
                     {title}
                 </p>
-                <div className="flex gap-1 items-center flex-wrap">
+                <div
+                    className={clsx(
+                        "flex gap-1 items-center flex-wrap whitespace-normal",
+                        "sm:shrink-0",
+                    )}
+                >
                     {visibleTags.map((tag) => (
                         <Tag
                             key={tag.label}
@@ -72,8 +83,8 @@ export default function GuideListItem({
                 <p
                     className={clsx(
                         "!mb-0 text-xs",
-                        "overflow-hidden text-ellipsis text-right whitespace-nowrap",
-                        "shrink-0"
+                        "overflow-hidden truncate sm:text-right whitespace-normal",
+                        "shrink-0",
                     )}
                 >
                     {!isInternalUrl(url) && "External • "}
diff --git a/src/components/Guides/RecentGuidesListItem.tsx b/src/components/Guides/RecentGuidesListItem.tsx
index d12b50a152..0b39d3240a 100644
--- a/src/components/Guides/RecentGuidesListItem.tsx
+++ b/src/components/Guides/RecentGuidesListItem.tsx
@@ -43,7 +43,7 @@ export default function RecentGuidesListItem({
                     {title}
                 </Link>
             </Heading>
-            <div className="flex items-center gap-1 justify-between pointer-events-none">
+            <div className="flex flex-col-reverse sm:flex-row sm:items-center gap-1 justify-between pointer-events-none">
                 <div className="flex gap-1 relative flex-wrap flex-1 min-w-0">
                     {visibleTags.map((tag) => (
                         <Tag