Fix: UI (#119)

* fix ui

enjoy/src/renderer/components/preferences/advanced-settings.tsx

@@ -1,6 +1,5 @@
 import { t } from "i18next";
-import {
-  Button, Separator } from "@renderer/components/ui";
+import { Button, Separator } from "@renderer/components/ui";
 import { ResetAllButton } from "@renderer/components";
 import { InfoIcon } from "lucide-react";
 
@@ -11,35 +10,6 @@ export const AdvancedSettings = () => {
         {t("advancedSettings")}
       </div>
 
-      <div className="flex items-start justify-between py-4">
-        <div className="">
-          <div className="mb-2">{t("resetAll")}</div>
-          <div className="text-sm text-muted-foreground mb-2">
-            {t("logoutAndRemoveAllPersonalData")}
-          </div>
-        </div>
-
-        <div className="">
-          <div className="mb-2 flex justify-end">
-            <ResetAllButton>
-              <Button
-                variant="secondary"
-                className="text-destructive"
-                size="sm"
-              >
-                {t("resetAll")}
-              </Button>
-            </ResetAllButton>
-          </div>
-          <div className="text-xs text-muted-foreground">
-            <InfoIcon className="mr-1 w-3 h-3 inline" />
-            <span>{t("relaunchIsNeededAfterChanged")}</span>
-          </div>
-        </div>
-      </div>
-
-      <Separator />
-
       <div className="flex items-start justify-between py-4">
         <div className="">
           <div className="mb-2">{t("resetSettings")}</div>
@@ -68,6 +38,35 @@ export const AdvancedSettings = () => {
       </div>
 
       <Separator />
+
+      <div className="flex items-start justify-between py-4">
+        <div className="">
+          <div className="mb-2">{t("resetAll")}</div>
+          <div className="text-sm text-muted-foreground mb-2">
+            {t("logoutAndRemoveAllPersonalData")}
+          </div>
+        </div>
+
+        <div className="">
+          <div className="mb-2 flex justify-end">
+            <ResetAllButton>
+              <Button
+                variant="secondary"
+                className="text-destructive"
+                size="sm"
+              >
+                {t("resetAll")}
+              </Button>
+            </ResetAllButton>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            <InfoIcon className="mr-1 w-3 h-3 inline" />
+            <span>{t("relaunchIsNeededAfterChanged")}</span>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
     </>
   );
 };

enjoy/src/renderer/components/preferences/preferences.tsx

@@ -1,6 +1,11 @@
 import { t } from "i18next";
 import { Button, ScrollArea } from "@renderer/components/ui";
-import { BasicSettings, AdvancedSettings, About, Hotkeys } from "@renderer/components";
+import {
+  BasicSettings,
+  AdvancedSettings,
+  About,
+  Hotkeys,
+} from "@renderer/components";
 import { useState } from "react";
 
 export const Preferences = () => {
@@ -30,8 +35,8 @@ export const Preferences = () => {
   const [activeTab, setActiveTab] = useState<string>("basic");
 
   return (
-    <div className="grid grid-cols-5">
-      <ScrollArea className="col-span-1 h-full bg-muted/50 p-4">
+    <div className="grid grid-cols-5 overflow-hidden h-full">
+      <ScrollArea className="h-full col-span-1 bg-muted/50 p-4">
         <div className="py-2 text-muted-foreground mb-4">
           {t("sidebar.preferences")}
         </div>
@@ -50,7 +55,7 @@ export const Preferences = () => {
           </Button>
         ))}
       </ScrollArea>
-      <ScrollArea className="col-span-4 p-6">
+      <ScrollArea className="h-full col-span-4 py-6 px-10">
         {TABS.find((tab) => tab.value === activeTab)?.component()}
       </ScrollArea>
     </div>