From 7a3e6fde7f3a05cbf79d3c259d2eb68df04c8d1e Mon Sep 17 00:00:00 2001
From: Julien <32807437+julien-me@users.noreply.github.com>
Date: Tue, 14 Mar 2023 00:26:56 +0800
Subject: [PATCH] Desktop: Fixes #7907: Fixed height when controls are on a
 single row (#7912)

---
 .../gui/NoteListControls/NoteListControls.tsx      |  5 ++++-
 .../gui/NoteListWrapper/NoteListWrapper.tsx        | 14 +++++++++++---
 packages/lib/theme.ts                              |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/app-desktop/gui/NoteListControls/NoteListControls.tsx b/packages/app-desktop/gui/NoteListControls/NoteListControls.tsx
index 46897c5c1..4534ef584 100644
--- a/packages/app-desktop/gui/NoteListControls/NoteListControls.tsx
+++ b/packages/app-desktop/gui/NoteListControls/NoteListControls.tsx
@@ -26,6 +26,7 @@ interface Props {
 	notesParentType: string;
 	height: number;
 	width: number;
+	onContentHeightChange: (sameRow: boolean)=> void;
 }
 
 interface Breakpoints {
@@ -179,10 +180,12 @@ function NoteListControls(props: Props) {
 		if (breakpoint === dynamicBreakpoints.Xl) {
 			noteControlsRef.current.style.flexDirection = 'row';
 			searchAndSortRef.current.style.flex = '2 1 auto';
+			props.onContentHeightChange(true);
 		} else {
 			noteControlsRef.current.style.flexDirection = 'column';
+			props.onContentHeightChange(false);
 		}
-	}, [breakpoint, dynamicBreakpoints]);
+	}, [breakpoint, dynamicBreakpoints, props.onContentHeightChange]);
 
 	useEffect(() => {
 		CommandService.instance().registerRuntime('focusSearch', focusSearchRuntime(searchBarRef));
diff --git a/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx b/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx
index 5595cdb4f..bd566e119 100644
--- a/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx
+++ b/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx
@@ -1,6 +1,6 @@
 import { themeStyle } from '@joplin/lib/theme';
 import * as React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import NoteList from '../NoteList/NoteList';
 import NoteListControls from '../NoteListControls/NoteListControls';
 import { Size } from '../ResizableLayout/utils/types';
@@ -22,7 +22,15 @@ const StyledRoot = styled.div`
 
 export default function NoteListWrapper(props: Props) {
 	const theme = themeStyle(props.themeId);
-	const controlHeight = theme.topRowHeight;
+	const [controlHeight, setControlHeight] = useState(theme.topRowHeight);
+
+	const onContentHeightChange = (sameRow: boolean) => {
+		if (sameRow) {
+			setControlHeight(theme.topRowHeight);
+		} else {
+			setControlHeight(theme.topRowHeight * 2);
+		}
+	};
 
 	const noteListSize = useMemo(() => {
 		return {
@@ -33,7 +41,7 @@ export default function NoteListWrapper(props: Props) {
 
 	return (
 		<StyledRoot>
-			<NoteListControls height={controlHeight} width={noteListSize.width}/>
+			<NoteListControls height={controlHeight} width={noteListSize.width} onContentHeightChange={onContentHeightChange}/>
 			<NoteList resizableLayoutEventEmitter={props.resizableLayoutEventEmitter} size={noteListSize} visible={props.visible}/>
 		</StyledRoot>
 	);
diff --git a/packages/lib/theme.ts b/packages/lib/theme.ts
index 6953397b7..d8dfb24a6 100644
--- a/packages/lib/theme.ts
+++ b/packages/lib/theme.ts
@@ -60,7 +60,7 @@ const globalStyle: any = {
 	toolbarPadding: 6,
 	appearance: 'light',
 	mainPadding: 12,
-	topRowHeight: 81,
+	topRowHeight: 50,
 	editorPaddingLeft: 8,
 };