fix: adjust layout styles for header and dataset update (#22182)

web/app/components/datasets/create/index.tsx

@@ -122,7 +122,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
     return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
 
   return (
-    <div className='flex flex-col bg-components-panel-bg' style={{ height: 'calc(100vh - 56px)' }}>
+    <div className='flex flex-col overflow-hidden bg-components-panel-bg' style={{ height: 'calc(100vh - 56px)' }}>
       <TopBar activeIndex={step - 1} datasetId={datasetId} />
       <div style={{ height: 'calc(100% - 52px)' }}>
         {step === 1 && <StepOne

web/app/components/datasets/create/notion-page-preview/index.module.css

@@ -1,6 +1,5 @@
 .filePreview {
   @apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
-  width: 528px;
 }
 
 .previewHeader {
@@ -28,6 +27,7 @@
   background: #f9fafb center no-repeat url(../assets/Loading.svg);
   background-size: contain;
 }
+
 .fileContent {
   white-space: pre-line;
 }

web/app/components/datasets/create/step-one/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowRightLine, RiFolder6Line } from '@remixicon/react'
 import FilePreview from '../file-preview'
@@ -95,24 +95,29 @@ const StepOne = ({
   const modalShowHandle = () => setShowModal(true)
   const modalCloseHandle = () => setShowModal(false)
 
-  const updateCurrentFile = (file: File) => {
+  const updateCurrentFile = useCallback((file: File) => {
     setCurrentFile(file)
-  }
-  const hideFilePreview = () => {
+  }, [])
+
+  const hideFilePreview = useCallback(() => {
     setCurrentFile(undefined)
-  }
+  }, [])
 
-  const updateCurrentPage = (page: NotionPage) => {
+  const updateCurrentPage = useCallback((page: NotionPage) => {
     setCurrentNotionPage(page)
-  }
+  }, [])
 
-  const hideNotionPagePreview = () => {
+  const hideNotionPagePreview = useCallback(() => {
     setCurrentNotionPage(undefined)
-  }
+  }, [])
 
-  const hideWebsitePreview = () => {
+  const updateWebsite = useCallback((website: CrawlResultItem) => {
+    setCurrentWebsite(website)
+  }, [])
+
+  const hideWebsitePreview = useCallback(() => {
     setCurrentWebsite(undefined)
-  }
+  }, [])
 
   const shouldShowDataSourceTypeList = !datasetId || (datasetId && !dataset?.data_source_type)
   const isInCreatePage = shouldShowDataSourceTypeList
@@ -139,7 +144,7 @@ const StepOne = ({
             <div className={classNames(s.form)}>
               {
                 shouldShowDataSourceTypeList && (
-                  <div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}>
+                  <div className={classNames(s.stepHeader, 'system-md-semibold text-text-secondary')}>
                     {t('datasetCreation.steps.one')}
                   </div>
                 )
@@ -158,8 +163,8 @@ const StepOne = ({
                         if (dataSourceTypeDisable)
                           return
                         changeType(DataSourceType.FILE)
-                        hideFilePreview()
                         hideNotionPagePreview()
+                        hideWebsitePreview()
                       }}
                     >
                       <span className={cn(s.datasetIcon)} />
@@ -182,7 +187,7 @@ const StepOne = ({
                           return
                         changeType(DataSourceType.NOTION)
                         hideFilePreview()
-                        hideNotionPagePreview()
+                        hideWebsitePreview()
                       }}
                     >
                       <span className={cn(s.datasetIcon, s.notion)} />
@@ -201,7 +206,13 @@ const StepOne = ({
                           dataSourceType === DataSourceType.WEB && s.active,
                           dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
                         )}
-                        onClick={() => changeType(DataSourceType.WEB)}
+                        onClick={() => {
+                          if (dataSourceTypeDisable)
+                            return
+                          changeType(DataSourceType.WEB)
+                          hideFilePreview()
+                          hideNotionPagePreview()
+                        }}
                       >
                         <span className={cn(s.datasetIcon, s.web)} />
                         <span
@@ -276,7 +287,7 @@ const StepOne = ({
                 <>
                   <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
                     <Website
-                      onPreview={setCurrentWebsite}
+                      onPreview={updateWebsite}
                       checkedCrawlResult={websitePages}
                       onCheckedCrawlResultChange={updateWebsitePages}
                       onCrawlProviderChange={onWebsiteCrawlProviderChange}

web/app/components/header/index.tsx

@@ -79,7 +79,7 @@ const Header = () => {
   }
 
   return (
-    <div className='flex h-[60px] items-center'>
+    <div className='flex h-[56px] items-center'>
       <div className='flex min-w-0 flex-[1]  items-center pl-3 pr-2 min-[1280px]:pr-3'>
         <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center px-0.5'>
           {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo