update UI grid/layout for mobile first viewing for various manifest s…

…ections
USEPA · Jan 9, 2024 · bb8ae0b · bb8ae0b
1 parent aba3cef
commit bb8ae0b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/client/src/components/Manifest/GeneralInfo/GeneralInfoForm.tsx b/client/src/components/Manifest/GeneralInfo/GeneralInfoForm.tsx
@@ -26,7 +26,7 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
   const { errors } = manifestForm.formState;
   return (
     <>
-      <Row>
+      <Row xs={1} sm={3}>
         <Col>
           <HtForm.Group>
             <HtForm.Label htmlFor="manifestTrackingNumber">MTN</HtForm.Label>
@@ -53,10 +53,10 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
           <ManifestTypeSelect readOnly={readOnly} isDraft={isDraft} />
         </Col>
       </Row>
-      <Row>
+      <Row xs={1} sm={3}>
         <Col>
           <HtForm.Group>
-            <HtForm.Label htmlFor="createdDate">
+            <HtForm.Label htmlFor="createdDate" className="text-nowrap">
               {'Created Date '}
               <InfoIconTooltip message={'This field is managed by EPA'} />
             </HtForm.Label>
@@ -75,7 +75,7 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
         </Col>
         <Col>
           <HtForm.Group>
-            <HtForm.Label htmlFor="updatedDate">
+            <HtForm.Label htmlFor="updatedDate" className="text-nowrap">
               {'Last Update Date '}
               <InfoIconTooltip message={'This field is managed by EPA'} />
             </HtForm.Label>
@@ -93,7 +93,7 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
         </Col>
         <Col>
           <HtForm.Group>
-            <HtForm.Label htmlFor="shippedDate">
+            <HtForm.Label htmlFor="shippedDate" className="text-nowrap">
               {'Shipped Date '}
               <InfoIconTooltip message={'This field is managed by EPA'} />
             </HtForm.Label>

diff --git a/client/src/components/Manifest/Transporter/TransporterTable.tsx b/client/src/components/Manifest/Transporter/TransporterTable.tsx
@@ -55,10 +55,10 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
           return (
             <Card key={transporter.epaSiteId} className="py-2 px-4 my-2">
               <Row className="d-flex justify-content-between">
-                <Col xs={8} className="d-flex align-items-center">
+                <Col xs={9} className="d-flex align-items-center">
                   <div>
                     <h5 className="d-inline border-3 me-3">{transporter.order} </h5>
-                    <span>{transporter.name}</span>
+                    <span className="text-nowrap overflow-scroll">{transporter.name}</span>
                   </div>
                 </Col>
                 <Col xs={1}>

diff --git a/client/src/components/RcraSite/RcraSiteDetails.tsx b/client/src/components/RcraSite/RcraSiteDetails.tsx
@@ -19,7 +19,7 @@ export function RcraSiteDetails({ handler }: RcraSiteDetailsProps) {
     return <p>error</p>;
   }
   return (
-    <div className="py-2">
+    <div className="py-2 mb-3">
       <Row>
         <Col xs={10}>
           <h4>{handler.name}</h4>
@@ -32,9 +32,9 @@ export function RcraSiteDetails({ handler }: RcraSiteDetailsProps) {
           )}
         </Col>
       </Row>
-      <Row className="mb-0">
+      <Row className="mb-0" xs={1} sm={2}>
         <Col>
-          <p className="fw-bold">EPA ID number</p>
+          <p className="fw-bold mb-1">EPA ID number</p>
           <p>{handler.epaSiteId}</p>
         </Col>
         <Col>
@@ -58,7 +58,7 @@ export function RcraSiteDetails({ handler }: RcraSiteDetailsProps) {
           </p>
         </Col>
       </Row>
-      <Row>
+      <Row xs={1} sm={2} className="gy-3">
         <Col>
           <AddressListGroup title="Address" address={handler.siteAddress} />
         </Col>