N°4318 - Improve large field limits visualization with scrollbar's track color

css/backoffice/base/_base.scss

@@ -6,6 +6,7 @@
 $ibo-scrollbar--scrollbar-width: 8px !default;
 $ibo-scrollbar--scrollbar-height: $ibo-scrollbar--scrollbar-width !default; /* For horizontal scrollbars */
 $ibo-scrollbar--scrollbar-track-background-color: $ibo-color-transparent !default;
+$ibo-scrollbar--scrollbar-track-border-radius: $ibo-border-radius-500 !default;
 $ibo-scrollbar--scrollbar-thumb-background-color: $ibo-color-grey-300 !default;
 $ibo-scrollbar--scrollbar-thumb-border: none !default;
 $ibo-scrollbar--scrollbar-thumb-border-radius: $ibo-border-radius-500 !default;
@@ -24,6 +25,7 @@ $ibo-content-block--border: 1px solid $ibo-color-grey-400 !default;
 	--ibo-scrollbar--scrollbar-width: #{$ibo-scrollbar--scrollbar-width};
 	--ibo-scrollbar--scrollbar-height: #{$ibo-scrollbar--scrollbar-height};
 	--ibo-scrollbar--scrollbar-track-background-color: #{$ibo-scrollbar--scrollbar-track-background-color};
+	--ibo-scrollbar--scrollbar-track-border-radius: #{$ibo-scrollbar--scrollbar-track-border-radius};
 	--ibo-scrollbar--scrollbar-thumb-background-color: #{$ibo-scrollbar--scrollbar-thumb-background-color};
 	--ibo-scrollbar--scrollbar-thumb-border: #{$ibo-scrollbar--scrollbar-thumb-border};
 	--ibo-scrollbar--scrollbar-thumb-border-radius: #{$ibo-scrollbar--scrollbar-thumb-border-radius};
@@ -53,6 +55,7 @@ $ibo-content-block--border: 1px solid $ibo-color-grey-400 !default;
 	}
 	&::-webkit-scrollbar-track {
 		background-color: var(--ibo-scrollbar--scrollbar-track-background-color);
+		border-radius: var(--ibo-scrollbar--scrollbar-track-border-radius);
 	}
 	::-webkit-scrollbar-thumb {
 		background-color: var(--ibo-scrollbar--scrollbar-thumb-background-color);

css/backoffice/components/_field.scss

@@ -23,6 +23,7 @@ $ibo-field--fullscreen-toggler--size: 20px !default;
 $ibo-field--fullscreen-toggler--border-radius: $ibo-border-radius-500 !default;
 $ibo-field--fullscreen-toggler--background-color--on-hover: $ibo-color-white-200 !default;
 
+$ibo-field--value--scrollbar-track-background-color: $ibo-color-white-200 !default;
 $ibo-field--value--padding-x--is-fullscreen: $ibo-field--label--padding-x--is-fullscreen !default;
 $ibo-field--value--padding-top--is-fullscreen: $ibo-field--label--padding-y--is-fullscreen + 32px !default;
 $ibo-field--value--padding-bottom--is-fullscreen: $ibo-field--label--padding-y--is-fullscreen !default;
@@ -87,6 +88,11 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
     width: 30%;
   }
 
+  /* N°4318 - Visible scrollbar background for large fields overflowing to ease "limits" visualization by the user */
+  .ibo-field--value > * {
+    --ibo-scrollbar--scrollbar-track-background-color: $ibo-field--value--scrollbar-track-background-color;
+  }
+
   /* Fullscreen mode */
   &.ibo-is-fullscreen {
     background-color: $ibo-field--background-color--is-fullscreen;