From 955778c0c1e7ae1ee7c84d9136a8028ee49ded52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 10 Oct 2024 23:32:21 +0200
Subject: [PATCH] pl-fe: Split the modal evenly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../ui/components/modals/hotkeys-modal.tsx    | 87 +++++++++----------
 1 file changed, 42 insertions(+), 45 deletions(-)

diff --git a/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx
index 63eebcb72..05ebf7e79 100644
--- a/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx
@@ -19,6 +19,22 @@ const TableCell: React.FC<{ className?: string; children: React.ReactNode }> = (
   </td>
 );
 
+const getColumnSizes = (n: number) => {
+  let part1 = Math.ceil(n / 3);
+  let part2 = Math.floor(n / 3);
+  const part3 = Math.floor(n / 3);
+
+  const total = part1 + part2 + part3;
+  if (total < n) {
+    part2++;
+  } else if (total > n) {
+    part1--;
+  }
+
+  // Return the parts in descending order
+  return [part1, part2, part3];
+};
+
 const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
   const features = useFeatures();
   const { isLoggedIn } = useLoggedIn();
@@ -126,7 +142,16 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
     },
   ].filter(hotkey => hotkey !== false);
 
-  const columnSize = Math.ceil(hotkeys.length / 3);
+  const columnSizes = getColumnSizes(hotkeys.length);
+
+  const columns = columnSizes.reduce<Array<Array<{
+    key: JSX.Element;
+    label: JSX.Element;
+  }>>>((prev, cur) => {
+    const addedItems = prev.flat().length;
+    prev.push(hotkeys.slice(addedItems, addedItems + cur));
+    return prev;
+  }, []);
 
   return (
     <Modal
@@ -135,51 +160,23 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
       width='4xl'
     >
       <div className='flex flex-col text-xs lg:flex-row'>
-        <table>
-          <thead>
-            <tr>
-              <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
-            </tr>
-          </thead>
-          <tbody>
-            {hotkeys.slice(0, columnSize).map((hotkey, i) => (
-              <tr key={i}>
-                <TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
-                <TableCell>{hotkey.label}</TableCell>
+        {columns.map((column, i) => (
+          <table key={i}>
+            <thead>
+              <tr>
+                <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
               </tr>
-            ))}
-          </tbody>
-        </table>
-        <table>
-          <thead>
-            <tr>
-              <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
-            </tr>
-          </thead>
-          <tbody>
-            {hotkeys.slice(columnSize, columnSize * 2).map((hotkey, i) => (
-              <tr key={i}>
-                <TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
-                <TableCell>{hotkey.label}</TableCell>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <table>
-          <thead>
-            <tr>
-              <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
-            </tr>
-          </thead>
-          <tbody>
-            {hotkeys.slice(columnSize * 2).map((hotkey, i) => (
-              <tr key={i}>
-                <TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
-                <TableCell>{hotkey.label}</TableCell>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {column.map((hotkey, i) => (
+                <tr key={i}>
+                  <TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
+                  <TableCell>{hotkey.label}</TableCell>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ))}
       </div>
     </Modal>
   );