replace adding border with bow shadow to keep visual effect (blue bar at the end of selected row) with causing a misalgnement between rows (shift of cell to the right due to border size)

Remove unnecesary padding to head row to realign with table rows

Author: JeanMarcMilletScality

src/lib/components/tablev2/Tablestyle.tsx

@@ -8,7 +8,7 @@ import { HeaderGroup } from 'react-table';
 import { Icon } from '../icon/Icon.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 import { spacing } from '../../spacing';
-import { Box } from '../box/Box';
+import { Box } from '../box/Box'
 
 const borderSize = '4px';
 export const SortIncentive = styled.span`
@@ -65,7 +65,6 @@ export const HeadRow = styled.div<HeadRowType>`
   overflow: hidden;
   border-bottom: 1px solid
     ${(props) => props.theme[props.separationLineVariant]};
-  padding-right: ${borderSize};
   padding-left: ${spacing.r16};
 `;
 
@@ -105,7 +104,7 @@ export const TableRow = styled.div<TableRowType>`
     if (props.selectedId && props.isSelected) {
       return css`
         background-color: ${props.theme.highlight};
-        border-right: ${borderSize} solid ${props.theme.selectedActive};
+        box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
       `;
     }
   }}
@@ -124,7 +123,7 @@ export const TableRowMultiSelectable = styled.div<TableRowMultiSelectableType>`
     if (props.isSelected) {
       return css`
         background-color: ${(props) => props.theme.highlight};
-        border-right: ${borderSize} solid ${props.theme.selectedActive};
+        box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
       `;
     }
   }}