Update some ux edge cases (#2545)

* update some ux edge cases

* update some formatting / ports

web/src/app/chat/shared_chat_search/FixedLogo.tsx

@@ -21,7 +21,7 @@ export default function FixedLogo() {
         }
         className="fixed cursor-pointer flex z-40 left-2.5 top-2"
       >
-        <div className="max-w-[175px] mobile:hidden flex items-center gap-x-1 my-auto">
+        <div className="max-w-[200px] mobile:hidden flex items-center gap-x-1 my-auto">
           <div className="flex-none my-auto">
             <Logo height={24} width={24} />
           </div>

web/src/components/search/SearchBar.tsx

@@ -178,9 +178,11 @@ export const FullSearchBar = ({
         suppressContentEditableWarning={true}
       />
       <div
-        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`}
+        className={`flex flex-nowrap overflow-y-hidden ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full max-w-full items-center space-x-3 py-3 px-4`}
       >
-        <div className={`-my-1 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}>
+        <div
+          className={`-my-1 overflow-x-scroll flex-grow 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}
+        >
           {(ccPairs.length > 0 || documentSets.length > 0) && (
             <HorizontalSourceSelector
               isHorizontal
@@ -192,7 +194,7 @@ export const FullSearchBar = ({
             />
           )}
         </div>
-        <div className="flex my-auto items-center gap-x-3">
+        <div className="flex-shrink-0 flex items-center my-auto gap-x-3">
           {toggleAgentic && (
             <AnimatedToggle isOn={agentic!} handleToggle={toggleAgentic} />
           )}

web/src/components/search/filtering/Filters.tsx

@@ -99,7 +99,7 @@ export function SourceSelector({
     <div
       className={`hidden ${
         showDocSidebar ? "4xl:block" : "!block"
-      } duration-1000 flex  ease-out transition-all transform origin-top-right`}
+      } duration-1000 flex ease-out transition-all transform origin-top-right`}
     >
       <div className="mb-4 pb-2 flex border-b border-border text-emphasis">
         <h2 className="font-bold my-auto">Filters</h2>
@@ -423,97 +423,92 @@ export function HorizontalSourceSelector({
   };
 
   return (
-    <div className="flex flex-col space-y-4">
+    <div className="flex flex-nowrap  space-x-2">
-      <div className="flex space-x-2">
+      <div className="max-w-24">
-        <div className="w-24">
+        <DateRangeSelector
-          <DateRangeSelector
+          isHorizontal
-            isHorizontal
+          value={timeRange}
-            value={timeRange}
+          onValueChange={setTimeRange}
-            onValueChange={setTimeRange}
+        />
-          />
+      </div>
-        </div>
 
-        {existingSources.length > 0 && (
+      {existingSources.length > 0 && (
-          <FilterDropdown
+        <FilterDropdown
-            options={listSourceMetadata()
+          options={listSourceMetadata()
-              .filter((source) => existingSources.includes(source.internalName))
+            .filter((source) => existingSources.includes(source.internalName))
-              .map((source) => ({
+            .map((source) => ({
-                key: source.internalName,
+              key: source.internalName,
-                display: (
-                  <>
-                    <SourceIcon
-                      sourceType={source.internalName}
-                      iconSize={16}
-                    />
-                    <span className="ml-2 text-sm">{source.displayName}</span>
-                  </>
-                ),
-              }))}
-            selected={selectedSources.map((source) => source.internalName)}
-            handleSelect={(option) =>
-              handleSourceSelect(
-                listSourceMetadata().find((s) => s.internalName === option.key)!
-              )
-            }
-            icon={<FiMap size={16} />}
-            defaultDisplay="Sources"
-            width="w-fit ellipsis truncate"
-            resetValues={resetSources}
-            dropdownWidth="w-40"
-            optionClassName="truncate w-full break-all ellipsis"
-          />
-        )}
-
-        {availableDocumentSets.length > 0 && (
-          <FilterDropdown
-            options={availableDocumentSets.map((documentSet) => ({
-              key: documentSet.name,
-              display: <>{documentSet.name}</>,
-            }))}
-            selected={selectedDocumentSets}
-            handleSelect={(option) => handleDocumentSetSelect(option.key)}
-            icon={<FiBook size={16} />}
-            defaultDisplay="Sets"
-            resetValues={resetDocuments}
-            width="w-fit max-w-24 ellipsis truncate"
-            dropdownWidth="max-w-36 w-fit"
-            optionClassName="truncate break-all ellipsis"
-          />
-        )}
-
-        {availableTags.length > 0 && (
-          <FilterDropdown
-            options={availableTags.map((tag) => ({
-              key: `${tag.tag_key}=${tag.tag_value}`,
               display: (
-                <span className="text-sm">
+                <>
-                  {tag.tag_key}
+                  <SourceIcon sourceType={source.internalName} iconSize={16} />
-                  <b>=</b>
+                  <span className="ml-2 text-sm">{source.displayName}</span>
-                  {tag.tag_value}
+                </>
-                </span>
               ),
             }))}
-            selected={selectedTags.map(
+          selected={selectedSources.map((source) => source.internalName)}
-              (tag) => `${tag.tag_key}=${tag.tag_value}`
+          handleSelect={(option) =>
-            )}
+            handleSourceSelect(
-            handleSelect={(option) => {
+              listSourceMetadata().find((s) => s.internalName === option.key)!
-              const [tag_key, tag_value] = option.key.split("=");
+            )
-              const selectedTag = availableTags.find(
+          }
-                (tag) => tag.tag_key === tag_key && tag.tag_value === tag_value
+          icon={<FiMap size={16} />}
-              );
+          defaultDisplay="Sources"
-              if (selectedTag) {
+          width="w-fit ellipsis truncate"
-                handleTagSelect(selectedTag);
+          resetValues={resetSources}
-              }
+          dropdownWidth="w-40"
-            }}
+          optionClassName="truncate w-full break-all ellipsis"
-            icon={<FiTag size={16} />}
+        />
-            defaultDisplay="Tags"
+      )}
-            resetValues={resetTags}
+
-            width="w-fit max-w-24 ellipsis truncate"
+      {availableDocumentSets.length > 0 && (
-            dropdownWidth="max-w-80 w-fit"
+        <FilterDropdown
-            optionClassName="truncate break-all ellipsis"
+          options={availableDocumentSets.map((documentSet) => ({
-          />
+            key: documentSet.name,
-        )}
+            display: <>{documentSet.name}</>,
-      </div>
+          }))}
+          selected={selectedDocumentSets}
+          handleSelect={(option) => handleDocumentSetSelect(option.key)}
+          icon={<FiBook size={16} />}
+          defaultDisplay="Sets"
+          resetValues={resetDocuments}
+          width="w-fit max-w-24 ellipsis truncate"
+          dropdownWidth="max-w-36 w-fit"
+          optionClassName="truncate break-all ellipsis"
+        />
+      )}
+
+      {availableTags.length > 0 && (
+        <FilterDropdown
+          options={availableTags.map((tag) => ({
+            key: `${tag.tag_key}=${tag.tag_value}`,
+            display: (
+              <span className="text-sm">
+                {tag.tag_key}
+                <b>=</b>
+                {tag.tag_value}
+              </span>
+            ),
+          }))}
+          selected={selectedTags.map(
+            (tag) => `${tag.tag_key}=${tag.tag_value}`
+          )}
+          handleSelect={(option) => {
+            const [tag_key, tag_value] = option.key.split("=");
+            const selectedTag = availableTags.find(
+              (tag) => tag.tag_key === tag_key && tag.tag_value === tag_value
+            );
+            if (selectedTag) {
+              handleTagSelect(selectedTag);
+            }
+          }}
+          icon={<FiTag size={16} />}
+          defaultDisplay="Tags"
+          resetValues={resetTags}
+          width="w-fit max-w-24 ellipsis truncate"
+          dropdownWidth="max-w-80 w-fit"
+          optionClassName="truncate break-all ellipsis"
+        />
+      )}
     </div>
   );
 }