From 1422cf1dfda2b8084d6417328ad7f9ea61073818 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Thu, 8 Jan 2026 19:14:47 -0500
Subject: [PATCH] fiz some jumping on action button

---
 app/[leaflet_id]/publish/PublishPost.tsx | 6 +++++-
 components/ActionBar/ActionButton.tsx    | 2 +-
 components/utils/DotLoader.tsx           | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/[leaflet_id]/publish/PublishPost.tsx b/app/[leaflet_id]/publish/PublishPost.tsx
index 6b0bdf15..4b890427 100644
--- a/app/[leaflet_id]/publish/PublishPost.tsx
+++ b/app/[leaflet_id]/publish/PublishPost.tsx
@@ -199,7 +199,11 @@ const PublishPostForm = (
                 className="place-self-end h-[30px]"
                 disabled={charCount > 300}
               >
-                {isLoading ? <DotLoader /> : "Publish this Post!"}
+                {isLoading ? (
+                  <DotLoader className="h-[23px]" />
+                ) : (
+                  "Publish this Post!"
+                )}
               </ButtonPrimary>
             </div>
             {oauthError && (
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index e34992c7..17dac49e 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -72,7 +72,7 @@ export const ActionButton = (
       <div
         className={`flex flex-col pr-1 ${subtext && "leading-snug"} max-w-full min-w-0  ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
       >
-        <div className="truncate text-left pt-[1px]">{label}</div>
+        <div className="truncate text-left">{label}</div>
         {subtext && (
           <div className="text-xs text-tertiary font-normal text-left">
             {subtext}
diff --git a/components/utils/DotLoader.tsx b/components/utils/DotLoader.tsx
index 233ff399..67571f22 100644
--- a/components/utils/DotLoader.tsx
+++ b/components/utils/DotLoader.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-export function DotLoader() {
+export function DotLoader(props: { className?: string }) {
   let [dots, setDots] = useState(1);
   useEffect(() => {
     let id = setInterval(() => {
@@ -11,7 +11,7 @@ export function DotLoader() {
     };
   }, []);
   return (
-    <div className="w-[26px] h-[24px] text-center text-sm">
+    <div className={`w-[26px] h-[24px] text-center text-sm ${props.className}`}>
       {".".repeat(dots) + "\u00a0".repeat(3 - dots)}
     </div>
   );
-- 
2.51.2