Fix the scrollbars in the settings window

Makefile

@@ -60,4 +60,4 @@ lint:
 
 .PHONY: start
 start:
-	npx electron-forge start
+	export DEBUG=true && npx electron-forge start

src/electron/windows/_base.window.ts

@@ -38,7 +38,9 @@ export default class BaseWindow {
       title: this.getWindowTitle(),
     });
 
-    // this.window.webContents.openDevTools();
+    if (process.env.DEBUG) {
+      this.window.webContents.openDevTools();
+    }
 
     if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
       this.window.loadURL(`${MAIN_WINDOW_VITE_DEV_SERVER_URL}/index.html`);

src/ui/windows/settings.tsx

@@ -19,8 +19,8 @@ const Settings = () => {
 
   return (
     <HashRouter>
-      <div className="bg-base-300 min-h-screen flex flex-col">
-        <div className="tabs tabs-lifted pt-3">
+      <div className="bg-base-300 h-full flex flex-col">
+        <div className="tabs tabs-lifted pt-3 pr-40">
           <NavLink className={({ isActive }) => classNames('tab', { 'tab-active': isActive })} to="/">
             <Icon icon="user" className="mr-2" />
             {translate('characters.title')}
@@ -39,7 +39,7 @@ const Settings = () => {
           </NavLink>
         </div>
 
-        <div className="bg-base-100 flex-1 p-3">
+        <div className="bg-base-100 flex-1 p-3 overflow-y-scroll">
           <Routes>
             <Route index path="/" element={<Characters />} />
             <Route path="/teams" element={<Teams />} />

src/ui/windows/settings/theme/theme.tsx

@@ -8,7 +8,7 @@ const Theme = () => {
   const { theme: activeTheme, updateTheme } = useConfig();
 
   return (
-    <div className="grid gap-4 grid-cols-4 ">
+    <div className="grid gap-4 grid-cols-4">
       {themes.map((theme) => (
         <div
           key={theme}