Made the working periods' table more compact.

Author: MadOPcode

src/components/ActionsMenu/index.jsx

@@ -14,6 +14,7 @@ import compStyles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {'primary'|'error'|'warning'} [props.handleColor] menu handle color
  * @param {'small'|'medium'} [props.handleSize] menu handle size
+ * @param {string} [props.handleText] text to show inside menu handle
  * @param {Array} props.items menu items
  * @param {'absolute'|'fixed'} [props.popupStrategy] popup positioning strategy
  * @param {boolean} [props.stopClickPropagation] whether to stop click event propagation
@@ -22,6 +23,7 @@ import compStyles from "./styles.module.scss";
 const ActionsMenu = ({
   handleColor = "primary",
   handleSize = "small",
+  handleText,
   items = [],
   popupStrategy = "absolute",
   stopClickPropagation = false,
@@ -89,14 +91,16 @@ const ActionsMenu = ({
       <Button
         color={handleColor}
         size={handleSize}
+        style={handleText ? "rounded" : "circle"}
         variant="contained"
         onClick={isOpen ? null : toggleMenu}
         className={cn(compStyles.handle, {
           [compStyles.handleMenuOpen]: isOpen,
         })}
         innerRef={setReferenceElement}
       >
-        Actions <IconArrowDown className={compStyles.iconArrowDown} />
+        {handleText ? <span>{handleText}&nbsp;</span> : null}
+        <IconArrowDown className={compStyles.iconArrowDown} />
       </Button>
       {isOpen && (
         <Menu
@@ -113,6 +117,7 @@ const ActionsMenu = ({
 ActionsMenu.propTypes = {
   handleColor: PT.oneOf(["primary", "error", "warning"]),
   handleSize: PT.oneOf(["small", "medium"]),
+  handleText: PT.string,
   items: PT.arrayOf(
     PT.shape({
       label: PT.string,

src/components/ActionsMenu/styles.module.scss

@@ -8,13 +8,18 @@
 .handle {
   display: inline-flex;
   align-items: center;
+
+  > span {
+    + .iconArrowDown {
+      margin-left: 8px;
+    }
+  }
 }
 
 .iconArrowDown {
   display: inline-block;
   width: 12px;
   height: 8px;
-  margin-left: 8px;
 }
 
 .handleMenuOpen {

src/components/ProjectName/index.jsx

@@ -13,11 +13,7 @@ const ProjectName = ({ className, projectId }) => {
 
   const projectName = getName(projectId) || projectId;
 
-  return (
-    <span className={cn(styles.container, className)} title={projectName}>
-      {projectName}
-    </span>
-  );
+  return <span className={cn(styles.container, className)}>{projectName}</span>;
 };
 
 ProjectName.propTypes = {

src/components/ProjectName/styles.module.scss

@@ -2,9 +2,6 @@
 
 .container {
   display: inline-block;
-  max-width: 20em;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
   @include roboto-medium;
 }

src/routes/WorkPeriods/components/PeriodAlerts/index.jsx

@@ -41,9 +41,7 @@ const PeriodAlerts = ({ alerts, className }) => {
       )}
       tooltipClassName={styles.tooltip}
     >
-      {alerts
-        ? alerts.map((alertId) => ALERT_MESSAGE_MAP[alertId]).join(", ")
-        : "None"}
+      {alerts ? "" : "None"}
     </Tooltip>
   );
 };

src/routes/WorkPeriods/components/PeriodAlerts/styles.module.scss

@@ -21,7 +21,6 @@
     &::before {
       content: "!";
       display: inline-block;
-      margin-right: 4px;
       border: 2px solid $text-color;
       border-radius: 7px;
       padding: 1px 0 0;

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -116,11 +116,17 @@ const PeriodItem = ({
     [item.jobId]
   );
 
-  const projectId = useMemo(
+  const projectIdAndTeamName = useMemo(
     () => (
       <span className={styles.tooltipContent}>
         <span className={styles.tooltipLabel}>Project ID:</span>&nbsp;
         {item.projectId}
+        <br />
+        <span className={styles.tooltipLabel}>Team Name:</span>&nbsp;
+        <ProjectName
+          className={styles.tooltipProjectName}
+          projectId={item.projectId}
+        />
       </span>
     ),
     [item.projectId]
@@ -184,8 +190,14 @@ const PeriodItem = ({
           </Tooltip>
         </td>
         <td className={styles.teamName}>
-          <Tooltip content={projectId}>
-            <ProjectName projectId={item.projectId} />
+          <Tooltip
+            targetClassName={styles.projectNameContainer}
+            content={projectIdAndTeamName}
+          >
+            <ProjectName
+              className={styles.projectName}
+              projectId={item.projectId}
+            />
           </Tooltip>
         </td>
         <td className={styles.startDate}>{formatDate(item.bookingStart)}</td>

src/routes/WorkPeriods/components/PeriodItem/styles.module.scss

@@ -91,6 +91,21 @@ td.teamName {
   white-space: nowrap;
 }
 
+.tooltipProjectName {
+  font-weight: normal;
+}
+
+.projectNameContainer {
+  display: block;
+}
+
+.projectName {
+  display: block;
+  width: 85px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 td.startDate,
 td.endDate {
   padding-left: 10px;