Fix resize indicator for RTL (#3654)

* Fix resize indicator for RTL
* fix column header button padding

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -106,7 +106,10 @@ svg.spectrum-Table-sortedIcon {
     }
     .spectrum-Table-headCellButton {
       box-sizing: border-box;
-      padding: var(--spectrum-table-header-padding-y) 0 var(--spectrum-table-header-padding-y) var(--spectrum-table-header-padding-x);
+      padding-block-start: var(--spectrum-table-header-padding-y);
+      padding-inline-end: 0;
+      padding-block-end: var(--spectrum-table-header-padding-y);
+      padding-inline-start: var(--spectrum-table-header-padding-x);
 
       /* truncate text with ellipsis */
       overflow: hidden;

packages/@react-spectrum/table/src/TableView.tsx

@@ -508,7 +508,7 @@ function TableVirtualizer({layout, collection, lastResizeInteractionModality, fo
           {state.visibleViews[1]}
           {columnState.currentlyResizingColumn != null && <div
             className={classNames(styles, 'spectrum-Table-bodyResizeIndicator')}
-            style={{left: `${resizerPosition}px`, height: `${Math.max(state.virtualizer.contentSize.height, state.virtualizer.visibleRect.height)}px`, display: 'block'}} /> }
+            style={{[direction === 'ltr' ? 'left' : 'right']: `${resizerPosition}px`, height: `${Math.max(state.virtualizer.contentSize.height, state.virtualizer.visibleRect.height)}px`, display: 'block'}} /> }
         </ScrollView>
       </div>
     </FocusScope>