From 50da92e9016638166681642a825d4508fb2ccc2c Mon Sep 17 00:00:00 2001
From: Yegor Koldov <i6o6ep@gmail.com>
Date: Sun, 16 Jul 2023 17:49:13 +0200
Subject: [PATCH] Fixing horizontal focus in Migrations

---
 src/pages/ManuallyAdjustTimePage.tsx     | 33 +++++++++++-------------
 src/pages/SteamlessTimeMigrationPage.tsx | 33 +++++++++++-------------
 2 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/src/pages/ManuallyAdjustTimePage.tsx b/src/pages/ManuallyAdjustTimePage.tsx
index b56e639..bca4131 100644
--- a/src/pages/ManuallyAdjustTimePage.tsx
+++ b/src/pages/ManuallyAdjustTimePage.tsx
@@ -120,35 +120,32 @@ export const ManuallyAdjustTimePage: VFC = () => {
                         </div>
 
                         {tableRows.map((row, idx) => (
-                            <div
+                            <Focusable
+                                flow-children="horizontal"
                                 style={{
                                     gridTemplateColumns: '50% 25% 25%',
                                     ...TableCSS.table__row,
                                     ...rowCorrectnessClass(row),
                                 }}
                             >
-                                <div>
-                                    <Dropdown
-                                        rgOptions={gameOptions}
-                                        selectedOption={row.appId}
-                                        onChange={(e) => onGameChange(idx, e.data)}
-                                    />
-                                </div>
+                                <Dropdown
+                                    rgOptions={gameOptions}
+                                    selectedOption={row.appId}
+                                    onChange={(e) => onGameChange(idx, e.data)}
+                                />
                                 <div>
                                     {map(row.playTimeTrackedSec, (it) =>
                                         humanReadableTime(it)
                                     )}
                                 </div>
-                                <div>
-                                    <TextField
-                                        mustBeNumeric
-                                        value={row.desiredHours?.toFixed(2)?.toString()}
-                                        onChange={(e) =>
-                                            onDesiredHoursChange(idx, e.target.value)
-                                        }
-                                    />
-                                </div>
-                            </div>
+                                <TextField
+                                    mustBeNumeric
+                                    value={row.desiredHours?.toFixed(2)?.toString()}
+                                    onChange={(e) =>
+                                        onDesiredHoursChange(idx, e.target.value)
+                                    }
+                                />
+                            </Focusable>
                         ))}
                     </div>
                 </PanelSection>
diff --git a/src/pages/SteamlessTimeMigrationPage.tsx b/src/pages/SteamlessTimeMigrationPage.tsx
index b5bf095..f6abc99 100644
--- a/src/pages/SteamlessTimeMigrationPage.tsx
+++ b/src/pages/SteamlessTimeMigrationPage.tsx
@@ -121,7 +121,8 @@ export const SteamlessTimeMigrationPage: VFC = () => {
                         </div>
 
                         {tableRows.map((row, idx) => (
-                            <div
+                            <Focusable
+                                flow-children="horizontal"
                                 style={{
                                     gridTemplateColumns: '20% 15% 25% 15% 15%',
                                     ...TableCSS.table__row,
@@ -132,28 +133,24 @@ export const SteamlessTimeMigrationPage: VFC = () => {
                                 <div>
                                     {humanReadableTime(row.steamlessTimeTrackedSec)}
                                 </div>
-                                <div>
-                                    <Dropdown
-                                        rgOptions={gameOptions}
-                                        selectedOption={row.appId}
-                                        onChange={(e) => onGameChange(idx, e.data)}
-                                    />
-                                </div>
+                                <Dropdown
+                                    rgOptions={gameOptions}
+                                    selectedOption={row.appId}
+                                    onChange={(e) => onGameChange(idx, e.data)}
+                                />
                                 <div>
                                     {map(row.playTimeTrackedSec, (it) =>
                                         humanReadableTime(it)
                                     )}
                                 </div>
-                                <div>
-                                    <TextField
-                                        mustBeNumeric
-                                        value={row.desiredHours?.toFixed(2)?.toString()}
-                                        onChange={(e) =>
-                                            onDesiredHoursChange(idx, e.target.value)
-                                        }
-                                    />
-                                </div>
-                            </div>
+                                <TextField
+                                    mustBeNumeric
+                                    value={row.desiredHours?.toFixed(2)?.toString()}
+                                    onChange={(e) =>
+                                        onDesiredHoursChange(idx, e.target.value)
+                                    }
+                                />
+                            </Focusable>
                         ))}
                     </div>
                 </PanelSection>