diff --git a/packages/diffs/src/react/constants.ts b/packages/diffs/src/react/constants.ts
index e10e32f9c..1ece962ab 100644
--- a/packages/diffs/src/react/constants.ts
+++ b/packages/diffs/src/react/constants.ts
@@ -2,7 +2,8 @@ import type { CSSProperties } from 'react';
 
 export const HoverSlotStyles: CSSProperties = {
   position: 'absolute',
-  top: 0,
-  bottom: 0,
+  inset: '0',
+  // insetBlockStart: '0',
+  // insetBlockEnd: '0',
   textAlign: 'center',
 };
diff --git a/packages/diffs/src/style.css b/packages/diffs/src/style.css
index f555e2320..afb5f5b64 100644
--- a/packages/diffs/src/style.css
+++ b/packages/diffs/src/style.css
@@ -546,13 +546,16 @@
 
   [data-hover-slot] {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     display: flex;
+    align-items: center;
     justify-content: flex-end;
   }
 
+  [data-indicators='bars'] [data-hover-slot] {
+    inset-inline-start: 5px;
+  }
+
   @media (pointer: fine) {
     [data-expand-button]:hover {
       opacity: 1;
@@ -769,14 +772,13 @@
     }
 
     [data-hover-slot] {
-      right: unset;
-      left: 0;
+      inset-inline-start: 0;
+      inset-inline-end: unset;
       justify-content: flex-start;
     }
 
     &[data-indicators='bars'] [data-hover-slot] {
-      /* Using 5px here because theres a 1px separator after the bar */
-      left: 5px;
+      inset-inline-start: 5px;
     }
   }