From 143b1827e66a3c61462ae091f1dd557377034c7a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 17 Dec 2025 00:09:15 +0200
Subject: [PATCH] style/inline title: tweak appearance

---
 .../client/src/widgets/layout/InlineTitle.css | 54 +++++++++++++------
 apps/client/src/widgets/note_title.css        |  2 +
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css
index afe2066f2..7b81da51e 100644
--- a/apps/client/src/widgets/layout/InlineTitle.css
+++ b/apps/client/src/widgets/layout/InlineTitle.css
@@ -8,9 +8,14 @@
 
 .inline-title {
     max-width: var(--max-content-width);
+    container-type: inline-size;
     padding-inline-start: 24px;
 
     & > .inline-title-row {
+        --icon-size: 35px;
+        --icon-padding-size: 10px;
+        --title-size: 1.8em;
+
         display: flex;
         align-items: center;
         gap: 16px;
@@ -20,29 +25,41 @@
             opacity: 0;
             pointer-events: none;
         }
+
+        .note-icon-widget {
+            --note-icon-size: 35px;
+            --note-icon-container-padding-size: 10px;
+        }
+
+        .note-title-caption {
+            flex-grow: 1;
+        }
+
+        .note-title-widget {
+            --note-title-size: 1.8em;
+            --note-title-padding-inline: 0;
+        }
+
+        @container (max-width: 500px) {
+            .note-icon-widget {
+                --note-icon-size: 25px;
+                --note-icon-container-padding-size: 6px;
+            }
+
+            .note-title-widget {
+                --note-title-size: 1.5em;
+            }
+
+            .title-details {
+                display: none;
+            }
+        }
     }
 
     &.hidden {
         display: none;
     }
 
-    .note-icon-widget {
-        --note-icon-size: 35px;
-    }
-
-    .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 {
@@ -70,11 +87,14 @@ body.prefers-centered-content .inline-title {
     display: flex;
     gap: 0.25em;
     margin: 0;
+    margin-top: .2rem;
     list-style-type: none;
     opacity: .5;
     flex-wrap: wrap;
     font-size: .85rem;
     line-height: 1;
+    flex-wrap: nowrap;
+    white-space: nowrap;
 
     span.value {
         font-weight: 500;
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 39338e9f4..09548692d 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -12,8 +12,10 @@ div.note-title-widget {
 .note-title-widget input.note-title {
     font-size: var(--note-title-size);
     border: 0;
+    border-radius: 0;
     min-width: 5em;
     width: 100%;
+    line-height: 1;
     padding-block: 0;
     padding-inline: var(--note-title-padding-inline);
 }