From 5446d8a9322a28d756e7328eead44f87504aec3d Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 17 Dec 2025 00:33:33 +0200
Subject: [PATCH] style/inline title: improve the note icon focus indicator

---
 apps/client/src/widgets/layout/InlineTitle.css |  1 +
 apps/client/src/widgets/note_icon.css          | 13 ++++++++-----
 apps/client/src/widgets/note_title.css         |  1 -
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css
index 7b81da51e..81195597c 100644
--- a/apps/client/src/widgets/layout/InlineTitle.css
+++ b/apps/client/src/widgets/layout/InlineTitle.css
@@ -7,6 +7,7 @@
 }
 
 .inline-title {
+    margin-top: 2px; /* Allow space for the focus outline */
     max-width: var(--max-content-width);
     container-type: inline-size;
     padding-inline-start: 24px;
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index fa1a94e44..b95eda46a 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -81,11 +81,15 @@ body.experimental-feature-new-layout {
     --note-icon-button-color: white;
 
     .note-icon-widget button.note-icon {
+        --input-focus-outline-color: var(--note-icon-button-hover-background-color);
+
         position: relative;
-        outline-offset: 4px;
-        border-radius: 50%;
         background: transparent !important;
 
+        &, &:hover {
+            border-radius: 50%; 
+        }
+
         /* The icon */
         &::before {
             position: relative;
@@ -102,9 +106,8 @@ body.experimental-feature-new-layout {
             background: var(--note-icon-button-background-color);
         }
 
-        &:hover::after {
-            background: var(--note-icon-button-hover-background-color);
-            transition: background 200ms ease-out;
+        &:focus-visible {
+            outline: 2px solid var(--note-icon-button-color);
         }
     }
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 09548692d..3cef8d561 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -35,7 +35,6 @@ body.mobile .note-title-widget input.note-title {
 
 body.experimental-feature-new-layout {
     .title-row {
-
         container-type: size;
         border-bottom: 1px solid var(--main-border-color);
         transition: border 400ms ease-out;