update

src/components/Qc/QcComponent.tsx

@@ -487,6 +487,7 @@ useEffect(() => {
               <QcForm
                 rows={qcResult}
                 disabled={disabled}
+                compactLayout={compactLayout}
               />
             </Grid>
           </>
@@ -511,6 +512,7 @@ useEffect(() => {
                 <QcForm
                   disabled={disabled}
                   rows={qcHistory}
+                  compactLayout={compactLayout}
                 />
               </CollapsibleCard>
             </Grid>

src/components/Qc/QcForm.tsx

@@ -20,9 +20,11 @@ import { QcFormInput, QcResult } from "@/app/api/qc";
 interface Props {
   rows: QcResult[];
   disabled?: boolean;
+  /** When true, use smaller typography and inputs to match 來貨詳情 (e.g. in QcStockInModal). */
+  compactLayout?: boolean;
 }
 
-const QcForm: React.FC<Props> = ({ rows, disabled = false }) => {
+const QcForm: React.FC<Props> = ({ rows, disabled = false, compactLayout = false }) => {
   const { t } = useTranslation("purchaseOrder");
   const apiRef = useGridApiRef();
   const {
@@ -71,7 +73,7 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false }) => {
           sx={{
             lineHeight: 1.5,
             padding: "4px",
-            fontSize: 18,
+            fontSize: compactLayout ? 14 : 18,
           }}
         >
           <b>{`${params.row.order ?? "N/A"}. ${params.value}`}</b><br/>
@@ -161,8 +163,9 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false }) => {
           onMouseDown={(e) => e.stopPropagation()}
           onKeyDown={(e) => e.stopPropagation()}
           inputProps={{ min: 0 }}
+          size={compactLayout ? "small" : "medium"}
           sx={{ width: '100%',
-            "& .MuiInputBase-input": {
+            "& .MuiInputBase-input": compactLayout ? undefined : {
               padding: "0.75rem",
               fontSize: 24,
             },
@@ -202,7 +205,7 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false }) => {
             onMouseDown={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
             sx={{ width: '100%',
-              "& .MuiInputBase-input": {
+              "& .MuiInputBase-input": compactLayout ? undefined : {
                 padding: "0.75rem",
                 fontSize: 24,
               },
@@ -211,7 +214,7 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false }) => {
         );
       },
      },
-    ], [])
+    ], [compactLayout, t, setValue, qcDisabled])
 
   // const getRowId = (row :any) => {
   //   return qcRecord.findIndex(qc => qc == row);