Fixed the column alignment.

Author: ocielliottc

web-ui/src/components/reports-section/checkin-report/TeamMemberMap.jsx

@@ -85,21 +85,27 @@ const TeamMemberMap = ({ members, closed, planned, reportDate }) => {
 
   return (
     <Box className="team-member-map">
-      <Box display="flex">
-        <Box flex={2} onClick={() => { setSortBy(SortOption.BY_MEMBER); }}
-             style={{ cursor: 'pointer' }}>
-          <Typography variant="h5">Member</Typography>
-        </Box>
-        <Box flex={1} onClick={() => { setSortBy(SortOption.BY_PDL); }}
-             style={{ cursor: 'pointer' }}>
-          <Typography variant="h5">PDL</Typography>
-        </Box>
-        <Box flex={1}
-             sx={{ display: { xs: 'none', sm: 'none', md: 'grid' } }}>
-          <Typography variant="h5">Check-In Date</Typography>
-        </Box>
-        <Box flex={1}>
-          <Typography variant="h5">Status</Typography>
+      {/* This header row mimics the configuration of the individual member
+          rows so that each header lines up exactly with the columns. */}
+      <Box className="team-member-map-row">
+        <Box className="team-member-map-row-summary">
+          <Box onClick={() => { setSortBy(SortOption.BY_MEMBER); }}
+               style={{ cursor: 'pointer' }}>
+            <Typography variant="h5">Member</Typography>
+          </Box>
+          <div className="team-member-map-summmary-content">
+            <hgroup>{/* This forces the PDL header over. */}</hgroup>
+            <Box onClick={() => { setSortBy(SortOption.BY_PDL); }}
+                 style={{ cursor: 'pointer' }}>
+              <Typography variant="h5">PDL</Typography>
+            </Box>
+            <Box sx={{ display: { xs: 'none', sm: 'none', md: 'grid' } }}>
+              <Typography variant="h5">Check-In Date</Typography>
+            </Box>
+            <Box>
+              <Typography variant="h5">Status</Typography>
+            </Box>
+          </div>
         </Box>
       </Box>
       {

web-ui/src/pages/__snapshots__/CheckinsReportPage.test.jsx.snap

@@ -115,45 +115,54 @@ exports[`renders correctly 1`] = `
         class="team-member-map MuiBox-root css-0"
       >
         <div
-          class="MuiBox-root css-k008qs"
+          class="team-member-map-row MuiBox-root css-0"
         >
           <div
-            class="MuiBox-root css-kzfr2u"
-            style="cursor: pointer;"
+            class="team-member-map-row-summary MuiBox-root css-0"
           >
-            <h5
-              class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
+            <div
+              class="MuiBox-root css-0"
+              style="cursor: pointer;"
             >
-              Member
-            </h5>
-          </div>
-          <div
-            class="MuiBox-root css-1rr4qq7"
-            style="cursor: pointer;"
-          >
-            <h5
-              class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
-            >
-              PDL
-            </h5>
-          </div>
-          <div
-            class="MuiBox-root css-1guejwj"
-          >
-            <h5
-              class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
-            >
-              Check-In Date
-            </h5>
-          </div>
-          <div
-            class="MuiBox-root css-1rr4qq7"
-          >
-            <h5
-              class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
+              <h5
+                class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
+              >
+                Member
+              </h5>
+            </div>
+            <div
+              class="team-member-map-summmary-content"
             >
-              Status
-            </h5>
+              <hgroup />
+              <div
+                class="MuiBox-root css-0"
+                style="cursor: pointer;"
+              >
+                <h5
+                  class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
+                >
+                  PDL
+                </h5>
+              </div>
+              <div
+                class="MuiBox-root css-1mvoz6j"
+              >
+                <h5
+                  class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
+                >
+                  Check-In Date
+                </h5>
+              </div>
+              <div
+                class="MuiBox-root css-0"
+              >
+                <h5
+                  class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
+                >
+                  Status
+                </h5>
+              </div>
+            </div>
           </div>
         </div>
       </div>