From 5aba0bc176b06391a33523c863352f11999019df Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 14 Jan 2026 21:40:37 -0500
Subject: [PATCH] adjusting full bleed styling for image blocks

---
 components/Blocks/Block.tsx      |  8 ++++++--
 components/Blocks/ImageBlock.tsx | 10 ++--------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 5558ec35..6fc97a4f 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -393,6 +393,7 @@ export const BlockLayout = (props: {
   isSelected?: boolean;
   children: React.ReactNode;
   className?: string;
+  optionsClassName?: string;
   hasBackground?: "accent" | "page";
   borderOnHover?: boolean;
   hasAlignment?: boolean;
@@ -422,6 +423,7 @@ export const BlockLayout = (props: {
       </div>
       {props.isSelected && (
         <NonTextBlockOptions
+          optionsClassName={props.optionsClassName}
           areYouSure={props.areYouSure}
           setAreYouSure={props.setAreYouSure}
         />
@@ -433,9 +435,9 @@ export const BlockLayout = (props: {
 let debounced: null | number = null;
 
 const NonTextBlockOptions = (props: {
-  isCanvas?: boolean;
   areYouSure?: boolean;
   setAreYouSure?: (value: boolean) => void;
+  optionsClassName?: string;
 }) => {
   let { rep } = useReplicache();
   let entity_set = useEntitySetContext();
@@ -453,7 +455,9 @@ const NonTextBlockOptions = (props: {
   if (isMultiselected) return;
 
   return (
-    <div className="flex gap-1 absolute -top-[25px] right-2 pb-0.5 pt-1 px-1 rounded-t-md bg-border text-bg-page">
+    <div
+      className={`flex gap-1 absolute -top-[25px] right-2 pb-0.5 pt-1 px-1 rounded-t-md bg-border text-bg-page ${props.optionsClassName}`}
+    >
       {focusedEntityType?.data.value !== "canvas" && (
         <>
           <button
diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx
index e7cb3bab..f3c457ec 100644
--- a/components/Blocks/ImageBlock.tsx
+++ b/components/Blocks/ImageBlock.tsx
@@ -133,17 +133,11 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) {
     );
   }
 
-  let imageClassName = isFullBleed
-    ? ""
-    : isSelected
-      ? "block-border-selected border-transparent! "
-      : "block-border border-transparent!";
-
   let isLocalUpload = localImages.get(image.data.src);
 
   let blockClassName = `
     relative group/image border-transparent! p-0! w-fit!
-    ${isFullBleed && "-mx-3 sm:-mx-4"}
+    ${isFullBleed && "-mx-[14px] sm:-mx-[18px] rounded-[0px]! sm:outline-offset-[-16px]! -outline-offset[-12px]!"}
     ${isFullBleed ? (isFirst ? "-mt-3 sm:-mt-4" : prevIsFullBleed ? "-mt-1" : "") : ""}
     ${isFullBleed ? (isLast ? "-mb-4" : nextIsFullBleed ? "-mb-2" : "") : ""}
     `;
@@ -153,6 +147,7 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) {
       hasAlignment
       isSelected={!!isSelected}
       className={blockClassName}
+      optionsClassName="top-[-8px]!"
     >
       {isLocalUpload || image.data.local ? (
         <img
@@ -171,7 +166,6 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) {
           }
           height={image?.data.height}
           width={image?.data.width}
-          className={imageClassName}
         />
       )}
       {altText !== undefined && !props.preview ? (
-- 
2.51.2