style(trips): fix responsive layout

src/app.tsx

@@ -69,6 +69,8 @@ export const layout: RunTimeLayoutConfig = (initialState) => {
     },
     contentStyle: {
       padding: 0,
+      margin: 0,
+      paddingInline: 0,
     },
     layout: 'mix',
     logout: () => {
@@ -103,6 +105,12 @@ export const layout: RunTimeLayoutConfig = (initialState) => {
       },
     ],
     unAccessible: <UnAccessPage />,
+    token: {
+      pageContainer: {
+        paddingInlinePageContainerContent: 0,
+        paddingBlockPageContainerContent: 0,
+      },
+    },
   };
 };
 

src/pages/Trip/components/AlarmTable.tsx

@@ -86,7 +86,7 @@ export const AlarmTable: React.FC<AlarmTableProps> = ({
   return (
     <>
       <ProList<API.Alarm>
-        // bordered
+        bordered
         actionRef={actionRef}
         metas={columns}
         polling={DURATION_POLLING_PRESENTATIONS}

src/pages/Trip/components/CreateNewHaulOrTrip.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/services/controller/TripController';
 import { PlusOutlined } from '@ant-design/icons';
 import { useModel } from '@umijs/max';
-import { Button, message, theme } from 'antd';
+import { Button, Grid, message, theme } from 'antd';
 import { useState } from 'react';
 import CreateOrUpdateFishingLog from './CreateOrUpdateFishingLog';
 
@@ -25,6 +25,8 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
   const checkHaulFinished = () => {
     return trips?.fishing_logs?.some((h) => h.status === 0);
   };
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
 
   const createNewHaul = async () => {
     if (trips?.fishing_logs?.some((f) => f.status === 0)) {
@@ -76,7 +78,10 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
   }
 
   return (
-    <>
+    <div style={{
+      padding: screens.sm ? '0px': '10px',
+      marginRight: screens.sm ? '24px': '0px',
+    }}>
       {trips?.trip_status === 2 ? (
         <Button
           color="green"
@@ -126,7 +131,7 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
           }
         }}
       />
-    </>
+    </div>
   );
 };
 

src/pages/Trip/components/MainTripBody.tsx

@@ -1,7 +1,6 @@
 import { ProCard } from '@ant-design/pro-components';
 import { useModel } from '@umijs/max';
 import { Flex, Grid } from 'antd';
-import { useState } from 'react';
 import HaulTable from './HaulTable';
 import TripCostTable from './TripCost';
 import TripCrews from './TripCrews';
@@ -23,7 +22,6 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
   //   console.log('tripInfo:', tripInfo);
   const { useBreakpoint } = Grid;
   const screens = useBreakpoint();
-  const [isResponsive, setIsResponsive] = useState(false);
   const { data, getApi } = useModel('getTrip');
   const tripCosts = Array.isArray(tripInfo?.trip_cost)
     ? tripInfo.trip_cost
@@ -77,11 +75,14 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
           padding: 0,
           paddingInline: 0,
           gap: 10,
+          backgroundColor: 'transparent',
         }}
       >
         <ProCard
-          split={screens.lg ? 'vertical' : 'horizontal'}
-          bodyStyle={{ padding: 0, gap: 5 }}
+          gutter={16} // tạo khoảng cách thay vì split (không có border)
+          direction={screens.lg ? 'row' : 'column'} // responsive: ngang/dọc
+          bodyStyle={{ padding: 0, gap: 10 }}
+          style={{ color: 'transparent' }}
         >
           <ProCard
             colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
@@ -92,7 +93,7 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-              borderBottom: '1px solid #f0f0f0',
+              // borderBottom: '1px solid #f0f0f0',
             }}
             title="Chi phí chuyến đi"
             style={{ minHeight: 300 }}

src/pages/Trip/index.tsx

@@ -49,10 +49,16 @@ const DetailTrip = () => {
     (
       <PageContainer
         header={{
-          title: data ? data.name : 'Chuyến đi',
+          title: (
+            <div style={{ marginLeft: screens.md ? '24px' : '10px' }}>
+              {data ? data.name : 'Chuyến đi'}
+            </div>
+          ),
           tags: <BadgeTripStatus status={data?.trip_status || 0} />,
         }}
+        content={null}
         loading={isLoading}
+        ghost
         extra={[
           <CreateNewHaulOrTrip
             trips={data || undefined}
@@ -99,8 +105,9 @@ const DetailTrip = () => {
                 defaultMessage: 'Cảnh báo',
               })}
               colSpan={{ xs: 24, md: 24, lg: 5 }}
-              bodyStyle={{ paddingInline: 0, paddingBlock: 8 }}
+              bodyStyle={{ paddingInline: 0, paddingBlock: 0 }}
               bordered
+              // style={{ borderBlockEnd: 'none'}}
             >
               {data ? (
                 <AlarmTable alarmList={alarmList} isLoading={isLoading} />