Improve re-sizing

web/src/app/chat/Chat.tsx

@@ -154,10 +154,13 @@ export const Chat = ({
       // numbers below are based on the actual width the center section for different
       // screen sizes. `1700` corresponds to the custom "3xl" tailwind breakpoint
       // NOTE: some buffer is needed to account for scroll bars
-      setMaxDocumentSidebarWidth(
-        masterFlexboxRef.current.clientWidth -
-          (document.documentElement.clientWidth > 1700 ? 950 : 810)
-      );
+      if (document.documentElement.clientWidth > 1700) {
+        setMaxDocumentSidebarWidth(masterFlexboxRef.current.clientWidth - 950);
+      } else if (document.documentElement.clientWidth > 1420) {
+        setMaxDocumentSidebarWidth(masterFlexboxRef.current.clientWidth - 760);
+      } else {
+        setMaxDocumentSidebarWidth(masterFlexboxRef.current.clientWidth - 660);
+      }
     }
   };
   useEffect(() => {
@@ -371,7 +374,7 @@ export const Chat = ({
 
               {messageHistory.length === 0 && !isStreaming && (
                 <div className="flex justify-center items-center h-full">
-                  <div className="px-8 w-searchbar-small 3xl:w-searchbar">
+                  <div className="px-8 w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
                     <div className="flex">
                       <div className="mx-auto h-[80px] w-[80px]">
                         <Image
@@ -526,7 +529,7 @@ export const Chat = ({
             )} */}
 
                 <div className="flex">
-                  <div className="w-searchbar-small 3xl:w-searchbar mx-auto px-4 pt-1 flex">
+                  <div className="w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar mx-auto px-4 pt-1 flex">
                     <div className="mr-3">
                       <SearchTypeSelector
                         selectedSearchType={selectedSearchType}
@@ -549,7 +552,7 @@ export const Chat = ({
                 </div>
 
                 <div className="flex justify-center py-2 max-w-screen-lg mx-auto mb-2">
-                  <div className="w-full shrink relative px-4 w-searchbar-small 3xl:w-searchbar mx-auto">
+                  <div className="w-full shrink relative px-4 w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar mx-auto">
                     <textarea
                       ref={textareaRef}
                       autoFocus

web/src/app/chat/message/Messages.tsx

@@ -52,7 +52,7 @@ export const AIMessage = ({
   const [copyClicked, setCopyClicked] = useState(false);
   return (
     <div className={"py-5 px-5 flex -mr-6 w-full"}>
-      <div className="mx-auto w-searchbar-small 3xl:w-searchbar relative">
+      <div className="mx-auto w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar relative">
         <div className="ml-8">
           <div className="flex">
             <div className="p-1 bg-ai rounded-lg h-fit my-auto">
@@ -67,7 +67,7 @@ export const AIMessage = ({
               hasDocs &&
               handleShowRetrieved !== undefined &&
               isCurrentlyShowingRetrieved !== undefined && (
-                <div className="flex w-message-small 3xl:w-message-default absolute ml-8">
+                <div className="flex w-message-xs 2xl:w-message-sm 3xl:w-message-default absolute ml-8">
                   <div className="ml-auto">
                     <ShowHideDocsButton
                       messageId={messageId}
@@ -79,7 +79,7 @@ export const AIMessage = ({
               )}
           </div>
 
-          <div className="w-message-small 3xl:w-message-default break-words mt-1 ml-8">
+          <div className="w-message-xs 2xl:w-message-sm 3xl:w-message-default break-words mt-1 ml-8">
             {query !== undefined &&
               handleShowRetrieved !== undefined &&
               isCurrentlyShowingRetrieved !== undefined && (
@@ -162,7 +162,14 @@ export const AIMessage = ({
                           </a>
                         );
                       } else {
-                        return <div className="cursor-default">{display}</div>;
+                        return (
+                          <div
+                            key={document.document_id}
+                            className="cursor-default"
+                          >
+                            {display}
+                          </div>
+                        );
                       }
                     })}
                 </div>
@@ -201,7 +208,7 @@ export const HumanMessage = ({
 }) => {
   return (
     <div className="py-5 px-5 flex -mr-6 w-full">
-      <div className="mx-auto w-searchbar-small 3xl:w-searchbar">
+      <div className="mx-auto w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
         <div className="ml-8">
           <div className="flex">
             <div className="p-1 bg-user rounded-lg h-fit">
@@ -212,8 +219,8 @@ export const HumanMessage = ({
 
             <div className="font-bold text-emphasis ml-2 my-auto">You</div>
           </div>
-          <div className="mx-auto mt-1 ml-8 w-message-small 3xl:w-message-default flex flex-wrap">
-            <div className="w-full sm:w-full w-message-small 3xl:w-message-default break-words">
+          <div className="mx-auto mt-1 ml-8 w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar-default flex flex-wrap">
+            <div className="w-message-xs 2xl:w-message-sm 3xl:w-message-default break-words">
               {typeof content === "string" ? (
                 <ReactMarkdown
                   className="prose max-w-full"

web/src/app/chat/message/SearchSummary.tsx

@@ -43,7 +43,7 @@ function SearchingForDisplay({
   return (
     <div className={`flex p-1 rounded ${isHoverable && "cursor-default"}`}>
       <FiSearch className="mr-2 my-auto" size={14} />
-      <p className="line-clamp-1 break-all w-96">
+      <p className="line-clamp-1 break-all xl:w-64 2xl:w-80 3xl:w-96">
         Searching for: <i>{query}</i>
       </p>
     </div>
@@ -70,7 +70,7 @@ export function SearchSummary({
           <HoverPopup
             mainContent={<SearchingForDisplay query={query} isHoverable />}
             popupContent={
-              <div className="w-96">
+              <div className="xl:w-64 2xl:w-80 3xl:w-96">
                 <b>Full query:</b> <div className="mt-1 italic">{query}</div>
               </div>
             }

web/src/app/chat/sessionSidebar/ChatSidebar.tsx

@@ -66,7 +66,8 @@ export const ChatSidebar = ({
   return (
     <div
       className={`
-        w-80
+        w-72
+        2xl:w-80
         border-r 
         border-border 
         flex 

web/tailwind.config.js

@@ -17,15 +17,18 @@ module.exports = {
     current: "currentColor",
     extend: {
       screens: {
+        "2xl": "1420px",
         "3xl": "1700px",
       },
       fontFamily: {
         sans: ["var(--font-inter)"],
       },
       width: {
-        "message-small": "600px",
+        "message-xs": "450px",
+        "message-sm": "550px",
         "message-default": "740px",
-        "searchbar-small": "710px",
+        "searchbar-xs": "560px",
+        "searchbar-sm": "660px",
         searchbar: "850px",
         "document-sidebar": "800px",
         "document-sidebar-large": "1000px",