update public notice detail

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -184,7 +184,7 @@ const ApplicationDetailCard = (
                         <Grid item xs={12} md={12}>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -212,7 +212,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -249,7 +249,7 @@ const ApplicationDetailCard = (
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -294,7 +294,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: {lg:1} }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -326,7 +326,7 @@ const ApplicationDetailCard = (
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -354,7 +354,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: {lg:1} }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -387,7 +387,7 @@ const ApplicationDetailCard = (
 
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
+                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1, }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -434,7 +434,7 @@ const ApplicationDetailCard = (
                                 </Grid>
                                 {
                                     fee > 0 ?
-                                        <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                        <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: 1 }}>
                                             <Grid container alignItems={"center"}>
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
@@ -451,14 +451,14 @@ const ApplicationDetailCard = (
                                 }
 
                             </Grid>
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
+                            <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="h5">傳真號碼:</Typography></FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                         <Stack direction="row">
                                             <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
                                                 <OutlinedInput
@@ -498,17 +498,17 @@ const ApplicationDetailCard = (
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={12} lg={12} mt={1}>
+                                <Grid item xs={12} sm={12} md={11} lg={11} mt={1}>
                                     <Grid container alignItems={"center"}>
-                                        <Grid item xs={12} md={6} lg={6}>
+                                        <Grid item xs={12} sm={12} md={12} lg={12}>
                                             <Grid container direction="row">
-                                                <Grid item xs={12} md={3} lg={3}
+                                                <Grid item xs={12} sm={12} md={2.5} lg={1.6}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel><Typography variant="h5">稿件檔案:</Typography></FormLabel>
                                                 </Grid>
-                                                <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <Grid container direction="row" justifyContent="flex-start">
-                                                        <Grid item xs={12} md={8} lg={8} sx={{ display: 'flex', alignItems: 'center' }}>
+                                                <Grid item xs={12} sm={12} md={9} lg={9} >
+                                                    <Grid container direction="row" alignItems="center" justifyContent="flex-start">
+                                                        <Grid item xs={12} sm={12} md={9} lg={9} sx={{ wordBreak: 'break-word' , }}>
                                                             <FormControl variant="outlined" fullWidth  >
                                                                 <Typography
                                                                     fullWidth
@@ -519,16 +519,13 @@ const ApplicationDetailCard = (
                                                                 </Typography>
                                                             </FormControl>
                                                         </Grid>
-                                                        <Grid item md={4} lg={4}>
+                                                        <Grid item xs={12} sm={12} md={3} lg={3} >
                                                             <Button
                                                                 variant="contained"
                                                                 onClick={onDownloadClick()}
                                                                 title="下載"
-                                                                style={{ display: "flex-right" }}
-                                                                sx={{
-                                                                    textTransform: 'capitalize',
-                                                                    alignItems: 'end',
-                                                                }}>
+                                                                sx={{justifyContent: 'flex-end'}}
+                                                                >
                                                                 <DownloadIcon sx={{ mb: 0.5 }} />
                                                                 <Typography sx={{ ml: 1 }} variant="h5">下載</Typography>
                                                             </Button>
@@ -541,7 +538,7 @@ const ApplicationDetailCard = (
                                 </Grid>
                             </Grid>
                             {isORGLoggedIn() ?
-                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
+                                <Grid item xs={12} md={9} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -553,7 +550,7 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid> : null
                             }
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
+                            <Grid item xs={12} md={9} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>

src/pages/PublicNotice/Details_Public/index.js

@@ -149,7 +149,7 @@ const DashboardDefault = () => {
   };
 
   return (
-    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#ffffff' }} direction="column">
+    <Grid container sx={{ backgroundColor: '#ffffff' }} direction="column">
       <StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} getStatus={getStatus} />
       <Grid item xs={12}>
         <div style={BackgroundHead}>
@@ -169,7 +169,7 @@ const DashboardDefault = () => {
             </Stack>
           </Grid>
           <Grid item width="75%">
-            <Box xs={12} mt={3} sx={{ p: 2, border: '0px groove grey', borderRadius: '10px', ..._sx }}>
+            <Box xs={12} mt={3} sx={{  border: '0px groove grey', borderRadius: '10px', ..._sx }}>
               <ApplicationDetailCard
                 setStatus={setStatus}
                 applicationDetailData={applicationDetailData}
@@ -177,7 +177,7 @@ const DashboardDefault = () => {
             </Box>
           </Grid>
           <Grid item width="75%">
-            <Box xs={12} mt={3} sx={{ p: 2, border: '0px groove grey', borderRadius: '10px', ..._sx }}>
+            <Box xs={12} mt={3} sx={{  border: '0px groove grey', borderRadius: '10px', ..._sx }}>
               <TabTableDetail
                 proofList={proofList}
                 paymentList={paymentList}

src/pages/PublicNotice/Details_Public/tabTableDetail/PaymentTab.js

@@ -1,19 +1,22 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button
+    Button, useMediaQuery
 } from '@mui/material';
 import { useNavigate } from "react-router-dom";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import * as DateUtils from "utils/DateUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
+import {useTheme} from "@emotion/react";
 // import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
 
     const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const handleEditClick = (params) => () => {
         navigate('/paymentPage/details/' + params.row.id);
@@ -23,7 +26,8 @@ export default function SubmittedTab({ rows }) {
         {
             field: 'actions',
             headerName: '付款編號',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
@@ -33,7 +37,8 @@ export default function SubmittedTab({ rows }) {
             id: 'transDateTime',
             field: 'transDateTime',
             headerName: '付款日期',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
@@ -42,7 +47,8 @@ export default function SubmittedTab({ rows }) {
             id: 'status',
             field: 'status',
             headerName: '付款狀況',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return PaymentStatus.getStatus_Cht(params);
             }

src/pages/PublicNotice/Details_Public/tabTableDetail/ProofTab.js

@@ -1,18 +1,21 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button,
+    Button, useMediaQuery,
 } from '@mui/material';
 import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
 
     const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const handleEditClick = (params) => () => {
         navigate('/proof/reply/' + params.row.id);
@@ -32,7 +35,8 @@ export default function ProofTab({rows}) {
         {
             id: 'actions',
             headerName: '狀態',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return ProofStatus.getStatus_Cht(params);
             },
@@ -41,7 +45,8 @@ export default function ProofTab({rows}) {
             id: 'created',
             field: 'created',
             headerName: '校對日期',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -50,7 +55,8 @@ export default function ProofTab({rows}) {
             id: 'replyDate',
             field: 'replyDate',
             headerName: '回覆日期',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return params?.value?DateUtils.datetimeStr(params?.value):"";
             }
@@ -59,7 +65,8 @@ export default function ProofTab({rows}) {
             id: 'fee',
             field: 'fee',
             headerName: '費用',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
             }