From f60aadaef6a0f2579433ac226e3b45f79d89fa50 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sun, 24 Aug 2025 23:28:32 -0400
Subject: [PATCH] edits to block quote styling in pub posts

---
 app/globals.css                                           | 6 ++++++
 app/lish/[did]/[publication]/[rkey]/PostContent.tsx       | 3 ++-
 app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx | 2 +-
 components/Blocks/TextBlock/index.tsx                     | 4 ++--
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 2abd00a7..264fae81 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -277,6 +277,12 @@ pre.shiki {
   @apply outline-border;
 }
 
+.blockquote {
+  @apply border-l-2;
+  @apply border-border;
+  @apply pl-3;
+  @apply ml-2;
+}
 .transparent-container {
   @apply border;
   @apply border-border-light;
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index f0f00377..a395155b 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -217,8 +217,9 @@ let Block = ({
     }
     case PubLeafletBlocksBlockquote.isMain(b.block): {
       return (
+        // highly unfortunate hack so that the border-l on blockquote is the height of just the text rather than the height of the block, which includes padding.
         <blockquote
-          className={`border-l-2 border-border pl-2 ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2" : ""}`}
+          className={` blockquote !py-0 !mt-1 !mb-2 last:!mb-3 last:sm:!mb-4 first:!mt-2 sm:first:pt-3 ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2" : ""}`}
           {...blockProps}
         >
           <TextBlock
diff --git a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
index 397c99f7..fcb7edac 100644
--- a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
@@ -46,7 +46,7 @@ let Block = async ({
   switch (true) {
     case PubLeafletBlocksBlockquote.isMain(b.block): {
       return (
-        <blockquote className={`border-l-2 border-border pl-2`}>
+        <blockquote className={` blockquote `}>
           <BaseTextBlock
             facets={b.block.facets}
             plaintext={b.block.plaintext}
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index c6b4d299..d5fe598c 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -174,7 +174,7 @@ export function RenderedTextBlock(props: {
       style={{ wordBreak: "break-word" }} // better than tailwind break-all!
       className={`
         ${alignmentClass}
-        ${props.type === "blockquote" ? "border-l-2 border-border pl-2 " : ""}
+        ${props.type === "blockquote" ? " blockquote " : ""}
         ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""}
       w-full whitespace-pre-wrap outline-none ${props.className} `}
     >
@@ -344,7 +344,7 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
       <div
         className={`flex items-center justify-between w-full
           ${selected && props.pageType === "canvas" && "bg-bg-page rounded-md"}
-          ${props.type === "blockquote" ? "border-l-2 border-border pl-2 " : ""}
+          ${props.type === "blockquote" ? " blockquote  " : ""}
           `}
       >
         <pre
-- 
2.51.2