From 344bb030aaa761e93c47429f2c4d5ac3d2227b24 Mon Sep 17 00:00:00 2001
From: Jolie Rabideau <jolierabideau@Jolies-MacBook-Pro.local>
Date: Tue, 14 Nov 2023 16:46:20 -0500
Subject: [PATCH] add scroll to settings content, and fix no key error in
 interfaceLanguageSetting

---
 .../settings-tab.component.scss               | 33 ++++---
 .../settings-tab.component.tsx                | 95 ++++++++++---------
 2 files changed, 68 insertions(+), 60 deletions(-)

diff --git a/src/renderer/components/settings-dialog/settings-tab.component.scss b/src/renderer/components/settings-dialog/settings-tab.component.scss
index dcfb7aa93d..4953dec930 100644
--- a/src/renderer/components/settings-dialog/settings-tab.component.scss
+++ b/src/renderer/components/settings-dialog/settings-tab.component.scss
@@ -1,30 +1,33 @@
 .settings-dialog {
-  padding: 3%;
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  box-sizing: border-box;
 }
 
 .settings-search-bar {
+  padding: 2%;
   display: block;
-  width: 100%;
-  padding-bottom: 2%;
+  box-sizing: border-box;
 }
 
-.settings-tab-group {
-  flex-grow: 1;
+.settings-tabs-and-content {
   display: flex;
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .settings-tabs {
-  border-color: divider;
-  flex-basis: 20%;
-}
-
-.settings-tab-panels {
-  flex-basis: 80%;
+  width: 20%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow-y: auto;
 }
 
-.settings-list-item {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
+.settings-tab-panel {
+  width: 80%;
+  flex: 1;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
diff --git a/src/renderer/components/settings-dialog/settings-tab.component.tsx b/src/renderer/components/settings-dialog/settings-tab.component.tsx
index 7fd32663bf..7e5b08ff5c 100644
--- a/src/renderer/components/settings-dialog/settings-tab.component.tsx
+++ b/src/renderer/components/settings-dialog/settings-tab.component.tsx
@@ -195,7 +195,9 @@ function InterfaceLanguageSetting({ setting, setSetting }: SettingProps<string>)
   return (
     <Select value={setting} onChange={(e) => setSetting(e.target.value)} sx={{ width: 200 }}>
       {options.map((option) => (
-        <MenuItem value={option}>{option}</MenuItem>
+        <MenuItem key={option} value={option}>
+          {option}
+        </MenuItem>
       ))}
     </Select>
   );
@@ -349,50 +351,53 @@ export default function SettingsDialog({
       <div className="settings-search-bar">
         <SearchBar onSearch={handleSearchInput} placeholder="Search Settings..." isFullWidth />
       </div>
-      <div className="settings-tab-group">
-        <Tabs
-          value={tabValue}
-          onChange={handleTabChange}
-          orientation="vertical"
-          className="settings-tabs"
-        >
-          {settingsGroups.map((group) => (
-            <Tab
-              key={group.label}
-              label={group.label}
-              value={group.label}
-              sx={{ alignItems: 'start' }}
-            />
-          ))}
-        </Tabs>
-        <span className="settings-tab-panels">
-          {settingsGroups.map((group) => (
-            <TabPanel key={group.label} value={tabValue} index={group.label} name={group.label}>
-              <List>
-                {fetchSettings(group).map((settingKey) => (
-                  <span key={group.properties[settingKey].label} className="settings-list-item">
-                    <ListItem divider key={settingKey}>
-                      <ListItemText
-                        primary={group.properties[settingKey].label}
-                        secondary={group.properties[settingKey].description}
-                      />
-                      {components[settingKey] ? (
-                        createElement(components[settingKey], {
-                          setting: settingValues[settingKey],
-                          setSetting: (value: unknown) => setSettingValue(settingKey, value),
-                        })
-                      ) : (
-                        <Typography component="span" alignSelf="center" variant="caption">
-                          Setting Action Missing
-                        </Typography>
-                      )}
-                    </ListItem>
-                  </span>
-                ))}
-              </List>
-            </TabPanel>
-          ))}
-        </span>
+      <div className="settings-tabs-and-content">
+        <div className="settings-tabs">
+          <Tabs
+            value={tabValue}
+            onChange={handleTabChange}
+            orientation="vertical"
+            variant="scrollable"
+          >
+            {settingsGroups.map((group) => (
+              <Tab
+                key={group.label}
+                label={group.label}
+                value={group.label}
+                sx={{ alignItems: 'start' }}
+              />
+            ))}
+          </Tabs>
+        </div>
+        {settingsGroups.map((group) => (
+          <TabPanel
+            key={group.label}
+            value={tabValue}
+            index={group.label}
+            name="settings-tab-panel"
+          >
+            <List>
+              {fetchSettings(group).map((settingKey) => (
+                <ListItem divider key={settingKey}>
+                  <ListItemText
+                    primary={group.properties[settingKey].label}
+                    secondary={group.properties[settingKey].description}
+                  />
+                  {components[settingKey] ? (
+                    createElement(components[settingKey], {
+                      setting: settingValues[settingKey],
+                      setSetting: (value: unknown) => setSettingValue(settingKey, value),
+                    })
+                  ) : (
+                    <Typography component="span" alignSelf="center" variant="caption">
+                      Setting Action Missing
+                    </Typography>
+                  )}
+                </ListItem>
+              ))}
+            </List>
+          </TabPanel>
+        ))}
       </div>
     </div>
   );