Horizontal scrollbar

web/src/app/chat/ChatPage.tsx

@@ -2007,7 +2007,7 @@ export function ChatPage({
                         {...getRootProps()}
                       >
                         <div
-                          className={`w-full h-full flex flex-col overflow-y-auto include-scrollbar overflow-x-hidden relative`}
+                          className={`w-full h-full flex flex-col default-scrollbar overflow-y-auto overflow-x-hidden relative`}
                           ref={scrollableDivRef}
                         >
                           {/* ChatBanner is a custom banner that displays a admin-specified message at 

web/src/app/chat/modal/configuration/AssistantsTab.tsx

@@ -76,7 +76,7 @@ export function AssistantsTab({
           items={assistants.map((a) => a.id.toString())}
           strategy={verticalListSortingStrategy}
         >
-          <div className="px-4 pb-2  max-h-[500px] include-scrollbar overflow-y-scroll my-3 grid grid-cols-1 gap-4">
+          <div className="px-4 pb-2  max-h-[500px] default-scrollbar overflow-y-scroll overflow-x-hidden my-3 grid grid-cols-1 gap-4">
             {assistants.map((assistant) => (
               <DraggableAssistantCard
                 key={assistant.id.toString()}

web/src/app/globals.css

@@ -260,28 +260,29 @@
   }
 }
 
-.include-scrollbar::-webkit-scrollbar {
+.default-scrollbar::-webkit-scrollbar {
   width: 6px;
 }
 
-.include-scrollbar::-webkit-scrollbar-track {
+.default-scrollbar::-webkit-scrollbar-track {
   background: #f1f1f1;
 }
 
-.include-scrollbar::-webkit-scrollbar-thumb {
+.default-scrollbar::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 4px;
 }
 
-.include-scrollbar::-webkit-scrollbar-thumb:hover {
+.default-scrollbar::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
 
-.include-scrollbar {
+.default-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: #888 transparent;
   overflow: overlay;
   overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 .inputscroll::-webkit-scrollbar-track {

web/src/components/llm/LLMList.tsx

@@ -63,8 +63,10 @@ export const LlmList: React.FC<LlmListProps> = ({
   return (
     <div
       className={`${
-        scrollable ? "max-h-[200px] include-scrollbar" : "max-h-[300px]"
-      } bg-background-175  flex flex-col gap-y-1 overflow-y-scroll`}
+        scrollable
+          ? "max-h-[200px] default-scrollbar overflow-x-hidden"
+          : "max-h-[300px]"
+      } bg-background-175 flex flex-col gap-y-1 overflow-y-scroll`}
     >
       {userDefault && (
         <button

web/src/components/modals/ExceptionTraceModal.tsx

@@ -18,7 +18,7 @@ export default function ExceptionTraceModal({
       title="Full Exception Trace"
       onOutsideClick={onOutsideClick}
     >
-      <div className="overflow-y-auto include-scrollbar pr-3 h-full mb-6">
+      <div className="overflow-y-auto default-scrollbar overflow-x-hidden pr-3 h-full mb-6">
         <div className="mb-6">
           {!copyClicked ? (
             <div

web/src/components/search/SearchSection.tsx

@@ -698,7 +698,7 @@ export const SearchSection = ({
           </div>
         </div>
 
-        <div className="absolute include-scrollbar h-screen overflow-y-auto left-0 w-full top-0">
+        <div className="absolute default-scrollbar h-screen overflow-y-auto overflow-x-hidden left-0 w-full top-0">
           <FunctionalHeader
             sidebarToggled={toggledSidebar}
             reset={() => setQuery("")}