From 3f86c809ce732bc86a2f8f8ef463ea07a1b76f88 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 28 Dec 2025 10:12:01 +0200 Subject: [PATCH 1/7] style/note title actions: properly align when the content is centered --- apps/client/src/widgets/layout/NoteTitleActions.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css index db2810c1e..92af19f35 100644 --- a/apps/client/src/widgets/layout/NoteTitleActions.css +++ b/apps/client/src/widgets/layout/NoteTitleActions.css @@ -5,6 +5,8 @@ body.experimental-feature-new-layout { .title-actions { display: flex; + max-width: var(--max-content-width); + margin-inline: auto; flex-direction: column; gap: 0.5em; From 79d2010bfa035b7b4bc33b544f9aadcb2430aee1 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 28 Dec 2025 10:18:50 +0200 Subject: [PATCH 2/7] style/note title actions: properly align when the content is centered --- apps/client/src/widgets/layout/NoteTitleActions.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css index 92af19f35..43904b2d4 100644 --- a/apps/client/src/widgets/layout/NoteTitleActions.css +++ b/apps/client/src/widgets/layout/NoteTitleActions.css @@ -6,10 +6,13 @@ body.experimental-feature-new-layout { .title-actions { display: flex; max-width: var(--max-content-width); - margin-inline: auto; flex-direction: column; gap: 0.5em; + body.prefers-centered-content & { + margin-inline: auto; + } + &:not(:empty) { padding: 0.75em 15px; } From 2bf862d5b9590eb854b871b4974818c97ada7e10 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 28 Dec 2025 19:20:46 +0200 Subject: [PATCH 3/7] style/note scrolling container: make the alignment of children more consistent --- apps/client/src/widgets/collections/NoteList.css | 2 +- .../client/src/widgets/containers/scrolling_container.css | 7 +++++++ apps/client/src/widgets/layout/InlineTitle.css | 1 - apps/client/src/widgets/layout/NoteTitleActions.css | 8 +++++++- .../client/src/widgets/type_widgets/text/EditableText.css | 5 ++++- 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/apps/client/src/widgets/collections/NoteList.css b/apps/client/src/widgets/collections/NoteList.css index f8e5ae14e..bdc6b3dc7 100644 --- a/apps/client/src/widgets/collections/NoteList.css +++ b/apps/client/src/widgets/collections/NoteList.css @@ -12,7 +12,7 @@ body.prefers-centered-content .note-list-widget:not(.full-height) { } .note-list-widget .note-list { - padding: 10px; + padding-block: 10px; } .note-list-widget.full-height, diff --git a/apps/client/src/widgets/containers/scrolling_container.css b/apps/client/src/widgets/containers/scrolling_container.css index b9af1ccde..36d277a17 100644 --- a/apps/client/src/widgets/containers/scrolling_container.css +++ b/apps/client/src/widgets/containers/scrolling_container.css @@ -2,6 +2,13 @@ overflow: auto; scroll-behavior: smooth; position: relative; + + > .inline-title, + > .note-detail > .note-detail-editable-text, + > .note-list-widget:not(.full-height) { + padding-inline: 24px; + } + } .note-split.type-code:not(.mime-text-x-sqlite) { diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index ff2bbd791..33ececc47 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -10,7 +10,6 @@ max-width: var(--max-content-width); container-type: inline-size; padding-top: 20px; - padding-inline-start: 24px; & > .inline-title-row { --icon-size: 35px; diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css index 43904b2d4..29925ec0b 100644 --- a/apps/client/src/widgets/layout/NoteTitleActions.css +++ b/apps/client/src/widgets/layout/NoteTitleActions.css @@ -8,13 +8,14 @@ body.experimental-feature-new-layout { max-width: var(--max-content-width); flex-direction: column; gap: 0.5em; + padding-inline: 12px 8px; body.prefers-centered-content & { margin-inline: auto; } &:not(:empty) { - padding: 0.75em 15px; + padding-block: 0.75em; } .edited-notes { @@ -45,5 +46,10 @@ body.experimental-feature-new-layout { padding: 0; } } + + > .collapsible, + > .note-type-switcher { + margin-inline: 12px; + } } } diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.css b/apps/client/src/widgets/type_widgets/text/EditableText.css index a2e1af8c5..f36f850ec 100644 --- a/apps/client/src/widgets/type_widgets/text/EditableText.css +++ b/apps/client/src/widgets/type_widgets/text/EditableText.css @@ -1,6 +1,5 @@ .note-detail-editable-text { font-family: var(--detail-font-family); - padding-inline-start: 14px; height: 100%; } @@ -49,4 +48,8 @@ body.heading-style-underline .note-detail-editable-text h6 { border-bottom: 1px box-shadow: none !important; min-height: 50px; height: 100%; +} + +:root .ck.ck-editor__editable_inline { + padding: 0; } \ No newline at end of file From b3feb38369972caf3b37b3ddc5e550b92eff798d Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 28 Dec 2025 19:45:48 +0200 Subject: [PATCH 4/7] style/options: properly align the title with the option cards when the content is centered --- apps/client/src/stylesheets/theme-next/pages.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css index c9a34789b..f323d0000 100644 --- a/apps/client/src/stylesheets/theme-next/pages.css +++ b/apps/client/src/stylesheets/theme-next/pages.css @@ -151,6 +151,11 @@ --options-title-font-size: .75rem; --options-title-offset: 13px; } + +.note-split.options { + --preferred-max-content-width: var(--options-card-max-width); +} + /* Create a gap at the top of the option pages */ .note-detail-content-widget-content.options>*:first-child { margin-top: var(--options-first-item-top-margin, 1em); @@ -185,10 +190,6 @@ body.experimental-feature-new-layout .note-detail-content-widget-content.options padding: var(--options-card-padding); } -body.prefers-centered-content .options-section:not(.tn-no-card) { - margin-inline: auto; -} - body.desktop .options-section:not(.tn-no-card) { min-width: var(--options-card-min-width); max-width: var(--options-card-max-width); From 1e3135dea0083aaa929e7dc13a2813d99a6368aa Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 28 Dec 2025 20:19:51 +0200 Subject: [PATCH 5/7] style/note title actions: fix width for full-width content notes --- apps/client/src/widgets/layout/NoteTitleActions.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css index 29925ec0b..bc1d861ea 100644 --- a/apps/client/src/widgets/layout/NoteTitleActions.css +++ b/apps/client/src/widgets/layout/NoteTitleActions.css @@ -10,7 +10,7 @@ body.experimental-feature-new-layout { gap: 0.5em; padding-inline: 12px 8px; - body.prefers-centered-content & { + body.prefers-centered-content .note-split:not(.full-content-width) & { margin-inline: auto; } From 621ed5b9de1299cb34175c6a64e1e98fbae80a63 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 28 Dec 2025 20:24:24 +0200 Subject: [PATCH 6/7] Update apps/client/src/widgets/type_widgets/text/EditableText.css Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- apps/client/src/widgets/type_widgets/text/EditableText.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.css b/apps/client/src/widgets/type_widgets/text/EditableText.css index f36f850ec..9927a65ee 100644 --- a/apps/client/src/widgets/type_widgets/text/EditableText.css +++ b/apps/client/src/widgets/type_widgets/text/EditableText.css @@ -50,6 +50,6 @@ body.heading-style-underline .note-detail-editable-text h6 { border-bottom: 1px height: 100%; } -:root .ck.ck-editor__editable_inline { +.note-detail-editable-text .ck.ck-editor__editable_inline { padding: 0; } \ No newline at end of file From 3638e6b12cd7cf8eb291492ac25c1247a42fc126 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 28 Dec 2025 20:31:32 +0200 Subject: [PATCH 7/7] style/note title actions: fix an issue identified by gemini-code-assist --- apps/client/src/widgets/layout/NoteTitleActions.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css index bc1d861ea..b1aa37d89 100644 --- a/apps/client/src/widgets/layout/NoteTitleActions.css +++ b/apps/client/src/widgets/layout/NoteTitleActions.css @@ -4,11 +4,14 @@ body.experimental-feature-new-layout { } .title-actions { + --title-actions-padding-start: 12px; + --title-actions-padding-end: 8px; + display: flex; max-width: var(--max-content-width); flex-direction: column; gap: 0.5em; - padding-inline: 12px 8px; + padding-inline: var(--title-actions-padding-start) var(--title-actions-padding-end); body.prefers-centered-content .note-split:not(.full-content-width) & { margin-inline: auto; @@ -49,7 +52,8 @@ body.experimental-feature-new-layout { > .collapsible, > .note-type-switcher { - margin-inline: 12px; + padding-inline-start: calc(24px - var(--title-actions-padding-start)); + padding-inline-end: calc(24px - var(--title-actions-padding-end)); } } }