a tool for shared writing and social publishing
adjust margin for ordered list items in rendered PostContent
Brendan Schlagel
(Mar 13, 2026, 4:12 PM EDT)
7dea6c9c
6a7c740b
+58
-43
+58
-43
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+58
-43
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
···
393
393
case PubLeafletBlocksHeader.isMain(b.block): {
394
394
if (b.block.level === 1)
395
395
return (
396
-
<h1 className={`h1Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h1 }}>
396
+
<h1
397
+
className={`h1Block ${className}`}
398
+
{...blockProps}
399
+
style={{ ...blockProps.style, fontSize: blockTextSize.h1 }}
400
+
>
397
401
<TextBlock
398
402
{...b.block}
399
403
index={index}
···
404
408
);
405
409
if (b.block.level === 2)
406
410
return (
407
-
<h2 className={`h2Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h2 }}>
411
+
<h2
412
+
className={`h2Block ${className}`}
413
+
{...blockProps}
414
+
style={{ ...blockProps.style, fontSize: blockTextSize.h2 }}
415
+
>
408
416
<TextBlock
409
417
{...b.block}
410
418
index={index}
···
416
424
);
417
425
if (b.block.level === 3)
418
426
return (
419
-
<h3 className={`h3Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h3 }}>
427
+
<h3
428
+
className={`h3Block ${className}`}
429
+
{...blockProps}
430
+
style={{ ...blockProps.style, fontSize: blockTextSize.h3 }}
431
+
>
420
432
<TextBlock
421
433
{...b.block}
422
434
index={index}
···
429
441
// if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>;
430
442
// if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>;
431
443
return (
432
-
<h6 className={`h6Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h4 }}>
444
+
<h6
445
+
className={`h6Block ${className}`}
446
+
{...blockProps}
447
+
style={{ ...blockProps.style, fontSize: blockTextSize.h4 }}
448
+
>
433
449
<TextBlock
434
450
{...b.block}
435
451
index={index}
···
472
488
))}
473
489
</ul>
474
490
) : null;
475
-
let orderedChildren =
476
-
props.item.orderedListChildren?.children?.length ? (
477
-
<ol className="-ml-[7px] sm:ml-[7px]">
478
-
{props.item.orderedListChildren.children.map((child, index) => (
479
-
<OrderedListItem
480
-
pages={props.pages}
481
-
pollData={props.pollData}
482
-
bskyPostData={props.bskyPostData}
483
-
index={[...props.index, index]}
484
-
item={child}
485
-
did={props.did}
486
-
key={index}
487
-
className={props.className}
488
-
pageId={props.pageId}
489
-
startIndex={props.item.orderedListChildren?.startIndex}
490
-
/>
491
-
))}
492
-
</ol>
493
-
) : null;
491
+
let orderedChildren = props.item.orderedListChildren?.children?.length ? (
492
+
<ol className="-ml-[7px] sm:ml-[7px]">
493
+
{props.item.orderedListChildren.children.map((child, index) => (
494
+
<OrderedListItem
495
+
pages={props.pages}
496
+
pollData={props.pollData}
497
+
bskyPostData={props.bskyPostData}
498
+
index={[...props.index, index]}
499
+
item={child}
500
+
did={props.did}
501
+
key={index}
502
+
className={props.className}
503
+
pageId={props.pageId}
504
+
startIndex={props.item.orderedListChildren?.startIndex}
505
+
/>
506
+
))}
507
+
</ol>
508
+
) : null;
494
509
return (
495
510
<li className={`pb-0! flex flex-row gap-2`}>
496
511
<div
···
525
540
pageId?: string;
526
541
startIndex?: number;
527
542
}) {
528
-
const calculatedIndex = (props.startIndex || 1) + props.index[props.index.length - 1];
543
+
const calculatedIndex =
544
+
(props.startIndex || 1) + props.index[props.index.length - 1];
529
545
let children = props.item.children?.length ? (
530
546
<ol className="-ml-[7px] sm:ml-[7px]">
531
547
{props.item.children.map((child, index) => (
···
544
560
))}
545
561
</ol>
546
562
) : null;
547
-
let unorderedChildren =
548
-
props.item.unorderedListChildren?.children?.length ? (
549
-
<ul className="-ml-[7px] sm:ml-[7px]">
550
-
{props.item.unorderedListChildren.children.map((child, index) => (
551
-
<ListItem
552
-
pages={props.pages}
553
-
pollData={props.pollData}
554
-
bskyPostData={props.bskyPostData}
555
-
index={[...props.index, index]}
556
-
item={child}
557
-
did={props.did}
558
-
key={index}
559
-
className={props.className}
560
-
pageId={props.pageId}
561
-
/>
562
-
))}
563
-
</ul>
564
-
) : null;
563
+
let unorderedChildren = props.item.unorderedListChildren?.children?.length ? (
564
+
<ul className="-ml-[7px] sm:ml-[7px]">
565
+
{props.item.unorderedListChildren.children.map((child, index) => (
566
+
<ListItem
567
+
pages={props.pages}
568
+
pollData={props.pollData}
569
+
bskyPostData={props.bskyPostData}
570
+
index={[...props.index, index]}
571
+
item={child}
572
+
did={props.did}
573
+
key={index}
574
+
className={props.className}
575
+
pageId={props.pageId}
576
+
/>
577
+
))}
578
+
</ul>
579
+
) : null;
565
580
return (
566
581
<li className={`pb-0! flex flex-row gap-2`}>
567
-
<div className="listMarker shrink-0 mx-2 z-1 mt-[14px]">
582
+
<div className="listMarker shrink-0 mx-2 z-1 mt-[4px]">
568
583
{calculatedIndex}.
569
584
</div>
570
585
<div className="flex flex-col w-full">