🎨 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/Commands/AtCommandSwitch.tsx

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

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

@@ -28,16 +28,16 @@ function Commands() {
         <HoverCardSettings side="bottom" text="com_nav_chat_commands_info" />
       </div>
       <div className="flex flex-col gap-3 text-sm text-text-primary">
-        <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+        <div className="pb-3">
           <AtCommandSwitch />
         </div>
         {hasAccessToMultiConvo === true && (
-          <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+          <div className="pb-3">
             <PlusCommandSwitch />
           </div>
         )}
         {hasAccessToPrompts === true && (
-          <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+          <div className="pb-3">
             <SlashCommandSwitch />
           </div>
         )}

client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx

@@ -18,7 +18,8 @@ export default function PlusCommandSwitch() {
         id="plusCommand"
         checked={plusCommand}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        f
+        className="ml-4"
         data-testid="plusCommand"
       />
     </div>

client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx

@@ -18,7 +18,7 @@ export default function SlashCommandSwitch() {
         id="slashCommand"
         checked={slashCommand}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        f
         data-testid="slashCommand"
       />
     </div>