style(trips): fix responsive layout

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>
   );
 };