From cad86d4b21e693eda5d3afdb3aff53f4ba5bab6e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 16 Dec 2025 22:54:55 +0200
Subject: [PATCH] style/note title & icon: tweak appearance

---
 apps/client/src/widgets/note_icon.css  | 2 ++
 apps/client/src/widgets/note_icon.tsx  | 2 +-
 apps/client/src/widgets/note_title.css | 4 ++--
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index f0fdb8c4d..3274f2124 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -81,6 +81,8 @@ body.experimental-feature-new-layout {
 
     .note-icon-widget button.note-icon {
         position: relative;
+        outline-offset: 4px;
+        border-radius: 50%;
         background: transparent !important;
 
         &:hover {
diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx
index 4401b013f..28b118b1a 100644
--- a/apps/client/src/widgets/note_icon.tsx
+++ b/apps/client/src/widgets/note_icon.tsx
@@ -42,7 +42,7 @@ export default function NoteIcon() {
             className="note-icon-widget"
             title={t("note_icon.change_note_icon")}
             dropdownContainerStyle={{ width: "610px" }}
-            buttonClassName={`note-icon ${icon ?? "bx bx-empty"}`}
+            buttonClassName={`note-icon tn-focusable-button ${icon ?? "bx bx-empty"}`}
             hideToggleArrow
             disabled={viewScope?.viewMode !== "default"}
         >
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 6f64b79bf..39338e9f4 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -46,12 +46,12 @@ body.experimental-feature-new-layout {
         .note-icon-widget {
             --note-icon-size: 20px;
             --note-icon-container-padding-size: 4px;
-            margin-inline: 8px;
+            margin-inline: 12px 8px;
         }
         
         .note-title-widget {
             --note-title-size: 18px;
-            --note-title-padding-inline: 4px;
+            --note-title-padding-inline: 0;
         }
 
         @container (max-width: 700px) {