From 6f494e3e387fbcd14a4000b761f74e64e1dbe0a1 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 16 Dec 2025 23:33:57 +0200
Subject: [PATCH] style/inline title: use a better layout

---
 .../client/src/widgets/layout/InlineTitle.css | 20 +++++++++++++++----
 .../client/src/widgets/layout/InlineTitle.tsx |  6 ++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css
index be153dbb0..afe2066f2 100644
--- a/apps/client/src/widgets/layout/InlineTitle.css
+++ b/apps/client/src/widgets/layout/InlineTitle.css
@@ -13,6 +13,7 @@
     & > .inline-title-row {
         display: flex;
         align-items: center;
+        gap: 16px;
         transition: var(--title-transition);
 
         &.hidden {
@@ -26,12 +27,22 @@
     }
 
     .note-icon-widget {
-        padding: 0;
+        --note-icon-size: 35px;
     }
 
-    .inline-title-row {
-        border-bottom: 2px solid gray;
+    .note-title-caption {
+        flex-grow: 1;
     }
+
+    .note-title-widget {
+        --note-title-size: 1.8em;
+        --note-title-padding-inline: 0;
+
+        input {
+            line-height: 1;
+        }
+    }
+
 }
 
 .title-row {
@@ -59,10 +70,11 @@ body.prefers-centered-content .inline-title {
     display: flex;
     gap: 0.25em;
     margin: 0;
-    margin-top: 4px;
     list-style-type: none;
     opacity: .5;
     flex-wrap: wrap;
+    font-size: .85rem;
+    line-height: 1;
 
     span.value {
         font-weight: 500;
diff --git a/apps/client/src/widgets/layout/InlineTitle.tsx b/apps/client/src/widgets/layout/InlineTitle.tsx
index cdcb04442..6dec10c10 100644
--- a/apps/client/src/widgets/layout/InlineTitle.tsx
+++ b/apps/client/src/widgets/layout/InlineTitle.tsx
@@ -71,10 +71,12 @@ export default function InlineTitle() {
         >
             <div class={clsx("inline-title-row", titleHidden && "hidden")}>
                 <NoteIcon />
-                <NoteTitleWidget />
+                <div class="note-title-caption">
+                    <NoteTitleWidget />
+                    <NoteTitleDetails />
+                </div>
             </div>
 
-            <NoteTitleDetails />
             <EditedNotes />
             <NoteTypeSwitcher />
         </div>