From 9542c9776afd6add49500ecf0347eb5fd53984f5 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 16 Dec 2025 20:30:58 +0200
Subject: [PATCH] style/note title & icon: use CSS variables to adjust size,
 improve the layout on different sizes

---
 apps/client/src/widgets/note_icon.css  | 23 ++++++++++------
 apps/client/src/widgets/note_title.css | 38 ++++++++++++++++++--------
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index 2163de8e5..4d023b6fe 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -1,17 +1,22 @@
-.note-icon-widget {
-    padding-inline-start: 10px;
-    margin-inline-end: 0;
-    width: 50px;
-    height: 50px;
+div.note-icon-widget {
+    /* The size of the icon */
+    --note-icon-size: 30px;
+    /* The padding size for the icon container */
+    --note-icon-container-padding-size: 10px;
+    contain: unset;
 }
 
 .note-icon-widget button.note-icon {
-    font-size: 180%;
-    background-color: transparent;
+    --size: calc(var(--note-icon-size) + var(--note-icon-container-padding-size) * 2);
+
+    width: var(--size);
+    height: var(--size);
+    padding: 0;
     border: 1px solid transparent;
-    padding: 6px;
-    cursor: pointer;
+    background-color: transparent;
     color: var(--muted-text-color);
+    cursor: pointer;
+    font-size: var(--note-icon-size);
 }
 
 .note-icon-widget button.note-icon:disabled {
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index fb61d7b41..72ccb0139 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -1,15 +1,21 @@
-.note-title-widget {
+div.note-title-widget {
+    /* The font size for the title */
+    --note-title-size: 180%;
+    /* The horizontal padding of the title widget */
+    --note-title-padding-inline: 12px;
+
     flex-grow: 1000;
-    height: 100%;
+    height: auto;
+    contain: unset;
 }
 
 .note-title-widget input.note-title {
-    font-size: 110%;
+    font-size: var(--note-title-size);
     border: 0;
-    margin: 2px 0px;
     min-width: 5em;
     width: 100%;
-    padding: 1px 12px;
+    padding-block: 0;
+    padding-inline: var(--note-title-padding-inline);
 }
 
 .note-title-widget input.note-title[readonly] {
@@ -22,15 +28,12 @@
 }
 
 body.mobile .note-title-widget input.note-title {
-    padding: 0;
-}
-
-body.desktop .note-title-widget input.note-title {
-    font-size: 180%;
+    --note-title-padding-inline: 0;
 }
 
 body.experimental-feature-new-layout {
     .title-row {
+
         container-type: size;
         border-bottom: 1px solid var(--main-border-color);
         transition: border 400ms ease-out;
@@ -40,9 +43,20 @@ body.experimental-feature-new-layout {
             transition: none;
         }
 
+        .note-icon-widget {
+            --note-icon-size: 20px;
+            --note-icon-padding-size: 8px;
+        }
+        
+        .note-title-widget {
+            --note-title-size: 18px;
+            --note-title-padding-inline: 4px;
+        }
+
         @container (max-width: 700px) {
-            .note-icon-widget .note-icon {
-                font-size: 1.3em;
+            .note-title-widget {
+                --note-title-size: 1.25rem;
+                --note-title-padding-inline: 4px;
             }
 
             .note-title-widget {