fix: reduce default list item row gap

This commit is contained in:
Amruth Pillai
2026-05-26 00:13:38 +02:00
parent 7557ab13ab
commit 17cddbad65
15 changed files with 688 additions and 183 deletions
@@ -187,15 +187,44 @@ const usePikachuTemplate = (): PikachuTemplate => {
color: foreground,
...r.text,
},
div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
link: { textDecoration: "none", color: foreground },
small: { fontSize: metadata.typography.body.fontSize * 0.875 },
bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
richParagraph: { margin: 0, ...bodyText },
richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
richListItemContent: { flex: 1, ...bodyText },
div: {
rowGap: metrics.gapY(0.125),
columnGap: metrics.gapX(1 / 3),
},
inline: {
flexDirection: r.row,
alignItems: "center",
columnGap: metrics.gapX(1 / 3),
},
link: {
textDecoration: "none",
color: foreground,
},
small: {
fontSize: metadata.typography.body.fontSize * 0.875,
},
bold: {
fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
},
richParagraph: {
margin: 0,
...bodyText,
},
richListItemRow: {
flexDirection: "row",
columnGap: metrics.gapX(1 / 3),
alignItems: "flex-start",
},
richListItemMarker: {
...bodyText,
width: metadata.typography.body.fontSize,
textAlign: r.listMarkerTextAlign,
},
richListItemContent: {
...bodyText,
flex: 1,
lineHeight: metadata.typography.body.lineHeight * 0.5,
},
splitRow: {
flexDirection: r.row,
flexWrap: "wrap",
@@ -203,13 +232,29 @@ const usePikachuTemplate = (): PikachuTemplate => {
justifyContent: "space-between",
columnGap: metrics.gapX(2 / 3),
},
alignEnd: { ...r.alignEnd },
section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary },
item: { rowGap: metrics.gapY(0.125) },
levelContainer: { width: "100%" },
levelItem: { borderColor: primary },
levelItemActive: { backgroundColor: primary },
alignEnd: {
...r.alignEnd,
},
section: {
flexDirection: "column",
rowGap: metrics.gapY(0.25),
},
sectionHeading: {
borderBottomWidth: 1,
borderBottomColor: primary,
},
item: {
rowGap: metrics.gapY(0.125),
},
levelContainer: {
width: "100%",
},
levelItem: {
borderColor: primary,
},
levelItemActive: {
backgroundColor: primary,
},
layout: {
flexDirection: r.row,
columnGap: metrics.columnGap,
@@ -217,7 +262,9 @@ const usePikachuTemplate = (): PikachuTemplate => {
sidebarColumn: {
flexShrink: 0,
},
sidebarContent: { overflow: "hidden" },
sidebarContent: {
overflow: "hidden",
},
mainColumn: {
flex: 1,
},
@@ -250,7 +297,9 @@ const usePikachuTemplate = (): PikachuTemplate => {
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: headerNameLineHeight,
},
headerText: { color: background },
headerText: {
color: background,
},
contactList: {
flexDirection: r.row,
flexWrap: "wrap",