From e01aa543b31442dd05034e3bccd45926226d78ed Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 16 Jan 2026 18:45:49 -0500
Subject: [PATCH] fixed button block layout weirdness, added an ative state to
 text alignment toolbar

---
 components/Blocks/Block.tsx                 |  4 +--
 components/Blocks/ButtonBlock.tsx           | 29 +++++++++++++--------
 components/Toolbar/TextAlignmentToolbar.tsx |  8 ++++++
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 305eaf00..292d6e79 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -351,7 +351,7 @@ export const BlockMultiselectIndicator = (props: BlockProps) => {
 };
 
 export const BlockLayout = (props: {
-  isSelected?: boolean;
+  isSelected: boolean;
   children: React.ReactNode;
   className?: string;
   optionsClassName?: string;
@@ -368,7 +368,7 @@ export const BlockLayout = (props: {
     >
       <div
         className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden
-          ${props.hasAlignment ? "w-fit" : "w-full"}
+        ${props.hasAlignment ? "w-fit" : "w-full"}
          ${props.isSelected ? "block-border-selected " : "block-border"}
          ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}`}
         style={{
diff --git a/components/Blocks/ButtonBlock.tsx b/components/Blocks/ButtonBlock.tsx
index ff60196d..fca9f5ed 100644
--- a/components/Blocks/ButtonBlock.tsx
+++ b/components/Blocks/ButtonBlock.tsx
@@ -32,19 +32,26 @@ export const ButtonBlock = (props: BlockProps & { preview?: boolean }) => {
   let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
 
   return (
-    <a
-      href={url?.data.value}
-      target="_blank"
-      className={`relative hover:outline-accent-contrast rounded-md! ${alignment === "justify" && "w-full"} ${isSelected ? "block-border-selected border-0!" : "block-border border-transparent! border-0!"}`}
+    <BlockLayout
+      isSelected={!!isSelected}
+      borderOnHover
+      hasAlignment={alignment !== "justify"}
+      className={`p-0! rounded-md! border-none!`}
     >
-      <ButtonPrimary
-        role="link"
-        type="submit"
-        fullWidth={alignment === "justify"}
+      <a
+        href={url?.data.value}
+        target="_blank"
+        className={` ${alignment === "justify" ? "w-full" : "w-fit"}`}
       >
-        {text?.data.value}
-      </ButtonPrimary>
-    </a>
+        <ButtonPrimary
+          role="link"
+          type="submit"
+          fullWidth={alignment === "justify"}
+        >
+          {text?.data.value}
+        </ButtonPrimary>
+      </a>
+    </BlockLayout>
   );
 };
 
diff --git a/components/Toolbar/TextAlignmentToolbar.tsx b/components/Toolbar/TextAlignmentToolbar.tsx
index 77efb599..c71993e4 100644
--- a/components/Toolbar/TextAlignmentToolbar.tsx
+++ b/components/Toolbar/TextAlignmentToolbar.tsx
@@ -7,6 +7,10 @@ import { Props } from "components/Icons/Props";
 export function TextAlignmentToolbar() {
   let focusedBlock = useUIState((s) => s.focusedEntity);
   let { rep } = useReplicache();
+  let alignment = useEntity(
+    focusedBlock?.entityID || null,
+    "block/text-alignment",
+  )?.data.value;
   let setAlignment = useCallback(
     (alignment: Fact<"block/text-alignment">["data"]["value"]) => {
       let blocks = useUIState.getState().selectedBlocks;
@@ -26,18 +30,21 @@ export function TextAlignmentToolbar() {
       <ToolbarButton
         onClick={() => setAlignment("left")}
         tooltipContent="Align Left"
+        active={alignment === "left"}
       >
         <AlignLeftSmall />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => setAlignment("center")}
         tooltipContent="Align Center"
+        active={alignment === "center"}
       >
         <AlignCenterSmall />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => setAlignment("right")}
         tooltipContent="Align Right"
+        active={alignment === "right"}
       >
         <AlignRightSmall />
       </ToolbarButton>
@@ -45,6 +52,7 @@ export function TextAlignmentToolbar() {
       <ToolbarButton
         onClick={() => setAlignment("justify")}
         tooltipContent="Align Justified"
+        active={alignment === "justify"}
       >
         <AlignJustifiedSmall />
       </ToolbarButton>
-- 
2.51.2