From 9c73a23ca09a828a178d5ff0c397703cf7b31b38 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 30 Jan 2024 18:57:38 +0530
Subject: [PATCH] chore: fix modal header on small window size on macOS [skip
 e2e]

---
 packages/desktop/app/stylesheets/renderer.css  |  3 +++
 .../KeyboardShortcutsHelpModal.tsx             | 18 +++++++++++++++---
 .../Components/Modal/MobileModalHeader.tsx     |  1 +
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/desktop/app/stylesheets/renderer.css b/packages/desktop/app/stylesheets/renderer.css
index dc0978109..08d8f93b7 100644
--- a/packages/desktop/app/stylesheets/renderer.css
+++ b/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) {
diff --git a/packages/web/src/javascripts/Components/KeyboardShortcutsHelpModal/KeyboardShortcutsHelpModal.tsx b/packages/web/src/javascripts/Components/KeyboardShortcutsHelpModal/KeyboardShortcutsHelpModal.tsx
index 7f9725acc..2fff24d59 100644
--- a/packages/web/src/javascripts/Components/KeyboardShortcutsHelpModal/KeyboardShortcutsHelpModal.tsx
+++ b/packages/web/src/javascripts/Components/KeyboardShortcutsHelpModal/KeyboardShortcutsHelpModal.tsx
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react'
-import Modal from '../Modal/Modal'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+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 && (
diff --git a/packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx b/packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx
index 90af821c5..f602a43b5 100644
--- a/packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx
+++ b/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>