From 24f409c1a14837b1067bad48bd03bfe3f6f69c2b Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 4 Feb 2026 23:52:42 -0500
Subject: [PATCH] spacing fixes

---
 app/lish/Subscribe.tsx                        |  4 ++-
 .../[rkey]/Interactions/Interactions.tsx      | 29 +++++++++----------
 components/RecommendButton.tsx                |  4 +--
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/app/lish/Subscribe.tsx b/app/lish/Subscribe.tsx
index 4cfd5326..eb2e1411 100644
--- a/app/lish/Subscribe.tsx
+++ b/app/lish/Subscribe.tsx
@@ -87,7 +87,9 @@ export const ManageSubscription = (props: {
   return (
     <Popover
       trigger={
-        <div className="text-accent-contrast text-sm">Manage Subscription</div>
+        <div className="text-accent-contrast text-sm w-fit">
+          Manage Subscription
+        </div>
       }
     >
       <div className="max-w-sm flex flex-col gap-1">
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
index 245f3d75..36713943 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
@@ -138,7 +138,7 @@ export const Interactions = (props: {
 
   return (
     <div
-      className={`flex gap-2 text-tertiary text-sm item-center ${props.className}`}
+      className={`flex gap-[10px] text-tertiary text-sm item-center ${props.className}`}
     >
       {props.showRecommends === false ? null : (
         <RecommendButton
@@ -150,7 +150,7 @@ export const Interactions = (props: {
       {/*MENTIONS BUTTON*/}
       {props.quotesCount === 0 || props.showMentions === false ? null : (
         <button
-          className="flex w-fit gap-2 items-center"
+          className="flex w-fit gap-1 items-center"
           onClick={() => {
             if (!drawerOpen || drawer !== "quotes")
               openInteractionDrawer("quotes", document_uri, props.pageId);
@@ -166,7 +166,7 @@ export const Interactions = (props: {
       {/*COMMENT BUTTON*/}
       {props.showComments === false ? null : (
         <button
-          className="flex gap-2 items-center w-fit"
+          className="flex gap-1 items-center w-fit"
           onClick={() => {
             if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
               openInteractionDrawer("comments", document_uri, props.pageId);
@@ -246,7 +246,7 @@ export const ExpandedInteractions = (props: {
         {noInteractions ? (
           <div />
         ) : (
-          <>
+          <div className="flex flex-col gap-2 just">
             <div className="flex gap-2 sm:flex-row flex-col">
               {props.showRecommends === false ? null : (
                 <RecommendButton
@@ -272,9 +272,8 @@ export const ExpandedInteractions = (props: {
                   aria-label="Post quotes"
                 >
                   <QuoteTiny aria-hidden /> {props.quotesCount}
-                  {props.quotesCount}
                   <Separator classname="h-4! text-accent-contrast!" />
-                  Mention{props.quotesCount > 1 ? "" : "s"}
+                  Mention{props.quotesCount > 1 ? "s" : ""}
                 </ButtonSecondary>
               )}
               {!props.showComments ? null : (
@@ -302,21 +301,21 @@ export const ExpandedInteractions = (props: {
                       <Separator classname="h-4! text-accent-contrast!" />
                     </>
                   )}
-                  Comment{props.commentsCount > 1 ? "" : "s"}
+                  Comment{props.commentsCount > 1 ? "s" : ""}
                 </ButtonSecondary>
               )}
             </div>
-          </>
+            {subscribed && publication && (
+              <ManageSubscription
+                base_url={getPublicationURL(publication)}
+                pub_uri={publication.uri}
+                subscribers={publication.publication_subscriptions}
+              />
+            )}
+          </div>
         )}
 
         <EditButton publication={publication} leafletId={leafletId} />
-        {subscribed && publication && (
-          <ManageSubscription
-            base_url={getPublicationURL(publication)}
-            pub_uri={publication.uri}
-            subscribers={publication.publication_subscriptions}
-          />
-        )}
       </div>
     </div>
   );
diff --git a/components/RecommendButton.tsx b/components/RecommendButton.tsx
index 2eddd776..12cdd260 100644
--- a/components/RecommendButton.tsx
+++ b/components/RecommendButton.tsx
@@ -87,7 +87,7 @@ export function RecommendButton(props: {
           x: e.clientX,
           y: e.clientY - 16,
         },
-        text: <div className="text-xs">recc'd!</div>,
+        text: <div className="text-xs">Recc'd!</div>,
       });
     }
 
@@ -142,7 +142,7 @@ export function RecommendButton(props: {
               <Separator classname="h-4! text-accent-contrast!" />
             </>
           )}
-          {displayRecommended ? "You recommend!" : "Recommend"}
+          {displayRecommended ? "Recommended!" : "Recommend"}
         </div>
       </ButtonSecondary>
     );
-- 
2.51.2