fix: Data browser table headers misaligned when scrolling horizontally (#3067)

Author: mtrezza

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -15,10 +15,12 @@
   height: 0;
   background: #66637a;
   white-space: nowrap;
-  display: inline-block;
+  display: block;
   min-width: 100%;
+  width: max-content;
   // to resolve rendering issue with retina displays
   -webkit-transform: translate3d(0, 0, 0);
+  will-change: transform;
 }
 
 .wrap {

src/dashboard/Data/Browser/Browser.scss

@@ -94,6 +94,7 @@ body:global(.expanded) {
   white-space: nowrap;
   height: 30px;
   border-bottom: 1px solid #e3e3ea;
+  will-change: transform;
 
   &:nth-child(odd) {
     background: #f4f5f7;