Slightly move the resizer on the sidebar (bug 2019585)

And add a white border to the resizer in order to make it visible whatever the background is.

Author: calixteman

web/comment_manager.css

@@ -243,6 +243,7 @@
   padding-bottom: 16px;
   flex-direction: column;
   align-items: flex-start;
+  overflow-y: visible;
 
   #editorCommentsSidebarHeader {
     width: 100%;

web/sidebar.css

@@ -29,6 +29,7 @@
   --sidebar-max-width: 632px;
   --sidebar-width: 239px;
   --resizer-width: 4px;
+  --resizer-shift: calc(0px - var(--resizer-width) - 2px);
   --resizer-hover-bg-color: light-dark(#0062fa, #00cadb);
 
   @media screen and (forced-colors: active) {
@@ -49,23 +50,27 @@
   max-width: var(--sidebar-max-width);
   backdrop-filter: var(--sidebar-backdrop-filter);
   box-sizing: border-box;
+  position: relative;
 
   .sidebarResizer {
     width: var(--resizer-width);
     background-color: transparent;
     forced-color-adjust: none;
     cursor: ew-resize;
     position: absolute;
-    inset-block: calc(var(--sidebar-padding) + var(--sidebar-border-radius));
-    inset-inline-start: calc(0px - var(--resizer-width) / 2);
-    transition: background-color 0.5s ease-in-out;
+    inset-block: 0;
+    inset-inline-start: var(--resizer-shift);
+    transition:
+      background-color 0.5s ease-in-out,
+      border-color 0.5s ease-in-out;
     box-sizing: border-box;
     border: 1px solid transparent;
     border-block-width: 0;
     background-clip: content-box;
 
     &:hover {
       background-color: var(--resizer-hover-bg-color);
+      border-color: white;
     }
     &:focus-visible {
       background-color: var(--resizer-hover-bg-color);

web/views_manager.css

@@ -189,7 +189,7 @@
   transition-timing-function: var(--sidebar-transition-timing-function);
 
   .sidebarResizer {
-    inset-inline-start: 100%;
+    inset-inline-start: calc(100% + 4px);
   }
 
   .viewsManagerButton {