fix: solve list marker page break (#3177) (#3236)

Signed-off-by: aaccardo <hackardo@gmail.com>
Co-authored-by: Amruth Pillai <im.amruth@gmail.com>

packages/pdf/src/templates/shared/base-template-styles.ts

@@ -87,11 +87,12 @@ export function createBaseTemplateStyles({ metadata, foreground, r, metrics, pic
 			...bodyText,
 			width: metadata.typography.body.fontSize,
 			textAlign: r.listMarkerTextAlign,
+			flex: "initial",
 		} satisfies Style,
 
 		richListItemContent: {
 			...bodyText,
-			flex: 1,
+			flex: "initial",
 		} satisfies Style,
 
 		splitRow: {

packages/pdf/src/templates/shared/rich-text.tsx

@@ -61,10 +61,6 @@ export const RichText = ({ children }: RichTextProps) => {
 	const { metadata, rtl } = useRender();
 	const rtlTextWrapStyle: Style | undefined = rtl ? { direction: "rtl", textAlign: "right" } : undefined;
 
-	const richListItemMarkerMargin: Style = {
-		marginLeft: rtl ? 4 : 0,
-		marginRight: rtl ? 0 : 4,
-	};
 	const boldStyle = useTemplateStyle("bold");
 	const linkStyle = useTemplateStyle("link");
 	const richParagraphStyle = useTemplateStyle("richParagraph");
@@ -123,7 +119,11 @@ export const RichText = ({ children }: RichTextProps) => {
 					const contentItemStyles = itemStyles.map(stripRichTextVerticalMargins);
 
 					const markerNode = (
-						<PdfText key="marker" style={composeStyles(richListItemMarkerStyle, richListItemMarkerMargin)}>
+						<PdfText
+							key="marker"
+							minPresenceAhead={bodyLineHeight ?? metadata.typography.body.lineHeight}
+							style={composeStyles(richListItemMarkerStyle)}
+						>
 							{marker}
 						</PdfText>
 					);
@@ -153,10 +153,7 @@ export const RichText = ({ children }: RichTextProps) => {
 								safeTextStyle,
 							)}
 						>
-							<View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+							{children}
-								{markerNode}
-								<View style={{ flex: 1, minWidth: 0 }}>{children}</View>
-							</View>
 						</View>
 					);
 
@@ -171,7 +168,7 @@ export const RichText = ({ children }: RichTextProps) => {
 								getRichTextEdgeTrimStyle(element),
 							)}
 						>
-							{rtl ? [contentNode, markerNode] : contentNode}
+							{rtl ? [contentNode, markerNode] : [markerNode, contentNode]}
 						</View>
 					);
 				},