Fix: #160 (#162)

* Fix: #160 * Update src/app/devtools/page.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/app/devtools/page.tsx * Update src/app/devtools/page.tsx --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Francesco Ciulla <[email protected]>
FrancescoXX · Oct 1, 2024 · 63e1a41 · 63e1a41
1 parent 2ef4c39
commit 63e1a41
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/app/devtools/page.tsx b/src/app/devtools/page.tsx
@@ -43,7 +43,7 @@ export default function DevTools() {
           </div>
         </div>
 
-        <div className="grid md:grid-cols-3 w-full gap-5">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-full gap-5">
           {filteredTools.map((tool, index) => (
             <Card item={tool} key={index} />
           ))}

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -40,23 +40,23 @@ const Card: FC<CardProps> = ({ item, key }) => {
       className="dark:bg-gray-900 group bg-gray-200 rounded-lg shadow-lg transition duration-300 hover:shadow-xl min-w-full toolsInnerCard"
     >
       <div className="flex items-center gap-5 sm:gap-10 relative hover:scale-105 p-6 px-10 transition duration-300">
-        <div className="flex flex-col md:flex-row gap-5 items-start w-full">
-        <div className="md:flex flex-col">
-          <Image
-            src={item.icon ?? item.cover ?? ""}
-            alt={item.name ?? item.title ?? ""}
-            width={75}
-            height={75}
-            className="rounded-md min-w-20  h-30 p-2 object-contain"
-          />
-          <div className="grid gap-2 text-left">
-            <h3 className="text-xl font-semibold text-current dark:text-white">
-              {item.name ?? item.title}
-            </h3>
-            <p className="dark:text-gray-400 text-gray-600 mb-4">
-              {item.description}
-            </p>
-          </div>
+        <div className="flex flex-col md:flex-col gap-5 items-start w-full">
+           <div className="md:flex flex-col">
+            <Image
+              src={item.icon ?? item.cover ?? ""}
+              alt={item.name ?? item.title ?? ""}
+              width={75}
+              height={75}
+              className="rounded-md min-w-20  h-30 p-2 object-contain"
+            />
+            <div className="grid gap-2 text-left text-wrap">
+              <h3 className="text-xl font-semibold text-current dark:text-white">
+                {item.name ?? item.title}
+              </h3>
+              <p className="dark:text-gray-400 text-gray-600 mb-4">
+                {item.description}
+              </p>
+            </div>
           </div>
         </div>
         <FaArrowRight className="dark:text-white opacity-0 group-hover:opacity-100 -translate-x-10 group-hover:translate-x-0 transition duration-300" />