fix style: set fixed width to left and right menu

curieo-org · Jul 3, 2024 · b73ad03 · b73ad03
1 parent 84309c1
commit b73ad03
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/frontend/src/app/search/page.tsx b/frontend/src/app/search/page.tsx
@@ -22,8 +22,12 @@ export default function Search() {
     isCompleted,
     isError,
     isTimedOut,
-  } = useSearchQuery(searchQuery, queryTrigger, setIsStreaming)
+  } = useSearchQuery(searchQuery.trim(), queryTrigger, setIsStreaming)
   const handleSearch = () => {
+    if (searchQuery.trim().length === 0) {
+      toast.error(`Search query can not be empty!`)
+      return
+    }
     setIsLoading(true)
     setQueryTrigger(true)
   }

diff --git a/frontend/src/components/search/new-search-response.tsx b/frontend/src/components/search/new-search-response.tsx
@@ -32,10 +32,7 @@ export default function NewSearchResponse(props: NewSearchResponseProps) {
             />
           </div>
         </div>
-        <SourcesMenu
-          className="w-60 xl:w-96 p-3 mt-10 transition-all duration-300 bg-white/2 rounded-l-xl"
-          sources={_.flatten(props.response.map(streamData => streamData.sources))}
-        />
+        <SourcesMenu className="mt-10" sources={_.flatten(props.response.map(streamData => streamData.sources))} />
       </div>
 
       <div className="w-full sticky bottom-0 pb-4 px-8 flex justify-start backdrop-blur-sm max-w-[840px]">

diff --git a/frontend/src/components/search/old-search-response.tsx b/frontend/src/components/search/old-search-response.tsx
@@ -31,23 +31,20 @@ export default function OldSearchResponse(props: OldSearchResponseProps) {
 
   return (
     <div className="w-full flex">
-      <div className="w-full flex flex-col justify-between">
-        <div className="w-full px-10 transition-all duration-300" ref={answerContainerRef}>
-          <SearchTitle className="mb-6" title={searchResult.query} />
-          <div className="flex items-center gap-x-3 mb-6">
-            <img src="images/answer-logo.svg" className="w-10 h-10" alt="answer-logo" />
-            <Span className="font-light text-white/80 text-xl">Answer</Span>
-          </div>
-          <SearchResponse className="mb-6" response={searchResult.result} />
-          <SearchActions
-            searchHistoryId={searchResult.search_id}
-            reaction={searchResult.reaction}
-            response={searchResult.result}
-          />
+      <div className="flex-grow px-10 transition-all duration-300" ref={answerContainerRef}>
+        <SearchTitle className="mb-6" title={searchResult.query} />
+        <div className="flex items-center gap-x-3 mb-6">
+          <img src="images/answer-logo.svg" className="w-10 h-10" alt="answer-logo" />
+          <Span className="font-light text-white/80 text-xl">Answer</Span>
         </div>
+        <SearchResponse className="mb-6" response={searchResult.result} />
+        <SearchActions
+          searchHistoryId={searchResult.search_id}
+          reaction={searchResult.reaction}
+          response={searchResult.result}
+        />
       </div>
       <SourcesMenu
-        className="w-60 xl:w-96 p-3 transition-all duration-300 bg-white/2 rounded-l-xl"
         sources={sources}
         style={{ maxHeight: props.shortenSourcesLength ? answerContainerHeight : '90vh' }}
       />

diff --git a/frontend/src/components/search/sources-menu.tsx b/frontend/src/components/search/sources-menu.tsx
@@ -29,7 +29,11 @@ export default function SourcesMenu(props: SourcesMenuProps) {
   }, [updateCount])
 
   return (
-    <div className={twMerge('w-full', className)} {...rest} ref={containerRef}>
+    <div
+      className={twMerge('w-72 flex-none p-3 transition-all duration-300 bg-white/2 rounded-l-xl', className)}
+      {...rest}
+      ref={containerRef}
+    >
       <div className="flex items-center justify-center gap-x-2 py-2 mb-2 mr-2.5 bg-white/10 border border-white/10 rounded-lg">
         <LayersIcon className="text-typography-light dark:text-typography-dark" size={14} />
         <H2 className="font-medium text-[#DDDDE3] text-sm">Sources</H2>

diff --git a/frontend/src/components/wrappers/page-with-navmenu.tsx b/frontend/src/components/wrappers/page-with-navmenu.tsx
@@ -14,8 +14,8 @@ export default function PageWithNavMenu({ children }: LayoutProps) {
     <div className="relative flex">
       <div
         className={classNames([
-          'hidden md:block transition-all duration-300',
-          isNavmenuCollapsed ? 'w-20' : 'w-60 lg:w-72 xl:w-90',
+          'hidden md:block flex-none transition-all duration-300',
+          isNavmenuCollapsed ? 'w-20' : 'w-72',
         ])}
       >
         <Navmenu />