From 0a7cdc74d392e79479d58f5c9344b144e7f751bf Mon Sep 17 00:00:00 2001
From: Maharshi Patel <maharshi.patel988@gmail.com>
Date: Thu, 11 Jan 2024 06:50:19 +0530
Subject: [PATCH] fix: add empty space for notification mark read

mark-as-read added 8px width which caused layout shift
so i added empty space to compensate for it
---
 frappe/public/scss/desk/notification.scss | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frappe/public/scss/desk/notification.scss b/frappe/public/scss/desk/notification.scss
index 4affdb5f87..7e0c0f974d 100644
--- a/frappe/public/scss/desk/notification.scss
+++ b/frappe/public/scss/desk/notification.scss
@@ -139,18 +139,18 @@
 	justify-content: space-between;
 
 	&.unread {
-		&:hover {
-			.mark-as-read {
-				flex-shrink: 0;
-				align-self: center;
-				justify-self: end;
-				width: 8px;
-				height: 8px;
-				border: 2px solid var(--invert-neutral);
-				border-radius: 1000px;
-			}
+		.mark-as-read {
+			flex-shrink: 0;
+			align-self: center;
+			justify-self: end;
+			width: 8px;
+			height: 8px;
 		}
 
+		&:hover .mark-as-read {
+			border: 2px solid var(--invert-neutral);
+			border-radius: 1000px;
+		}
 		.notification-body::before {
 			background: var(--invert-neutral);
 		}