Bug fixes (#394)

* fix black text for custom messages text

* fix file upload icon being stretched

* center github, docs, and discord icons in sidebar

* fix chat container being cut off on right side and tighter spacing between message

* fix default chat container being cut off on right side

* on create new workspace, take user to the workspace they just created instead of the home page

* add border to chat container and click outside user menu to close

* fix borders around all chat and settings containers to be consistent

* fix padding for default messages

* fix spacing between workspace items in sidebar

* fix margin around right side of chat, default, and settings containers to be the same as the left sidebar

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/ChatBubble/index.jsx

@@ -13,7 +13,7 @@ export default function ChatBubble({ message, type, popMsg }) {
   return (
     <div className={`flex justify-center items-end w-full ${backgroundColor}`}>
       <div
-        className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+        className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
       >
         <div className="flex gap-x-5">
           <Jazzicon

frontend/src/components/DefaultChat/index.jsx

@@ -45,7 +45,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR} md:mt-0 mt-[40px]`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`pt-10 pb-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -69,7 +69,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`pb-4 pt-2 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -92,7 +92,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`pt-2 pb-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -126,7 +126,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon
@@ -150,7 +150,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -185,7 +185,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon
@@ -210,7 +210,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -248,7 +248,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon
@@ -272,7 +272,7 @@ export default function DefaultChatContainer() {
         className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -335,7 +335,7 @@ export default function DefaultChatContainer() {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full md:min-w-[82%] h-full overflow-y-scroll"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
     >
       {isMobile && <SidebarMobileHeader />}
       {fetchedMessages.length === 0

frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx

@@ -45,7 +45,7 @@ function FileUploadProgressComponent({
   if (rejected) {
     return (
       <div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40">
-        <div className="w-6 h-6">
+        <div className="w-6 h-6 flex-shrink-0">
           <XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
         </div>
         <div className="flex flex-col">

frontend/src/components/Modals/NewWorkspace.jsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { X } from "@phosphor-icons/react";
 import Workspace from "../../models/workspace";
+import paths from "../../utils/paths";
 
 const noop = () => false;
 export default function NewWorkspaceModal({ hideModal = noop }) {
@@ -13,7 +14,9 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
     const form = new FormData(formEl.current);
     for (var [key, value] of form.entries()) data[key] = value;
     const { workspace, message } = await Workspace.new(data);
-    if (!!workspace) window.location.reload();
+    if (!!workspace){
+      window.location.href = paths.workspace.chat(workspace.slug);
+    }
     setError(message);
   };
 
@@ -26,7 +29,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
       <div className="relative w-[500px] max-h-full">
         <div className="relative bg-modal-gradient rounded-lg shadow-md border-2 border-accent">
           <div className="flex items-start justify-between p-4 border-b rounded-t border-white/10">
-            <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+            <h3 className="text-xl font-semibold text-white">
               New Workspace
             </h3>
             <button
@@ -43,7 +46,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                 <div>
                   <label
                     htmlFor="name"
-                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                    className="block mb-2 text-sm font-medium text-white"
                   >
                     Workspace Name
                   </label>
@@ -58,7 +61,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                   />
                 </div>
                 {error && (
-                  <p className="text-red-600 dark:text-red-400 text-sm">
+                  <p className="text-red-400 text-sm">
                     Error: {error}
                   </p>
                 )}

frontend/src/components/SettingsSidebar/index.jsx

@@ -167,9 +167,9 @@ export default function SettingsSidebar() {
                       className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
                     />
                   </a>
-                  <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
+                  {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
                     <DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
-                  </button>
+                  </button> */}
                 </div>
               </div>
             </div>

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -57,7 +57,7 @@ export default function ActiveWorkspaces() {
               href={isActive ? null : paths.workspace.chat(workspace.slug)}
               className={`
               transition-all duration-[200ms]
-                flex flex-grow w-[75%] gap-x-2 py-[9px] px-[12px] rounded-lg text-slate-200 justify-start items-center border
+                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-lg text-slate-200 justify-start items-center border
                 hover:bg-workspace-item-selected-gradient hover:border-slate-100 hover:border-opacity-50
                 ${
                   isActive

frontend/src/components/Sidebar/index.jsx

@@ -54,12 +54,12 @@ export default function Sidebar() {
 
           {/* Primary Body */}
           <div className="flex-grow flex flex-col">
-            <div className="flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll">
+            <div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll">
               <div className="flex gap-x-2 items-center justify-between">
                 {(!user || user?.role !== "default") && (
                   <button
                     onClick={showNewWsModal}
-                    className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-4 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+                    className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-4 mb-2 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
                   >
                     <Plus className="h-5 w-5" />
                     <p className="text-sidebar text-sm font-semibold">
@@ -114,9 +114,9 @@ export default function Sidebar() {
                       className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
                     />
                   </a>
-                  <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
+                  {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
                     <DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
-                  </button>
+                  </button> */}
                 </div>
               </div>
             </div>

frontend/src/components/UserMenu/index.jsx

@@ -1,9 +1,9 @@
-import { useState } from "react";
+import React, { useState, useEffect, useRef } from 'react';
-import { isMobile } from "react-device-detect";
+import { isMobile } from 'react-device-detect';
-import paths from "../../utils/paths";
+import paths from '../../utils/paths';
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "../../utils/constants";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from '../../utils/constants';
-import { Person, SignOut } from "@phosphor-icons/react";
+import { Person, SignOut } from '@phosphor-icons/react';
-import { userFromStorage } from "../../utils/request";
+import { userFromStorage } from '../../utils/request';
 
 export default function UserMenu({ children }) {
   if (isMobile) return <>{children}</>;
@@ -20,33 +20,56 @@ function useLoginMode() {
   const user = !!window.localStorage.getItem(AUTH_USER);
   const token = !!window.localStorage.getItem(AUTH_TOKEN);
 
-  if (user && token) return "multi";
+  if (user && token) return 'multi';
-  if (!user && token) return "single";
+  if (!user && token) return 'single';
   return null;
 }
 
 function userDisplay() {
   const user = userFromStorage();
-  return user?.username?.slice(0, 2) || "AA";
+  return user?.username?.slice(0, 2) || 'AA';
 }
 
 function UserButton() {
   const [showMenu, setShowMenu] = useState(false);
   const mode = useLoginMode();
+  const menuRef = useRef();
+  const buttonRef = useRef();
+  const handleClose = (event) => {
+    if (
+      menuRef.current &&
+      !menuRef.current.contains(event.target) &&
+      !buttonRef.current.contains(event.target)
+    ) {
+      setShowMenu(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener('mousedown', handleClose);
+    }
+    return () => document.removeEventListener('mousedown', handleClose);
+  }, [showMenu]);
 
   if (mode === null) return null;
+
   return (
     <div className="absolute top-9 right-10 w-fit h-fit z-99">
       <button
+        ref={buttonRef}
         onClick={() => setShowMenu(!showMenu)}
         type="button"
         className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient justify-center text-white p-2 hover:border-slate-100 hover:border-opacity-50 border-transparent border"
       >
-        {mode === "multi" ? userDisplay() : <Person size={14} />}
+        {mode === 'multi' ? userDisplay() : <Person size={14} />}
       </button>
 
       {showMenu && (
-        <div className="w-fit rounded-lg absolute top-12 right-0 bg-sidebar p-4 flex items-center-justify-center">
+        <div
+          ref={menuRef}
+          className="w-fit rounded-lg absolute top-12 right-0 bg-sidebar p-4 flex items-center-justify-center"
+        >
           <div className="flex flex-col gap-y-2">
             <a
               href={paths.mailToMintplex()}

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx

@@ -24,7 +24,7 @@ const HistoricalMessage = forwardRef(
         }`}
       >
         <div
-          className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+          className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
         >
           <div className="flex gap-x-5">
             <Jazzicon

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx

@@ -19,7 +19,7 @@ const PromptReply = forwardRef(
           ref={ref}
           className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
         >
-          <div className="py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
+          <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
             <div className="flex gap-x-5">
               <Jazzicon
                 size={36}
@@ -38,7 +38,7 @@ const PromptReply = forwardRef(
         <div
           className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
         >
-          <div className="py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
+          <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
             <div className="flex gap-x-5">
               <Jazzicon
                 size={36}
@@ -64,7 +64,7 @@ const PromptReply = forwardRef(
         ref={ref}
         className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
       >
-        <div className="py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
+        <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
           <div className="flex gap-x-5">
             <Jazzicon
               size={36}

frontend/src/components/WorkspaceChat/ChatContainer/index.jsx

@@ -85,7 +85,7 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full md:min-w-[82%] h-full overflow-y-scroll"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
     >
       {isMobile && <SidebarMobileHeader />}
       <div className="flex flex-col h-full w-full md:mt-0 mt-[40px]">

frontend/src/components/WorkspaceChat/LoadingChat/index.jsx

@@ -8,7 +8,7 @@ export default function LoadingChat() {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll"
     >
       <Skeleton.default
         height="100px"

frontend/src/index.css

@@ -378,4 +378,4 @@ dialog::backdrop {
   100% {
     opacity: 0;
   }
-}
+}

frontend/src/pages/Admin/Invitations/index.jsx

@@ -17,7 +17,7 @@ export default function AdminInvites() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">

frontend/src/pages/Admin/System/index.jsx

@@ -45,7 +45,7 @@ export default function AdminSystem() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <form

frontend/src/pages/Admin/Users/index.jsx

@@ -17,7 +17,7 @@ export default function AdminUsers() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">

frontend/src/pages/Admin/Workspaces/index.jsx

@@ -17,7 +17,7 @@ export default function AdminWorkspaces() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">

frontend/src/pages/GeneralSettings/ApiKeys/index.jsx

@@ -19,7 +19,7 @@ export default function AdminApiKeys() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">

frontend/src/pages/GeneralSettings/Appearance/index.jsx

@@ -113,7 +113,7 @@ export default function Appearance() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
@@ -184,7 +184,7 @@ export default function Appearance() {
           </div>
           <div className="mb-6">
             <div className="flex flex-col gap-y-2">
-              <h2 className="leading-tight font-medium text-black dark:text-white">
+              <h2 className="leading-tight font-medium text-white">
                 Custom Messages
               </h2>
               <p className="text-sm font-base text-white/60">
@@ -238,7 +238,7 @@ export default function Appearance() {
             {hasChanges && (
               <div className="flex justify-center py-6">
                 <button
-                  className="ml-4 cursor-pointer text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
                   onClick={handleMessageSave}
                 >
                   Save Messages

frontend/src/pages/GeneralSettings/Chats/index.jsx

@@ -37,7 +37,7 @@ export default function WorkspaceChats() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">

frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx

@@ -83,7 +83,7 @@ export default function GeneralEmbeddingPreference() {
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll animate-pulse"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient p-[18px] h-full overflow-y-scroll animate-pulse border-4 border-accent"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -92,7 +92,7 @@ export default function GeneralEmbeddingPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
         >
           {isMobile && <SidebarMobileHeader />}
           <form

frontend/src/pages/GeneralSettings/ExportImport/index.jsx

@@ -20,7 +20,7 @@ export default function GeneralExportImport() {
         {!isMobile && <Sidebar />}
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
         >
           {isMobile && <SidebarMobileHeader />}
           <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
@@ -55,7 +55,7 @@ export default function GeneralExportImport() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">

frontend/src/pages/GeneralSettings/LLMPreference/index.jsx

@@ -62,7 +62,7 @@ export default function GeneralLLMPreference() {
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll animate-pulse"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient p-[18px] h-full overflow-y-scroll animate-pulse border-4 border-accent"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -71,7 +71,7 @@ export default function GeneralLLMPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
         >
           {isMobile && <SidebarMobileHeader />}
           <form

frontend/src/pages/GeneralSettings/Security/index.jsx

@@ -19,7 +19,7 @@ export default function GeneralSecurity() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
       >
         {isMobile && <SidebarMobileHeader />}
         <MultiUserMode />
@@ -78,7 +78,7 @@ function MultiUserMode() {
 
   if (loading) {
     return (
-      <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] md:min-w-[82%] p-[18px] h-full overflow-y-scroll">
+      <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] p-[18px] h-full overflow-y-scroll">
         <div className="w-full h-full flex justify-center items-center">
           <PreLoader />
         </div>
@@ -242,7 +242,7 @@ function PasswordProtection() {
 
   if (loading) {
     return (
-      <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] md:min-w-[82%] p-[18px] h-full overflow-y-scroll">
+      <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] p-[18px] h-full overflow-y-scroll">
         <div className="w-full h-full flex justify-center items-center">
           <PreLoader />
         </div>

frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx

@@ -78,7 +78,7 @@ export default function GeneralVectorDatabase() {
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll animate-pulse"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent animate-pulse"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -87,7 +87,7 @@ export default function GeneralVectorDatabase() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
         >
           {isMobile && <SidebarMobileHeader />}
           <form