chore: 1.8.0 cherrypick 2023 05 31 (#1426)

* fix: LSDV-5192: Change quick view icon and change hover color (#1412)

* fix: LSDV-5202: Fix Ranker d-n-d in Preview (#1421)

There was a problem with ResizeObserver from our panels, when user moved item to another column making it higher.
That happens only in collapsed mode, and ResizeObserver is actually not needed there.

---------

Co-authored-by: Julio Sgarbi <julio.sgarbi@hotmail.com>
Co-authored-by: hlomzik <hlomzik@gmail.com>

Author: 3 people

src/components/AnnotationsCarousel/AnnotationsCarousel.styl

@@ -33,9 +33,26 @@
     padding 0
     height 28px
     width 28px
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
+
+    &:hover
+      background #EBF3FC
+      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
+
     &_disabled
-      opacity 0.08
+      background #F0EFF1
+
+      svg
+        opacity .4
+
+      &:hover
+        background #F0EFF1
+        filter none
+
     .button
+      &:hover
+        filter none
+
       &__arrow
         &_left
           transform rotate(-90deg)

src/components/SidePanels/SidePanels.tsx

@@ -405,6 +405,9 @@ const SidePanelsComponent: FC<SidePanelsProps> = ({
     const observer = new ResizeObserver(() => {
       const { clientWidth, clientHeight } = root ?? {};
 
+      // we don't need to check or resize anything in collapsed state
+      if (clientWidth <= maxWindowWidth) return;
+
       // Remember current width and height of the viewport
       viewportSize.current.width = clientWidth ?? 0;
       viewportSize.current.height = clientHeight ?? 0;

src/components/SidePanels/TabPanels/SideTabsPanels.tsx

@@ -389,7 +389,10 @@ const SideTabsPanelsComponent: FC<SidePanelsProps> = ({
 
     const observer = new ResizeObserver(() => {
       const { clientWidth, clientHeight } = root ?? {};
-      
+
+      // we don't need to check or resize anything in collapsed state
+      if (clientWidth <= maxWindowWidth) return;
+
       if(viewportSize.current.height !== clientHeight) setPanelData(getSnappedHeights(panelData, clientHeight));
       // Remember current width and height of the viewport
       viewportSize.current.width = clientWidth ?? 0;