Merge pull request #28 from polarityio/INT-1724

INT-1724: Improve scrollbar styling

Author: sarus

client/styles.less

@@ -131,8 +131,6 @@ img {
 .dataminr-content {
   border-top: 1px solid @color-border;
   border-bottom: 1px solid @color-border;
-  margin-right: calc(15px / 2);
-  margin-left: calc(15px / 2);
   padding: 0;
 
   &.dataminr-no-top-border {
@@ -157,7 +155,6 @@ img {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
-  padding: 0 10px 4px 0;
   max-height: 140px;
   overflow-y: auto;
   scrollbar-gutter: stable;
@@ -167,34 +164,47 @@ img {
 
 .dm-jewel-theme {
   .dataminr-alerts-list {
-    margin-right: -30px;
-    padding: 0 15px 4px 0;
-
     @media (max-width: 735px) {
       margin-right: 0 !important;
       padding: 0 4px 4px 4px !important;
     }
   }
 
   &.overlay-scrollbars .dataminr-alerts-list {
-    padding-right: 20px;
-    margin-right: -20px;
+    margin-right: 0px;
   }
 }
 
 .polarity-x-client .dataminr-alerts-list {
   margin-right: 0;
-  padding: 0 4px 2px 4px;
+  padding: 0 !important;
 }
 
 .dm-jewel-theme.polarity-x-client .dataminr-alerts-list {
+  // Reset global scrollbar styles so our webkit styles take effect
+  // This is primarily for Chrome
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+
+  // Due to client Chrome version we must use ::webkit-scrollbar attributes
+  // to style the scrollbar
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
   &::-webkit-scrollbar {
-    width: 8px;
+    width: 12px;
+    height: 10px;
+    background-color: rgba(0, 0, 0, 0);
   }
 
   &::-webkit-scrollbar-thumb {
-    width: 100%;
-    border: none;
+    background-color: #8b8e98;
+    border-radius: 12px;
+    // This creates an effect where the thumb scroll element appears to be
+    // in the middle of the track with space on the side.
+    border: 4px solid transparent;
+    background-clip: content-box;
   }
 }
 
@@ -1460,11 +1470,9 @@ img {
 }
 
 .dataminr-alert-live-brief-regenai-header {
-  background: linear-gradient(
-    90deg,
-    @color-gradient-regenai-start,
-    @color-bg-intel-agents
-  );
+  background: linear-gradient(90deg,
+  @color-gradient-regenai-start,
+  @color-bg-intel-agents);
   padding: 10px;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -1912,7 +1920,6 @@ img {
   flex-direction: column;
   gap: 4px;
   padding-left: 15px;
-  // border-left: 2px solid @color-border;
   padding: 10px 10px 15px 15px;
   background-color: @color-bg-metadata;
   border-radius: 4px;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dataminr-pulse",
-  "version": "3.1.35",
+  "version": "3.2.0",
   "main": "./integration.js",
   "private": true,
   "dependencies": {