🎨 style: UI Style Enhancements and Refactor for Improved Consistency and Layout (#4471)

* 🎨 style: adjust padding and class names in UI components

* 🎨 style: update ExportModal export button, update Export button hover style, refactor ChatForm style and fixed isRTL styles, update AttachFile position

* 🎨 style: remove redundant border classes in SettingsTabs components for cleaner UI

* 🎨 style: refactor Account component, extract DisplayUsernameMessages, and remove redundant border classes for cleaner layout

* 🎨 style: conditionally render Dropdown in ForkSettings component for improved UI responsiveness

* 🎨 style: replace DropdownNoState with Dropdown in voice selection components for consistency

* 🎨 style: update Settings component layout for better responsivenes on large screens

* 🎨 style: remove redundant margin-top classes for cleaner layout in various components

client/src/components/Nav/SettingsTabs/Chat/Chat.tsx

@@ -11,26 +11,26 @@ import SaveDraft from './SaveDraft';
 function Chat() {
   return (
     <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <FontSizeSelector />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ChatDirection />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <SendMessageKeyEnter />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ShowCodeSwitch />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <SaveDraft />
       </div>
       <ForkSettings />
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ModularChat />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <LaTeXParsing />
       </div>
     </div>

client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx

@@ -29,7 +29,7 @@ export default function SendMessageKeyEnter({
         id="enterToSend"
         checked={enterToSend}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="enterToSend"
       />
     </div>

client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx

@@ -19,34 +19,36 @@ export const ForkSettings = () => {
 
   return (
     <>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <div>{localize('com_ui_fork_change_default')}</div>
-            <HoverCardSettings side="bottom" text="com_nav_info_fork_change_default" />
-          </div>
-          <Dropdown
-            value={forkSetting}
-            onChange={setForkSetting}
-            options={forkOptions}
-            sizeClasses="w-[200px]"
-            testId="fork-setting-dropdown"
-          />
-        </div>
-      </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <div className="flex items-center justify-between">
           <div> {localize('com_ui_fork_default')} </div>
           <Switch
             id="rememberDefaultFork"
             checked={remember}
             onCheckedChange={setRemember}
-            className="ml-4 mt-2"
+            className="ml-4"
             data-testid="rememberDefaultFork"
           />
         </div>
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      {remember && (
+        <div className="pb-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <div>{localize('com_ui_fork_change_default')}</div>
+              <HoverCardSettings side="bottom" text="com_nav_info_fork_change_default" />
+            </div>
+            <Dropdown
+              value={forkSetting}
+              onChange={setForkSetting}
+              options={forkOptions}
+              sizeClasses="w-[200px]"
+              testId="fork-setting-dropdown"
+            />
+          </div>
+        </div>
+      )}
+      <div className="pb-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <div>{localize('com_ui_fork_split_target_setting')}</div>
@@ -56,7 +58,7 @@ export const ForkSettings = () => {
             id="splitAtTarget"
             checked={splitAtTarget}
             onCheckedChange={setSplitAtTarget}
-            className="ml-4 mt-2"
+            className="ml-4"
             data-testid="splitAtTarget"
           />
         </div>

client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx

@@ -29,7 +29,7 @@ export default function LaTeXParsingSwitch({
         id="LaTeXParsing"
         checked={LaTeXParsing}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="LaTeXParsing"
       />
     </div>

client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx

@@ -25,7 +25,7 @@ export default function ModularChatSwitch({
         id="modularChat"
         checked={modularChat}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="modularChat"
       />
     </div>

client/src/components/Nav/SettingsTabs/Chat/SaveDraft.tsx

@@ -29,7 +29,7 @@ export default function SaveDraft({
         id="saveDrafts"
         checked={saveDrafts}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="saveDrafts"
       />
     </div>

client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx

@@ -26,7 +26,7 @@ export default function ShowCodeSwitch({
         id="showCode"
         checked={showCode}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="showCode"
       />
     </div>