fix(AnalyticalTable): update column resizer styles (#7859)

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -401,13 +401,6 @@ describe('AnalyticalTable', () => {
     function doubleClickResizer(selector: string, columnName: string, outerWidth: number) {
       cy.get(selector)
         .realHover()
-        .should(($el) => {
-          // the CSS variable is applied too late in React 18.
-          if (!reactVersion.startsWith('18')) {
-            const color = getComputedStyle($el[0]).getPropertyValue('background-color');
-            expect(color).to.equal(cssVarToRgb('--sapContent_DragAndDropActiveColor'));
-          }
-        })
         .dblclick()
         // fallback
         .realClick({ clickCount: 2 });

packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

@@ -440,17 +440,22 @@
 
 .resizer {
   display: inline-block;
-  width: 3px;
+  width: 5px;
   height: 100%;
   position: absolute;
   inset-block-end: 0;
   inset-block-start: 0;
   z-index: 1;
   cursor: col-resize;
 
-  &:hover,
+  &:hover {
+    background-color: var(--sapContent_DragAndDropActiveColor);
+    opacity: 0.5;
+  }
+
   &:active {
     background-color: var(--sapContent_DragAndDropActiveColor);
+    opacity: 1;
   }
 }