oggle external editing button overlaps with bold button

laurent22 · Mar 15, 2024 · 4017832 · 4017832
1 parent 361e6d0
commit 4017832
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
@@ -351,15 +351,14 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 	useEffect(() => {
 		const theme = themeStyle(props.themeId);
 		const backgroundColor = props.whiteBackgroundNoteRendering ? lightTheme.backgroundColor : theme.backgroundColor;
-		const leftExtraToolbarContainerWidth = props.watchedNoteFiles.length > 0 ? 120 : 80;
 
 		const element = document.createElement('style');
 		element.setAttribute('id', 'tinyMceStyle');
 		document.head.appendChild(element);
 		element.appendChild(document.createTextNode(`
 			.joplin-tinymce .tox-editor-header {
-				padding-left: ${leftExtraToolbarContainerWidth + styles.leftExtraToolbarContainer.padding * 2}px;
-				padding-right: ${styles.rightExtraToolbarContainerWidth + styles.rightExtraToolbarContainer.padding * 2}px;
+				padding-left: ${styles.leftExtraToolbarContainer.width + styles.leftExtraToolbarContainer.padding * 2}px;
+				padding-right: ${styles.rightExtraToolbarContainer.width + styles.rightExtraToolbarContainer.padding * 2}px;
 			}
 			
 			.tox .tox-toolbar,

diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.ts b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.ts
@@ -4,7 +4,7 @@ const { buildStyle } = require('@joplin/lib/theme');
 
 export default function styles(props: NoteBodyEditorProps) {
 	const leftExtraToolbarContainerWidth = props.watchedNoteFiles.length > 0 ? 120 : 80;
-	return buildStyle(['TinyMCE', props.style.width, props.style.height], props.themeId, (theme: any) => {
+	return buildStyle(['TinyMCE', props.style.width, props.style.height, leftExtraToolbarContainerWidth], props.themeId, (theme: any) => {
 		const extraToolbarContainer = {
 			boxSizing: 'content-box',
 			backgroundColor: theme.backgroundColor3,
@@ -39,7 +39,7 @@ export default function styles(props: NoteBodyEditorProps) {
 			},
 			leftExtraToolbarContainer: {
 				...extraToolbarContainer,
-				width: { leftExtraToolbarContainerWidth },
+				width: leftExtraToolbarContainerWidth,
 				left: 0,
 			},
 			rightExtraToolbarContainer: {