From e61b46c3b5dd0a919694294cd3e963b3036e1d68 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Fri, 20 Feb 2026 11:18:35 +0500
Subject: [PATCH] editor: improve hr styling

---
 packages/editor/styles/styles.css | 37 ++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/editor/styles/styles.css b/packages/editor/styles/styles.css
index 03f8eff50..2c7a33c08 100644
--- a/packages/editor/styles/styles.css
+++ b/packages/editor/styles/styles.css
@@ -38,15 +38,24 @@
   margin-block: 0px;
   cursor: pointer;
   position: relative;
-  background-color: var(--separator);
   width: 100%;
-  height: 2px;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 5px;
 }
 
-.ProseMirror hr.ProseMirror-selectednode::after {
-  border: 2px solid var(--accent);
+.ProseMirror hr::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--separator);
+}
+
+.ProseMirror hr.ProseMirror-selectednode {
+  background-color: var(--background-secondary);
 }
 
 .ProseMirror p code {
@@ -399,17 +408,13 @@ img.ProseMirror-separator {
   .ProseMirror blockquote {
     margin-inline: 5px;
     padding-inline-start: 10px;
-}
+  }
 
-.ProseMirror a > span.image-view-content-wrap {
-  display: block;
-  margin-inline: 5px;
-  padding-inline-start: 10px;
-}
-
-.ProseMirror hr {
-  height: 5px;
-}
+  .ProseMirror a > span.image-view-content-wrap {
+    display: block;
+    margin-inline: 5px;
+    padding-inline-start: 10px;
+  }
 }