diff --git a/src/components/SecondHeaderWrapper.jsx b/src/components/SecondHeaderWrapper.jsx
index 9a13d91..196ec92 100644
--- a/src/components/SecondHeaderWrapper.jsx
+++ b/src/components/SecondHeaderWrapper.jsx
@@ -10,8 +10,8 @@ const HeaderWrapper = ({ children, header, loading, backTo, ...props }) => {
   } = theme.useToken();
   return (
     <>
-      <Spin spinning={loading || false}>
-        <Layout className=' bg-white'>
+      <Spin spinning={loading || false} wrapperClassName='h-full [&_.ant-spin-container]:h-full' >
+        <Layout className=' bg-white h-full'>
           <Header className='header px-6 h-10 ' style={{ background: 'white' }}>
             <Flex justify={'space-between'} align={'center'} className='h-full'>
               {/* {header} */}
@@ -20,7 +20,7 @@ const HeaderWrapper = ({ children, header, loading, backTo, ...props }) => {
             </Flex>
           </Header>
           <Divider className='my-2' />
-          <Content className='' style={{ backgroundColor: colorBgContainer }}>
+          <Content className='overflow-auto' style={{ backgroundColor: colorBgContainer }}>
             {children || <Outlet />}
           </Content>
         </Layout>
diff --git a/src/views/App.jsx b/src/views/App.jsx
index d176c1d..a2710fd 100644
--- a/src/views/App.jsx
+++ b/src/views/App.jsx
@@ -98,7 +98,7 @@ function App() {
       </FloatButton.Group>
       {contextHolder}
       <ErrorBoundary>
-				<Layout className='min-h-screen'>
+				<Layout className='min-h-screen h-dvh'>
 					<Header className='sticky top-0 z-10 w-full'>
 						<Row gutter={{ md: 24 }} justify='end' align='middle'>
 							<Col span={15}>
@@ -159,7 +159,7 @@ function App() {
 							</Col>
 						</Row>
 					</Header>
-					<Content className='p-6 m-0 min-h-72 bg-white'>
+					<Content className='p-6 m-0 min-h-72 bg-white overflow-auto'>
             {needToLogin ? <>login...</> : <Outlet />}
 					</Content>
           <Footer>China Highlights International Travel Service Co., LTD, Version: {BUILD_VERSION}</Footer>
diff --git a/src/views/products/Detail.jsx b/src/views/products/Detail.jsx
index d9ea10d..6ff6a2c 100644
--- a/src/views/products/Detail.jsx
+++ b/src/views/products/Detail.jsx
@@ -43,11 +43,11 @@ function Detail() {
       backTo={false}
       header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} handleNewProduct={() => setAddProductVisible(true)} />}>
       <>
-        <Flex gap={10}>
+        <Flex gap={10} className='h-full'>
           {/* onNodeSelect={handleNodeSelect} */}
-          <ProductsTree className='basis-80 sticky top-16 overflow-y-auto shrink-0' style={{ height: 'calc(100vh - 150px)' }} />
+          <ProductsTree className='basis-80 sticky top-0 overflow-y-auto shrink-0' style1={{ height: 'calc(100vh - 150px)' }} />
           <Divider type={'vertical'} className='mx-1 h-auto' />
-          <div className=' flex-auto '>
+          <div className=' flex-auto overflow-auto '>
             <ProductInfo />
           </div>
         </Flex>
diff --git a/src/views/products/Detail/ProductInfoForm.jsx b/src/views/products/Detail/ProductInfoForm.jsx
index 413fa19..4642e57 100644
--- a/src/views/products/Detail/ProductInfoForm.jsx
+++ b/src/views/products/Detail/ProductInfoForm.jsx
@@ -400,7 +400,7 @@ const formValuesMapper = (values) => {
         key: 'lgc_details',
         transform: (value) => {
           const valueArr = Object.values(value)
-            .filter((_v) => !isEmpty(_v))
+            .filter((_v) => !isEmpty(_v.lgc))
             .map((e) => ({ title: '', ...e, descriptions: e.descriptions || '' }));
           return valueArr;
         },
@@ -409,7 +409,7 @@ const formValuesMapper = (values) => {
         key: 'lgc_details_mapped',
         transform: (value) => {
           const valueArr = Object.values(value)
-            .filter((_v) => !isEmpty(_v))
+            .filter((_v) => !isEmpty(_v.lgc))
             .map((e) => ({ title: '', ...e, descriptions: e.descriptions || '' }));
           return valueArr.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
         },
diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx
index dacde1f..59b99d1 100644
--- a/src/views/reservation/Detail.jsx
+++ b/src/views/reservation/Detail.jsx
@@ -43,7 +43,7 @@ function Detail() {
   ];
 
   function detailTextRender(_, confirm) {
-    const formattedText = confirm.PCI_ConfirmText;//.replace(/\;/g, '\n——————————————————————\n');
+    const formattedText = confirm.PCI_ConfirmText;
     return (
       <div className='whitespace-pre-line'>
       {formattedText}
@@ -76,6 +76,8 @@ function Detail() {
   const [confirmText, setConfirmText] = useState('');
   const [newConfirmText, setNewConfirmText] = useState('');
   const [dataLoading, setDataLoading] = useState(false);
+  const [reservationPreviewUrl, setReservationPreviewUrl] = useState('');
+  const [nameCardPreviewUrl, setNameCardPreviewUrl] = useState('');
   const { notification } = App.useApp();
   const { reservationId } = useParams();
 
@@ -93,9 +95,6 @@ function Detail() {
   const nameCardUrl =
     `https://p9axztuwd7x8a7.mycht.cn/service-fileServer/DownloadPlanDoc?GRI_SN=${reservationId}&VEI_SN=${travelAgencyId}&token=${loginToken}&FileType=2&v=${randomString}`
 
-  const reservationPreviewUrl = officeWebViewerUrl + encodeURIComponent(reservationUrl);
-  const nameCardPreviewUrl = officeWebViewerUrl + encodeURIComponent(nameCardUrl);
-
   const showConfirmModal = (confirm) => {
     setIsModalOpen(true);
     const formattedText = confirm.PCI_ConfirmText;//.replace(/\;/g, '\n——————————————————————\n');
@@ -118,6 +117,10 @@ function Detail() {
 
   useEffect(() => {
     setDataLoading(true);
+
+    setReservationPreviewUrl(officeWebViewerUrl + encodeURIComponent(reservationUrl))
+    setNameCardPreviewUrl(officeWebViewerUrl + encodeURIComponent(nameCardUrl))
+
     getReservationDetail(reservationId)
       .catch(ex => {
         notification.error({