diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 38e9e5485..86b7ee48e 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -50,7 +50,7 @@ import NoteActions from "../widgets/ribbon/NoteActions.jsx";
import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
import NoteBadges from "../widgets/layout/NoteBadges.jsx";
-import NoteTitleDetails from "../widgets/NoteTitleDetails.jsx";
+import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
import StatusBar from "../widgets/layout/StatusBar.jsx";
import InlineTitle from "../widgets/layout/InlineTitle.jsx";
@@ -155,7 +155,7 @@ export default class DesktopLayout {
new ScrollingContainer()
.filling()
.optChild(isNewLayout, )
- .optChild(isNewLayout, )
+ .optChild(isNewLayout, )
.optChild(!isNewLayout, new ContentHeader()
.child()
.child()
diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css
new file mode 100644
index 000000000..b29697d5c
--- /dev/null
+++ b/apps/client/src/widgets/layout/NoteTitleActions.css
@@ -0,0 +1,26 @@
+body.experimental-feature-new-layout {
+ .component.title-actions {
+ contain: none;
+ }
+
+ .title-actions {
+ max-width: var(--max-content-width);
+ padding: 0;
+ padding-inline-start: 24px;
+ padding-inline-end: 16px;
+ display: flex;
+ gap: 0.25em;
+ align-items: center;
+
+ .dropdown-menu {
+ input.form-control {
+ padding: 2px 8px;
+ margin-left: 1em;
+ }
+ }
+
+ .spacer {
+ flex-grow: 1;
+ }
+ }
+}
diff --git a/apps/client/src/widgets/NoteTitleDetails.tsx b/apps/client/src/widgets/layout/NoteTitleActions.tsx
similarity index 55%
rename from apps/client/src/widgets/NoteTitleDetails.tsx
rename to apps/client/src/widgets/layout/NoteTitleActions.tsx
index bbd00364c..765eefca1 100644
--- a/apps/client/src/widgets/NoteTitleDetails.tsx
+++ b/apps/client/src/widgets/layout/NoteTitleActions.tsx
@@ -1,13 +1,14 @@
-import CollectionProperties from "./note_bars/CollectionProperties";
-import { useNoteContext, useNoteProperty } from "./react/hooks";
+import CollectionProperties from "../note_bars/CollectionProperties";
+import { useNoteContext, useNoteProperty } from "../react/hooks";
+import "./NoteTitleActions.css";
-export default function NoteTitleDetails() {
+export default function NoteTitleActions() {
const { note } = useNoteContext();
const isHiddenNote = note && note.noteId !== "_search" && note.noteId.startsWith("_");
const noteType = useNoteProperty(note, "type");
return (
-
+
{note && !isHiddenNote && noteType === "book" && }
);
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 98d091358..155d64dc5 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -60,34 +60,12 @@ body.experimental-feature-new-layout {
}
}
- .title-details {
- max-width: var(--max-content-width);
- padding: 0;
- padding-inline-start: 24px;
- }
-
- .title-details {
- padding-inline-end: 16px;
-
- .dropdown-menu {
- input.form-control {
- padding: 2px 8px;
- margin-left: 1em;
- }
- }
-
- .spacer {
- flex-grow: 1;
- }
- }
-
.note-split.type-code:not(.mime-text-x-sqlite) .title-details {
background-color: var(--main-background-color);
}
.title-details {
margin-top: 0;
- contain: none;
display: flex;
gap: 0.25em;
margin: 0;