Desktop: Accessibility: Make Markdown toolbar scrollable when low on space (#11636)

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx

@@ -33,6 +33,7 @@ function Toolbar(props: ToolbarProps) {
 	return (
 		<ToolbarBase
 			style={styles.root}
+			scrollable={true}
 			items={props.toolbarButtonInfos}
 			disabled={!!props.disabled}
 			aria-label={_('Editor actions')}

packages/app-desktop/gui/NoteToolbar/NoteToolbar.tsx

@@ -35,6 +35,7 @@ function NoteToolbar(props: NoteToolbarProps) {
 	return (
 		<ToolbarBase
 			style={styles.root}
+			scrollable={false}
 			items={props.toolbarButtonInfos}
 			disabled={props.disabled}
 			aria-label={_('Note')}

packages/app-desktop/gui/ToolbarBase.tsx

@@ -10,6 +10,7 @@ import { focus } from '@joplin/lib/utils/focusHandler';
 
 interface Props {
 	themeId: number;
+	scrollable: boolean;
 	style: React.CSSProperties;
 	items: ToolbarItem[];
 	disabled: boolean;
@@ -177,7 +178,7 @@ const ToolbarBaseComponent: React.FC<Props> = props => {
 	return (
 		<div
 			ref={containerRef}
-			className='editor-toolbar'
+			className={`editor-toolbar ${props.scrollable ? '-scrollable' : ''}`}
 			style={props.style}
 
 			role='toolbar'
@@ -191,7 +192,8 @@ const ToolbarBaseComponent: React.FC<Props> = props => {
 			<div className='group'>
 				{centerItemComps}
 			</div>
-			<div className='group -right'>
+			<div className='spacer' />
+			<div className='group'>
 				{rightItemComps}
 			</div>
 		</div>

packages/app-desktop/gui/styles/editor-toolbar.scss

@@ -7,15 +7,21 @@
 	padding: var(--joplin-toolbar-padding);
 	padding-right: var(--joplin-main-padding);
 
+	&.-scrollable {
+		overflow-x: auto;
+	}
+
 	> .group {
 		display: flex;
 		flex-direction: row;
 		box-sizing: border-box;
-		min-width: 0;
 
-		&.-right {
+		min-width: 0;
-			flex: 1;
+		flex-shrink: 0;
-			justify-content: flex-end;
+	}
-		}
+
+	> .spacer {
+		flex-grow: 1;
+		min-width: 7px;
 	}
 }