Merge pull request #3312 from RedisInsight/fe/feature/fix_scrolls

#RI-5667 - No scrollbar when editing long value

Author: egor-zalenski

.circleci/config.yml

@@ -654,7 +654,7 @@ jobs:
   macosx:
     macos:
       xcode: 14.2.0
-    resource_class: macos.m1.medium.gen1
+    resource_class: macos.x86.medium.gen2
     parameters:
       env:
         description: Build environment (stage || prod)

redisinsight/ui/src/styles/base/_base.scss

@@ -8,7 +8,7 @@ html {
   // sass-lint:disable-block no-misspelled-properties
   scrollbar-width: thin;
 
-  scrollbar-color: transparent(var(--euiColorDarkShade), 0.5) transparent; // Firefox support
+  scrollbar-color: var(--scrollBackgroundColor) transparent;
 }
 
 body {

redisinsight/ui/src/styles/components/_popover.scss

@@ -2,11 +2,42 @@
   box-shadow: 0 3px 15px var(--controlsBoxShadowColor) !important;
 }
 
+.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow {
+  border-color: transparent !important;
+
+  &--left:before {
+    border-left-color: var(--euiColorLightShade) !important;
+  }
+  &--left:after {
+    border-left-color: var(--euiColorEmptyShade) !important;
+  }
+
+  &--right:before {
+    border-right-color: var(--euiColorLightShade) !important;
+  }
+  &--right:after {
+    border-right-color: var(--euiColorEmptyShade) !important;
+  }
+
+  &--bottom:before {
+    border-bottom-color: var(--euiColorLightShade) !important;
+  }
+  &--bottom:after {
+    border-bottom-color: var(--euiColorEmptyShade) !important;
+  }
+
+  &--top:before {
+    border-top-color: var(--euiColorLightShade) !important;
+  }
+  &--top:after {
+    border-top-color: var(--euiColorEmptyShade) !important;
+  }
+}
+
 .popoverLikeTooltip {
   border: none;
   max-width: 267px !important;
   background-color: var(--euiTooltipBackgroundColor) !important;
-
   .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after {
     border-bottom-color: var(--euiTooltipBackgroundColor) !important;
   }

redisinsight/ui/src/styles/mixins/_eui.scss

@@ -1,5 +1,3 @@
-$trackBackgroundColor: transparent;
-
 $euiBreakpoints: (
   "xs": 0,
   "s": 575px,
@@ -23,14 +21,14 @@ $euiBreakpointKeys: map-keys($euiBreakpoints);
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: transparent(var(--euiColorDarkShade), .5);
-    border: 16px Corner solid $trackBackgroundColor;
+    background-color: var(--scrollBackgroundColor);
+    border: 6px solid transparent;
     background-clip: content-box;
   }
 
   &::-webkit-scrollbar-corner,
   &::-webkit-scrollbar-track {
-    background-color: $trackBackgroundColor;
+    background-color: transparent;
   }
 
   @content;

redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss

@@ -73,6 +73,7 @@ $externalLinkTooltipColor: $externalLinkColor;
 $linkToastColor: $externalLinkColor;
 $defaultGreenColor: #608b4e;
 $insightsTriggerBgColor: #292f47;
+$scrollBackgroundColor: rgba(105, 112, 125, 0.5);
 
 $tableRowHoverColor: #070707;
 $tableRowSelectedColor: #212536;

redisinsight/ui/src/styles/themes/dark_theme/darkTheme.scss

@@ -42,6 +42,7 @@
   --euiTextSubduedColorHover: #{$euiTextSubduedColorHover};
   --euiTitleColor: #{$euiTitleColor};
   --euiBreadcrumbActive: #{$euiBreadcrumbActive};
+  --scrollBackgroundColor: #{$scrollBackgroundColor};
 
   // Contrasty text variants
   --euiColorPrimaryText: #{$euiColorPrimaryText};

redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss

@@ -37,6 +37,7 @@ $externalLinkTooltipColor: #3163d8;
 $linkToastColor: #adbeff;
 $defaultGreenColor: #008000;
 $insightsTriggerBgColor: #D7E3FA;
+$scrollBackgroundColor: rgba(105, 112, 125, 0.5);
 
 $tableRowHoverColor: #fafbfd;
 $tableRowSelectedColor: #ebeffa;

redisinsight/ui/src/styles/themes/light_theme/lightTheme.scss

@@ -38,6 +38,7 @@
   --euiTextSubduedColorHover: #{$euiTextSubduedColorHover};
   // --euiTitleColor: #{$euiTitleColor};
   --euiBreadcrumbActive: #{$euiBreadcrumbActive};
+  --scrollBackgroundColor: #{$scrollBackgroundColor};
 
   // Contrasty text variants
   --euiColorPrimaryText: #{$euiColorPrimaryText};