web: fix settings dialog going blank on clicking a checkbox

apps/web/src/dialogs/settings/components/spell-checker-languages.tsx

@@ -18,9 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Language, useSpellChecker } from "../../../hooks/use-spell-checker";
-import { Checkbox, Input, Label } from "@theme-ui/components";
+import { Input, Label } from "@theme-ui/components";
 import { useCallback, useEffect, useState } from "react";
 import { deleteItem } from "@notesnook/core/utils/array";
+import { FlexScrollContainer } from "../../../components/scroll-container";
 
 export function SpellCheckerLanguages() {
   const spellChecker = useSpellChecker();
@@ -55,9 +56,17 @@ export function SpellCheckerLanguages() {
         sx={{ mx: "2px", my: 2, width: "auto" }}
         onChange={(e) => filter(e.currentTarget.value.toLowerCase().trim())}
       />
+      <FlexScrollContainer suppressAutoHide style={{ maxHeight: 400 }}>
         {languages.map((lang) => (
           <Label key={lang.code} variant="text.body" sx={{ mb: 1 }}>
-          <Checkbox
+            <input
+              type="checkbox"
+              style={{
+                accentColor: "var(--primary)",
+                marginRight: 1,
+                width: 14,
+                height: 14
+              }}
               checked={enabledLanguages.includes(lang.code)}
               onChange={async (e) => {
                 const { checked } = e.currentTarget;
@@ -68,11 +77,11 @@ export function SpellCheckerLanguages() {
 
                 await spellChecker.setLanguages(copiedLanguages);
               }}
-            sx={{ mr: 1, width: 20, height: 20 }}
             />
-          {lang.name}
+            <span style={{ marginLeft: 5 }}>{lang.name}</span>
           </Label>
         ))}
+      </FlexScrollContainer>
     </>
   );
 }