From d59382c2b943890cef780a5310e775481df69d33 Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Tue, 21 Nov 2023 09:07:24 -0800
Subject: [PATCH 1/3] Use the dense Toolbar variant to get a better height
 toolbar

---
 src/components/CompanionWindow.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
index 0f4cca2144..58b9be54a5 100644
--- a/src/components/CompanionWindow.js
+++ b/src/components/CompanionWindow.js
@@ -161,6 +161,7 @@ export class CompanionWindow extends Component {
               minHeight: 'max-content',
               paddingLeft: 2,
             }}
+            variant="dense"
             className={[ns('companion-window-header'), size.width < 370 ? classes.small : null].join(' ')}
             disableGutters
           >

From 9bee625e9870531e1539fd6c21e767da30f12ce5 Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Tue, 21 Nov 2023 09:10:08 -0800
Subject: [PATCH 2/3] Pass sx properties through MiradorMenuButton

---
 src/components/MiradorMenuButton.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js
index 91beaf551b..47cffbae1b 100644
--- a/src/components/MiradorMenuButton.js
+++ b/src/components/MiradorMenuButton.js
@@ -17,6 +17,7 @@ export function MiradorMenuButton(props) {
     dispatch,
     BadgeProps,
     TooltipProps,
+    sx,
     ...iconButtonProps
   } = props;
 
@@ -25,6 +26,7 @@ export function MiradorMenuButton(props) {
       {...iconButtonProps}
       sx={{
         fill: 'currentcolor',
+        ...sx,
       }}
       size="large"
     >
@@ -68,6 +70,7 @@ MiradorMenuButton.propTypes = {
   children: PropTypes.element.isRequired,
   container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   dispatch: PropTypes.func,
+  sx: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   TooltipProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
@@ -76,5 +79,6 @@ MiradorMenuButton.defaultProps = {
   BadgeProps: {},
   container: null,
   dispatch: () => {},
+  sx: {},
   TooltipProps: {},
 };

From ea9e4199706ab29bd4b00489d0bac4553149671d Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Tue, 21 Nov 2023 09:10:21 -0800
Subject: [PATCH 3/3] Align the collapsable section controls

---
 src/components/CollapsibleSection.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js
index e1a4a4eddc..d7c13d8156 100644
--- a/src/components/CollapsibleSection.js
+++ b/src/components/CollapsibleSection.js
@@ -7,6 +7,7 @@ import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
 const StyledContainer = styled('div')(() => ({
+  alignItems: 'flex-start',
   cursor: 'pointer', // This style will be applied to Typography
   display: 'flex',
   justifyContent: 'space-between',
@@ -44,7 +45,7 @@ export class CollapsibleSection extends Component {
       <>
         <StyledContainer sx={{ padding: 0 }}>
           <Typography
-            sx={{ cursor: 'pointer' }}
+            sx={{ alignSelf: 'center', cursor: 'pointer' }}
             id={id}
             onClick={this.toggleSection}
             variant="overline"