diff --git a/web/src/components/search/SearchBar.tsx b/web/src/components/search/SearchBar.tsx
index 6892e89da..622c649cb 100644
--- a/web/src/components/search/SearchBar.tsx
+++ b/web/src/components/search/SearchBar.tsx
@@ -13,6 +13,7 @@ interface FullSearchBarProps {
   finalAvailableDocumentSets: DocumentSet[];
   finalAvailableSources: string[];
   tags: Tag[];
+  showingSidebar: boolean;
 }
 
 import { useState, useEffect, useRef } from "react";
@@ -122,6 +123,7 @@ export const AnimatedToggle = ({
 export default AnimatedToggle;
 
 export const FullSearchBar = ({
+  showingSidebar,
   query,
   setQuery,
   onSearch,
@@ -155,8 +157,6 @@ export const FullSearchBar = ({
     }
   };
 
-  const settings = useContext(SettingsContext);
-
   return (
     <div
       className="
@@ -208,9 +208,9 @@ export const FullSearchBar = ({
       />
 
       <div
-        className={`flex 2xl:justify-end justify-between w-full items-center space-x-3 px-4 pb-2`}
+        className={`flex ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end  w-full items-center space-x-3 py-3 px-4 `}
       >
-        <div className="2xl:hidden">
+        <div className={`-my-1 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}>
           {(ccPairs.length > 0 || documentSets.length > 0) && (
             <HorizontalSourceSelector
               isHorizontal
diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
index 72d2a38aa..b41dd4237 100644
--- a/web/src/components/search/SearchSection.tsx
+++ b/web/src/components/search/SearchSection.tsx
@@ -644,7 +644,7 @@ export const SearchSection = ({
 
             {
               <div
-                className={` overflow-y-auto desktop:px-24 w-full  ${chatBannerPresent && "mt-10"} pt-10 relative max-w-[2000px] xl:max-w-[1430px] mx-auto`}
+                className={` overflow-y-auto desktop:px-24 w-full ${chatBannerPresent && "mt-10"} pt-10 relative max-w-[2000px] xl:max-w-[1430px] mx-auto`}
               >
                 <div className="absolute z-10 mobile:px-4 mobile:max-w-searchbar-max mobile:w-[90%] top-12 desktop:left-0 hidden 2xl:block mobile:left-1/2 mobile:transform mobile:-translate-x-1/2 desktop:w-52 3xl:w-64">
                   {!settings?.isMobile &&
@@ -706,6 +706,7 @@ export const SearchSection = ({
                       toggleAgentic={
                         disabledAgentic ? undefined : toggleAgentic
                       }
+                      showingSidebar={showDocSidebar || toggledSidebar}
                       agentic={agentic}
                       query={query}
                       setQuery={setQuery}