chore: fix modal header on small window size on macOS [skip e2e]

packages/desktop/app/stylesheets/renderer.css

@@ -13,6 +13,9 @@
   .mac-desktop .app-pane {
     padding-top: 25px;
   }
+  .mac-desktop [data-dialog] [data-mobile-modal-header] {
+    padding-top: 25px;
+  }
 }
 
 @media screen and (min-width: 768px) {

packages/web/src/javascripts/Components/KeyboardShortcutsHelpModal/KeyboardShortcutsHelpModal.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
-import Modal from '../Modal/Modal'
+import Modal, { ModalAction } from '../Modal/Modal'
 import ModalOverlay from '../Modal/ModalOverlay'
 import {
   KeyboardService,
@@ -57,9 +57,21 @@ const KeyboardShortcutsModal = ({ keyboardService }: { keyboardService: Keyboard
     })
   }, [keyboardService])
 
+  const actions = useMemo(
+    (): ModalAction[] => [
+      {
+        label: 'Cancel',
+        onClick: close,
+        type: 'cancel',
+        mobileSlot: 'left',
+      },
+    ],
+    [close],
+  )
+
   return (
     <ModalOverlay isOpen={isOpen} close={close}>
-      <Modal title="Keyboard shortcuts" close={close}>
+      <Modal title="Keyboard shortcuts" close={close} actions={actions}>
         {Object.entries(items).map(
           ([category, items]) =>
             items.length > 0 && (

packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx

@@ -13,6 +13,7 @@ const MobileModalHeader = ({ className, children }: Props) => {
         'grid w-full select-none grid-cols-[0.35fr_1fr_0.35fr] gap-2 text-[1.05rem] leading-6',
         className,
       )}
+      data-mobile-modal-header
     >
       {children}
     </div>