From 2733a36ea8285c3153ca8af831d82645618b163e Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Sun, 14 Jun 2026 19:46:38 +0700
Subject: [PATCH] feat(catalog): make entire disease card clickable to toggle
 accordion

- Move the `onClick` event handler from the accordion header to the outermost card container in `catalog-page.tsx`.
- Allow users to click anywhere on the expanded card (including the description and treatment sections) to collapse it.
- Improve overall user experience by providing a significantly larger tap target, especially beneficial for mobile or touch-screen users.
---
 apps/web/src/pages/catalog-page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/catalog-page.tsx b/apps/web/src/pages/catalog-page.tsx
index 1d68481..46606ca 100644
--- a/apps/web/src/pages/catalog-page.tsx
+++ b/apps/web/src/pages/catalog-page.tsx
@@ -118,6 +118,9 @@ export function CatalogPage() {
             return (
               <div
                 key={disease.slug}
+                onClick={() =>
+                  setExpandedId(isExpanded ? null : disease.slug)
+                }
                 className={`bg-white rounded-2xl border transition-all duration-300 ${
                   isExpanded
                     ? "border-[#214B11]/30 shadow-md ring-1 ring-[#214B11]/5"
@@ -126,9 +129,6 @@ export function CatalogPage() {
               >
                 {/* Accordion Header */}
                 <div
-                  onClick={() =>
-                    setExpandedId(isExpanded ? null : disease.slug)
-                  }
                   className="flex items-center justify-between p-4 md:p-5 cursor-pointer select-none"
                 >
                   <div className="flex items-center gap-4">