Fixing horizontal focus in Migrations

ma3a · Jul 16, 2023 · 50da92e · 50da92e
1 parent 7c3d209
commit 50da92e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 36 deletions.
diff --git 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
@@ -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>