UI fixes (#8200)

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);

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,

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) {

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;

apps/client/src/widgets/layout/NoteTitleActions.css

@@ -4,12 +4,21 @@ 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: var(--title-actions-padding-start) var(--title-actions-padding-end);
+
+        body.prefers-centered-content .note-split:not(.full-content-width) & {
+            margin-inline: auto;
+        }
 
         &:not(:empty) {
-            padding: 0.75em 15px;
+            padding-block: 0.75em;
         }
 
         .edited-notes {
@@ -40,5 +49,11 @@ body.experimental-feature-new-layout {
                 padding: 0;
             }
         }
+
+        > .collapsible,
+        > .note-type-switcher {
+            padding-inline-start: calc(24px - var(--title-actions-padding-start));
+            padding-inline-end: calc(24px - var(--title-actions-padding-end));
+        }
     }
 }

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%;
+}
+
+.note-detail-editable-text .ck.ck-editor__editable_inline {
+    padding: 0;
 }