From 330fed2577040626ea25ad248e1a6ca8c31a7fca Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 24 Oct 2026 00:21:50 +0100
Subject: [PATCH] fix(template): stop nesting buttons in the template picker
 rows (#2603)

---
 .../template-picker-modal.module.css          | 14 ++++--
 .../components/template-picker-modal.tsx      | 50 +++++++++----------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/client/src/ee/template/components/template-picker-modal.module.css b/apps/client/src/ee/template/components/template-picker-modal.module.css
index 687feb83..4c5a00b1 100644
--- a/apps/client/src/ee/template/components/template-picker-modal.module.css
+++ b/apps/client/src/ee/template/components/template-picker-modal.module.css
@@ -1,11 +1,6 @@
 .row {
     position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--mantine-spacing-sm);
-    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     border-radius: var(--mantine-radius-sm);
-    width: 100%;
 
     @mixin hover {
         background-color: light-dark(
@@ -15,6 +10,15 @@
     }
 }
 
+.pickButton {
+    display: flex;
+    align-items: center;
+    gap: var(--mantine-spacing-sm);
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    border-radius: inherit;
+    width: 100%;
+}
+
 .icon {
     width: 22px;
     height: 22px;
diff --git a/apps/client/src/ee/template/components/template-picker-modal.tsx b/apps/client/src/ee/template/components/template-picker-modal.tsx
index 76c55295..d9fe3238 100644
--- a/apps/client/src/ee/template/components/template-picker-modal.tsx
+++ b/apps/client/src/ee/template/components/template-picker-modal.tsx
@@ -196,41 +196,39 @@ export default function TemplatePickerModal({
             </div>
           ) : (
             filtered.map((tpl) => (
-              <UnstyledButton
-                key={tpl.id}
-                className={classes.row}
-                onClick={() => handlePick(tpl)}
-              >
-                <div className={classes.icon}>
-                  {tpl.icon ? (
-                    <span>{tpl.icon}</span>
-                  ) : (
-                    <IconFileText
-                      size={16}
-                      color="var(--mantine-color-gray-6)"
-                    />
-                  )}
-                </div>
-                <div className={classes.title}>{tpl.title}</div>
-                <div className={classes.scope}>
-                  {tpl.spaceId
-                    ? spaceNamesById.get(tpl.spaceId) ?? t("Space")
-                    : t("Global")}
-                </div>
+              <div key={tpl.id} className={classes.row}>
+                <UnstyledButton
+                  className={classes.pickButton}
+                  onClick={() => handlePick(tpl)}
+                >
+                  <div className={classes.icon}>
+                    {tpl.icon ? (
+                      <span>{tpl.icon}</span>
+                    ) : (
+                      <IconFileText
+                        size={16}
+                        color="var(--mantine-color-gray-6)"
+                      />
+                    )}
+                  </div>
+                  <div className={classes.title}>{tpl.title}</div>
+                  <div className={classes.scope}>
+                    {tpl.spaceId
+                      ? spaceNamesById.get(tpl.spaceId) ?? t("Space")
+                      : t("Global")}
+                  </div>
+                </UnstyledButton>
                 <Button
                   size="compact-xs"
                   variant="filled"
                   className={classes.useButton}
                   loading={useTemplateMutation.isPending}
                   disabled={useTemplateMutation.isPending}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleQuickUse(tpl);
-                  }}
+                  onClick={() => handleQuickUse(tpl)}
                 >
                   {t("Use")}
                 </Button>
-              </UnstyledButton>
+              </div>
             ))
           )}
         </ScrollArea>