a tool for shared writing and social publishing
fix image alignment
+11
-5
+11
-5
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+11
-5
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
···
40
40
isList?: boolean;
41
41
}) => {
42
42
let b = block;
43
-
let alignment = b.alignment;
43
+
let alignment =
44
+
b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight"
45
+
? "text-right justify-end"
46
+
: b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter"
47
+
? "text-center justify-center"
48
+
: "";
44
49
if (!alignment && PubLeafletBlocksImage.isMain(b.block))
45
-
alignment = "lex:pub.leaflet.pages.linearDocument#textAlignCenter";
50
+
alignment = "text-center justify-center";
46
51
47
52
// non text blocks, they need this padding, pt-3 sm:pt-4, which is applied in each case
48
53
let className = `
54
+
flex
49
55
postBlockWrapper
50
56
pt-1
51
57
${isList ? "isListItem pb-0 " : "pb-2 last:pb-3 last:sm:pb-4 first:pt-2 sm:first:pt-3"}
52
-
${alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight" ? "text-right" : alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter" ? "text-center" : ""}
58
+
${alignment}
53
59
`;
54
60
55
61
switch (true) {
···
119
125
}
120
126
case PubLeafletBlocksImage.isMain(b.block): {
121
127
return (
122
-
<div className="relative">
128
+
<div className={`relative flex ${alignment}`}>
123
129
<img
124
130
alt={b.block.alt}
125
131
height={b.block.aspectRatio?.height}
126
132
width={b.block.aspectRatio?.width}
127
-
className={`!pt-3 sm:!pt-4 ${className} rounded-md`}
133
+
className={`!pt-3 sm:!pt-4 rounded-md ${className}`}
128
134
src={blobRefToSrc(b.block.image.ref, did)}
129
135
/>
130
136
{b.block.alt && (