Some visual adjustments to the layout

dist/chromium/content.js

@@ -79,9 +79,9 @@
     { key: "owner", label: "Owner", value: getOwnerName, display: getOwnerName },
     { key: "revenue", label: "Amount", value: (item) => getNestedValue(item, ["PrimaryRevenue", "RevnAmount"]), display: formatRevenue },
     { key: "closeDate", label: "Close Date", value: (item) => item.EffectiveDate, display: (item) => formatOracleResponseDate(item.EffectiveDate) },
-    { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c },
-    { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability },
     { key: "status", label: "Status", value: (item) => item.StatusCode, display: (item) => item.StatusCode },
+    { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability },
+    { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c },
     { key: "lastUpdateDate", label: "Last Update Date", value: (item) => item.LastUpdateDate, display: (item) => formatOracleResponseDate(item.LastUpdateDate, true) }
   ];
   const ALLOWED_PATHS = [
@@ -1302,6 +1302,13 @@
     }
 
     if (owner && typeof owner === "object") {
+      const firstName = owner.PersonFirstName;
+      const lastName = owner.PersonLastName;
+
+      if (firstName || lastName) {
+        return [firstName, lastName].filter(Boolean).join(" ");
+      }
+
       return owner.PartyName
         || owner.PartyUniqueName
         || owner.Name
@@ -2447,7 +2454,7 @@
       }
 
       .opportunities-extension-total-dashboard-card {
-        border-top-color: #00758f;
+        border-top-color: #312d2a;
       }
 
       .opportunities-extension-stage-dashboard-card[data-stage="PIPELINE"] {
@@ -2867,12 +2874,13 @@
         border: 1px solid #dedbd7;
         border-radius: 4px;
         background: #ffffff;
-        overflow: auto;
+        overflow-x: auto;
+        overflow-y: auto;
       }
 
       .opportunities-extension-table {
         width: 100%;
-        min-width: 1440px;
+        min-width: 0;
         border-collapse: collapse;
         table-layout: fixed;
         color: #312d2a;
@@ -2907,7 +2915,7 @@
       }
 
       .opportunities-extension-table th:nth-child(1) {
-        width: 14%;
+        width: 17%;
       }
 
       .opportunities-extension-table th:nth-child(2) {
@@ -2915,7 +2923,7 @@
       }
 
       .opportunities-extension-table th:nth-child(3) {
-        width: 17%;
+        width: 19%;
       }
 
       .opportunities-extension-table th:nth-child(4) {
@@ -2923,19 +2931,19 @@
       }
 
       .opportunities-extension-table th:nth-child(5) {
-        width: 9%;
+        width: 8%;
       }
 
       .opportunities-extension-table th:nth-child(6) {
-        width: 9%;
+        width: 8%;
       }
 
       .opportunities-extension-table th:nth-child(7) {
-        width: 8%;
+        width: 6%;
       }
 
       .opportunities-extension-table th:nth-child(8) {
-        width: 8%;
+        width: 7%;
       }
 
       .opportunities-extension-table th:nth-child(9) {
@@ -2951,8 +2959,23 @@
       .opportunities-extension-table td:nth-child(6),
       .opportunities-extension-table td:nth-child(7),
       .opportunities-extension-table td:nth-child(8),
-      .opportunities-extension-table td:nth-child(9),
+      .opportunities-extension-table td:nth-child(8) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .opportunities-extension-table td:nth-child(9) {
+        padding-right: 6px;
+        padding-left: 6px;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
       .opportunities-extension-table td:nth-child(10) {
+        padding-right: 6px;
+        padding-left: 6px;
+        font-size: 12px;
         white-space: nowrap;
       }
 
@@ -3112,14 +3135,16 @@
         align-items: center;
         width: 100%;
         min-height: 44px;
-        padding: 10px 30px 10px 16px;
+        padding: 8px 42px 8px 16px;
         border: 0;
         background: transparent;
         color: inherit;
         font: inherit;
         font-weight: inherit;
         letter-spacing: 0;
+        line-height: 1.2;
         text-align: left;
+        white-space: normal;
         cursor: pointer;
       }
 
@@ -3471,7 +3496,7 @@
       }
 
       .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-total-dashboard-card {
-        border-top-color: #43c4d5;
+        border-top-color: #f6f4f2;
       }
 
       .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-stage-dashboard-card[data-stage="PIPELINE"] {
@@ -3569,6 +3594,46 @@
         color: #f6f4f2;
       }
 
+      @media (min-width: 1201px) and (max-width: 1450px) {
+        .opportunities-extension-table th:nth-child(1) {
+          width: 16%;
+        }
+
+        .opportunities-extension-table th:nth-child(3) {
+          width: 18%;
+        }
+
+        .opportunities-extension-table th:nth-child(4) {
+          width: 12%;
+        }
+
+        .opportunities-extension-table th:nth-child(10) {
+          width: 10%;
+        }
+      }
+
+      @media (max-width: 1200px) {
+        .opportunities-extension-table {
+          min-width: 1180px;
+        }
+
+        .opportunities-extension-table th:nth-child(1) {
+          width: 15%;
+        }
+
+        .opportunities-extension-table th:nth-child(3) {
+          width: 17%;
+        }
+
+        .opportunities-extension-table th:nth-child(4) {
+          width: 13%;
+        }
+
+        .opportunities-extension-table th:nth-child(10) {
+          width: 11%;
+        }
+      }
+
       @media (max-width: 700px) {
         .opportunities-extension-header {
           padding: 24px 20px 18px;

dist/firefox/content.js

@@ -79,9 +79,9 @@
     { key: "owner", label: "Owner", value: getOwnerName, display: getOwnerName },
     { key: "revenue", label: "Amount", value: (item) => getNestedValue(item, ["PrimaryRevenue", "RevnAmount"]), display: formatRevenue },
     { key: "closeDate", label: "Close Date", value: (item) => item.EffectiveDate, display: (item) => formatOracleResponseDate(item.EffectiveDate) },
-    { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c },
-    { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability },
     { key: "status", label: "Status", value: (item) => item.StatusCode, display: (item) => item.StatusCode },
+    { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability },
+    { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c },
     { key: "lastUpdateDate", label: "Last Update Date", value: (item) => item.LastUpdateDate, display: (item) => formatOracleResponseDate(item.LastUpdateDate, true) }
   ];
   const ALLOWED_PATHS = [
@@ -1302,6 +1302,13 @@
     }
 
     if (owner && typeof owner === "object") {
+      const firstName = owner.PersonFirstName;
+      const lastName = owner.PersonLastName;
+
+      if (firstName || lastName) {
+        return [firstName, lastName].filter(Boolean).join(" ");
+      }
+
       return owner.PartyName
         || owner.PartyUniqueName
         || owner.Name
@@ -2447,7 +2454,7 @@
       }
 
       .opportunities-extension-total-dashboard-card {
-        border-top-color: #00758f;
+        border-top-color: #312d2a;
       }
 
       .opportunities-extension-stage-dashboard-card[data-stage="PIPELINE"] {
@@ -2867,12 +2874,13 @@
         border: 1px solid #dedbd7;
         border-radius: 4px;
         background: #ffffff;
-        overflow: auto;
+        overflow-x: auto;
+        overflow-y: auto;
       }
 
       .opportunities-extension-table {
         width: 100%;
-        min-width: 1440px;
+        min-width: 0;
         border-collapse: collapse;
         table-layout: fixed;
         color: #312d2a;
@@ -2907,7 +2915,7 @@
       }
 
       .opportunities-extension-table th:nth-child(1) {
-        width: 14%;
+        width: 17%;
       }
 
       .opportunities-extension-table th:nth-child(2) {
@@ -2915,7 +2923,7 @@
       }
 
       .opportunities-extension-table th:nth-child(3) {
-        width: 17%;
+        width: 19%;
       }
 
       .opportunities-extension-table th:nth-child(4) {
@@ -2923,19 +2931,19 @@
       }
 
       .opportunities-extension-table th:nth-child(5) {
-        width: 9%;
+        width: 8%;
       }
 
       .opportunities-extension-table th:nth-child(6) {
-        width: 9%;
+        width: 8%;
       }
 
       .opportunities-extension-table th:nth-child(7) {
-        width: 8%;
+        width: 6%;
       }
 
       .opportunities-extension-table th:nth-child(8) {
-        width: 8%;
+        width: 7%;
       }
 
       .opportunities-extension-table th:nth-child(9) {
@@ -2951,8 +2959,23 @@
       .opportunities-extension-table td:nth-child(6),
       .opportunities-extension-table td:nth-child(7),
       .opportunities-extension-table td:nth-child(8),
-      .opportunities-extension-table td:nth-child(9),
+      .opportunities-extension-table td:nth-child(8) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .opportunities-extension-table td:nth-child(9) {
+        padding-right: 6px;
+        padding-left: 6px;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
       .opportunities-extension-table td:nth-child(10) {
+        padding-right: 6px;
+        padding-left: 6px;
+        font-size: 12px;
         white-space: nowrap;
       }
 
@@ -3112,14 +3135,16 @@
         align-items: center;
         width: 100%;
         min-height: 44px;
-        padding: 10px 30px 10px 16px;
+        padding: 8px 42px 8px 16px;
         border: 0;
         background: transparent;
         color: inherit;
         font: inherit;
         font-weight: inherit;
         letter-spacing: 0;
+        line-height: 1.2;
         text-align: left;
+        white-space: normal;
         cursor: pointer;
       }
 
@@ -3471,7 +3496,7 @@
       }
 
       .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-total-dashboard-card {
-        border-top-color: #43c4d5;
+        border-top-color: #f6f4f2;
       }
 
       .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-stage-dashboard-card[data-stage="PIPELINE"] {
@@ -3569,6 +3594,46 @@
         color: #f6f4f2;
       }
 
+      @media (min-width: 1201px) and (max-width: 1450px) {
+        .opportunities-extension-table th:nth-child(1) {
+          width: 16%;
+        }
+
+        .opportunities-extension-table th:nth-child(3) {
+          width: 18%;
+        }
+
+        .opportunities-extension-table th:nth-child(4) {
+          width: 12%;
+        }
+
+        .opportunities-extension-table th:nth-child(10) {
+          width: 10%;
+        }
+      }
+
+      @media (max-width: 1200px) {
+        .opportunities-extension-table {
+          min-width: 1180px;
+        }
+
+        .opportunities-extension-table th:nth-child(1) {
+          width: 15%;
+        }
+
+        .opportunities-extension-table th:nth-child(3) {
+          width: 17%;
+        }
+
+        .opportunities-extension-table th:nth-child(4) {
+          width: 13%;
+        }
+
+        .opportunities-extension-table th:nth-child(10) {
+          width: 11%;
+        }
+      }
+
       @media (max-width: 700px) {
         .opportunities-extension-header {
           padding: 24px 20px 18px;

src/content.js

@@ -79,9 +79,9 @@
     { key: "owner", label: "Owner", value: getOwnerName, display: getOwnerName },
     { key: "revenue", label: "Amount", value: (item) => getNestedValue(item, ["PrimaryRevenue", "RevnAmount"]), display: formatRevenue },
     { key: "closeDate", label: "Close Date", value: (item) => item.EffectiveDate, display: (item) => formatOracleResponseDate(item.EffectiveDate) },
-    { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c },
-    { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability },
     { key: "status", label: "Status", value: (item) => item.StatusCode, display: (item) => item.StatusCode },
+    { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability },
+    { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c },
     { key: "lastUpdateDate", label: "Last Update Date", value: (item) => item.LastUpdateDate, display: (item) => formatOracleResponseDate(item.LastUpdateDate, true) }
   ];
   const ALLOWED_PATHS = [
@@ -1302,6 +1302,13 @@
     }
 
     if (owner && typeof owner === "object") {
+      const firstName = owner.PersonFirstName;
+      const lastName = owner.PersonLastName;
+
+      if (firstName || lastName) {
+        return [firstName, lastName].filter(Boolean).join(" ");
+      }
+
       return owner.PartyName
         || owner.PartyUniqueName
         || owner.Name
@@ -2447,7 +2454,7 @@
       }
 
       .opportunities-extension-total-dashboard-card {
-        border-top-color: #00758f;
+        border-top-color: #312d2a;
       }
 
       .opportunities-extension-stage-dashboard-card[data-stage="PIPELINE"] {
@@ -2867,12 +2874,13 @@
         border: 1px solid #dedbd7;
         border-radius: 4px;
         background: #ffffff;
-        overflow: auto;
+        overflow-x: auto;
+        overflow-y: auto;
       }
 
       .opportunities-extension-table {
         width: 100%;
-        min-width: 1440px;
+        min-width: 0;
         border-collapse: collapse;
         table-layout: fixed;
         color: #312d2a;
@@ -2907,7 +2915,7 @@
       }
 
       .opportunities-extension-table th:nth-child(1) {
-        width: 14%;
+        width: 17%;
       }
 
       .opportunities-extension-table th:nth-child(2) {
@@ -2915,7 +2923,7 @@
       }
 
       .opportunities-extension-table th:nth-child(3) {
-        width: 17%;
+        width: 19%;
       }
 
       .opportunities-extension-table th:nth-child(4) {
@@ -2923,19 +2931,19 @@
       }
 
       .opportunities-extension-table th:nth-child(5) {
-        width: 9%;
+        width: 8%;
       }
 
       .opportunities-extension-table th:nth-child(6) {
-        width: 9%;
+        width: 8%;
       }
 
       .opportunities-extension-table th:nth-child(7) {
-        width: 8%;
+        width: 6%;
       }
 
       .opportunities-extension-table th:nth-child(8) {
-        width: 8%;
+        width: 7%;
       }
 
       .opportunities-extension-table th:nth-child(9) {
@@ -2951,8 +2959,23 @@
       .opportunities-extension-table td:nth-child(6),
       .opportunities-extension-table td:nth-child(7),
       .opportunities-extension-table td:nth-child(8),
-      .opportunities-extension-table td:nth-child(9),
+      .opportunities-extension-table td:nth-child(8) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .opportunities-extension-table td:nth-child(9) {
+        padding-right: 6px;
+        padding-left: 6px;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
       .opportunities-extension-table td:nth-child(10) {
+        padding-right: 6px;
+        padding-left: 6px;
+        font-size: 12px;
         white-space: nowrap;
       }
 
@@ -3112,14 +3135,16 @@
         align-items: center;
         width: 100%;
         min-height: 44px;
-        padding: 10px 30px 10px 16px;
+        padding: 8px 42px 8px 16px;
         border: 0;
         background: transparent;
         color: inherit;
         font: inherit;
         font-weight: inherit;
         letter-spacing: 0;
+        line-height: 1.2;
         text-align: left;
+        white-space: normal;
         cursor: pointer;
       }
 
@@ -3471,7 +3496,7 @@
       }
 
       .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-total-dashboard-card {
-        border-top-color: #43c4d5;
+        border-top-color: #f6f4f2;
       }
 
       .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-stage-dashboard-card[data-stage="PIPELINE"] {
@@ -3569,6 +3594,46 @@
         color: #f6f4f2;
       }
 
+      @media (min-width: 1201px) and (max-width: 1450px) {
+        .opportunities-extension-table th:nth-child(1) {
+          width: 16%;
+        }
+
+        .opportunities-extension-table th:nth-child(3) {
+          width: 18%;
+        }
+
+        .opportunities-extension-table th:nth-child(4) {
+          width: 12%;
+        }
+
+        .opportunities-extension-table th:nth-child(10) {
+          width: 10%;
+        }
+      }
+
+      @media (max-width: 1200px) {
+        .opportunities-extension-table {
+          min-width: 1180px;
+        }
+
+        .opportunities-extension-table th:nth-child(1) {
+          width: 15%;
+        }
+
+        .opportunities-extension-table th:nth-child(3) {
+          width: 17%;
+        }
+
+        .opportunities-extension-table th:nth-child(4) {
+          width: 13%;
+        }
+
+        .opportunities-extension-table th:nth-child(10) {
+          width: 11%;
+        }
+      }
+
       @media (max-width: 700px) {
         .opportunities-extension-header {
           padding: 24px 20px 18px;