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
@@ -73,7 +73,10 @@ export const RhyhornPage = ({ page, pageIndex }: TemplatePageProps) => {
const Header = ({ styles }: { styles: RhyhornStyles }) => {
const { basics, picture } = useRender();
const hasPicture = hasTemplatePicture(picture);
const contactItems: { id: string; content: ReactNode }[] = [];
const contactItems: {
id: string;
content: ReactNode;
}[] = [];
if (basics.email) {
contactItems.push({
@@ -195,12 +198,29 @@ const useRhyhornTemplate = (): RhyhornTemplate => {
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 },
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: {
// Stays `row` for both LTR and RTL; the <li> renderer swaps DOM order for RTL.
flexDirection: "row",
@@ -213,7 +233,11 @@ const useRhyhornTemplate = (): RhyhornTemplate => {
width: metadata.typography.body.fontSize,
textAlign: r.listMarkerTextAlign,
},
richListItemContent: { flex: 1, ...bodyText },
richListItemContent: {
...bodyText,
flex: 1,
lineHeight: metadata.typography.body.lineHeight * 0.5,
},
splitRow: {
flexDirection: r.row,
flexWrap: "wrap",
@@ -221,26 +245,53 @@ const useRhyhornTemplate = (): RhyhornTemplate => {
justifyContent: "space-between",
columnGap: metrics.gapX(2 / 3),
},
alignEnd: { ...r.alignEnd },
section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
alignEnd: {
...r.alignEnd,
},
section: {
flexDirection: "column",
rowGap: metrics.gapY(0.25),
},
sectionHeading: {
color: primary,
borderBottomWidth: 1,
borderBottomColor: primary,
textAlign: r.sectionHeadingTextAlign,
},
item: { rowGap: metrics.gapY(0.125) },
levelContainer: { width: "100%" },
levelItem: { borderColor: primary },
levelItemActive: { backgroundColor: primary },
header: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(0.5) },
headerTitle: { flex: 1, rowGap: metrics.gapY(0.5) },
item: {
rowGap: metrics.gapY(0.125),
},
levelContainer: {
width: "100%",
},
levelItem: {
borderColor: primary,
},
levelItemActive: {
backgroundColor: primary,
},
header: {
flexDirection: r.row,
alignItems: "center",
columnGap: metrics.gapX(0.5),
},
headerTitle: {
flex: 1,
rowGap: metrics.gapY(0.5),
},
headerIdentity: {
...r.headerIdentity,
rowGap: metrics.gapY(0.35),
},
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
contactList: { flexDirection: r.row, flexWrap: "wrap", rowGap: metrics.gapY(0.125) },
headerName: {
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: headerNameLineHeight,
},
contactList: {
flexDirection: r.row,
flexWrap: "wrap",
rowGap: metrics.gapY(0.125),
},
contactItem: {
flexDirection: r.row,
alignItems: "center",