vignesh/wiki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(template): stop nesting buttons in the template picker rows (#2603)

Browse source
This commit is contained in:
Philip Okugbe 2026-10-24 00:21:50 +01:00 committed by GitHub
parent 90f263849a
commit 330fed2577
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/client/src/ee/template/components/template-picker-modal.module.css
View file

@ -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;

50
apps/client/src/ee/template/components/template-picker-modal.tsx
View file

@ -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>