diff --git a/common/changes/office-ui-fabric-react/cell-padding_2018-08-01-22-04.json b/common/changes/office-ui-fabric-react/cell-padding_2018-08-01-22-04.json
new file mode 100644
index 0000000000000..db0bedb31a1d0
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/cell-padding_2018-08-01-22-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Align cell and column padding in DetailsList",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "tmichon@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
index 73f1cceeda01a..ca11c6b276b97 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
@@ -6,9 +6,9 @@ import { IColumn, ColumnActionsMode } from './DetailsList.types';
 import { ITooltipHostProps } from '../../Tooltip';
 import { IDragDropHelper, IDragDropOptions } from './../../utilities/dragdrop/interfaces';
 import { IDetailsHeaderStyles } from './DetailsHeader.types';
+import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';
+import { ICellStyleProps } from './DetailsRow.types';
 
-const INNER_PADDING = 16; // Account for padding around the cell.
-const ISPADDED_WIDTH = 24;
 const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
 
 export interface IDetailsColumnProps extends React.Props<DetailsColumn> {
@@ -24,6 +24,7 @@ export interface IDetailsColumnProps extends React.Props<DetailsColumn> {
   setDraggedItemIndex?: (itemIndex: number) => void;
   isDropped?: boolean;
   headerClassNames: IClassNames<IDetailsHeaderStyles>;
+  cellStyleProps?: ICellStyleProps;
 }
 
 export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
@@ -40,7 +41,14 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
   }
 
   public render(): JSX.Element {
-    const { column, columnIndex, parentId, isDraggable, headerClassNames } = this.props;
+    const {
+      column,
+      columnIndex,
+      parentId,
+      isDraggable,
+      headerClassNames,
+      cellStyleProps = DEFAULT_CELL_STYLE_PROPS
+    } = this.props;
     const { onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip } = this.props;
 
     return (
@@ -62,7 +70,13 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
           )}
           data-is-draggable={isDraggable}
           draggable={isDraggable}
-          style={{ width: column.calculatedWidth! + INNER_PADDING + (column.isPadded ? ISPADDED_WIDTH : 0) }}
+          style={{
+            width:
+              column.calculatedWidth! +
+              cellStyleProps.cellLeftPadding +
+              cellStyleProps.cellRightPadding +
+              (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0)
+          }}
           data-automationid={'ColumnsHeaderColumn'}
           data-item-key={column.key}
         >
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 2ad192c5bafa5..9a951cafc44b9 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -251,7 +251,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderProps, IDetai
             ]
           : null}
         {groupNestingDepth! > 0 && this.props.collapseAllVisibility === CollapseAllVisibility.visible ? (
-          <div className={classNames.cell} onClick={this._onToggleCollapseAll} data-is-focusable={true}>
+          <div className={classNames.cellIsGroupExpander} onClick={this._onToggleCollapseAll} data-is-focusable={true}>
             <Icon className={classNames.collapseButton} iconName="ChevronDown" />
           </div>
         ) : null}
@@ -276,6 +276,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderProps, IDetai
               onColumnContextMenu={onColumnContextMenu}
               isDropped={this._onDropIndexInfo.targetIndex === columnIndex}
               headerClassNames={classNames}
+              cellStyleProps={this.props.cellStyleProps}
             />,
             column.isResizable && this._renderColumnSizer(columnIndex)
           ];
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts
index 9a6f565538822..18d42fcfae21c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts
@@ -10,6 +10,7 @@ import {
   keyframes
 } from '../../Styling';
 import { IsFocusVisibleClassName } from '../../Utilities';
+import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';
 
 const GlobalClassNames = {
   tooltipHost: 'ms-TooltipHost',
@@ -31,13 +32,21 @@ const GlobalClassNames = {
 };
 
 const values = {
-  rowHeight: 32,
-  cellPadding: 8,
-  isPaddedMargin: 24
+  rowHeight: 32
 };
 
 export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles => {
-  const { theme, className, isSelectAllHidden, isAllSelected, isResizingColumn, isSizing, isAllCollapsed } = props;
+  const {
+    theme,
+    className,
+    isSelectAllHidden,
+    isAllSelected,
+    isResizingColumn,
+    isSizing,
+    isAllCollapsed,
+    cellStyleProps = DEFAULT_CELL_STYLE_PROPS
+  } = props;
+
   const { semanticColors, palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
@@ -84,7 +93,7 @@ export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles
       position: 'relative',
       display: 'inline-block;',
       boxSizing: 'border-box',
-      padding: `0 ${values.cellPadding}px`,
+      padding: `0 ${cellStyleProps.cellRightPadding}px 0 ${cellStyleProps.cellLeftPadding}px`,
       border: 'none',
       lineHeight: 'inherit',
       margin: '0',
@@ -149,7 +158,7 @@ export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles
 
     cellWrapperPadded: [
       {
-        paddingRight: values.isPaddedMargin + values.cellPadding
+        paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding
       }
     ],
 
@@ -168,6 +177,15 @@ export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles
       }
     ],
 
+    cellIsGroupExpander: [
+      cellStyles,
+      {
+        paddingLeft: '8px',
+        paddingRight: '8px',
+        width: '36px'
+      }
+    ],
+
     cellIsActionable: [
       {
         selectors: {
@@ -318,7 +336,7 @@ export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles
         alignItems: 'stretch',
         boxSizing: 'border-box',
         overflow: 'hidden',
-        padding: '0 8px 0 12px'
+        padding: `0 ${cellStyleProps.cellRightPadding}px 0 ${cellStyleProps.cellLeftPadding}px`
       }
     ],
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts
index 443e8c439ac58..4f12059badeda 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts
@@ -7,6 +7,7 @@ import { ISelection, SelectionMode } from '../../utilities/selection/interfaces'
 import { ITheme, IStyle } from '../../Styling';
 import { DetailsHeaderBase } from './DetailsHeader.base';
 import { IColumn, DetailsListLayoutMode, IColumnReorderOptions } from './DetailsList.types';
+import { ICellStyleProps } from './DetailsRow.types';
 
 export interface IDetailsHeader {
   /** sets focus into the header */
@@ -91,6 +92,8 @@ export interface IDetailsHeaderProps extends React.Props<DetailsHeaderBase> {
 
   /** Overriding class name */
   className?: string;
+
+  cellStyleProps?: ICellStyleProps;
 }
 
 export enum SelectAllVisibility {
@@ -139,6 +142,8 @@ export type IDetailsHeaderStyleProps = Required<Pick<IDetailsHeaderProps, 'theme
 
     /** Whether checkbox is hidden  */
     isCheckboxHidden?: boolean;
+
+    cellStyleProps?: ICellStyleProps;
   };
 
 export interface IDetailsHeaderStyles {
@@ -154,6 +159,7 @@ export interface IDetailsHeaderStyles {
   cellSizerStart: IStyle;
   cellSizerEnd: IStyle;
   cellIsResizing: IStyle;
+  cellIsGroupExpander: IStyle;
   collapseButton: IStyle;
   iconOnlyHeader: IStyle;
   nearIcon: IStyle;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx
index 79cdac530783d..d05f292737427 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx
@@ -43,6 +43,7 @@ import { IGroupedList, GroupedList, IGroupDividerProps, IGroupRenderProps } from
 import { IList, List, IListProps, ScrollToMode } from '../../List';
 import { withViewport } from '../../utilities/decorators/withViewport';
 import { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';
+import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';
 
 const getClassNames = classNamesFunction<IDetailsListStyleProps, IDetailsListStyles>();
 
@@ -60,8 +61,6 @@ export interface IDetailsListState {
 const MIN_COLUMN_WIDTH = 100; // this is the global min width
 const CHECKBOX_WIDTH = 40;
 const GROUP_EXPAND_WIDTH = 36;
-const DEFAULT_INNER_PADDING = 16;
-const ISPADDED_WIDTH = 24;
 
 const DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
 const DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
@@ -403,7 +402,8 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
                   collapseAllVisibility: groupProps && groupProps.collapseAllVisibility,
                   viewport: viewport,
                   columnReorderOptions: columnReorderOptions,
-                  minimumPixelsForDrag: minimumPixelsForDrag
+                  minimumPixelsForDrag: minimumPixelsForDrag,
+                  cellStyleProps: DEFAULT_CELL_STYLE_PROPS
                 },
                 this._onRenderDetailsHeader
               )}
@@ -515,7 +515,8 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
       checkButtonAriaLabel,
       checkboxCellClassName,
       groupProps,
-      useReducedRowRenderer
+      useReducedRowRenderer,
+      cellStyleProps = DEFAULT_CELL_STYLE_PROPS
     } = this.props;
     const collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
     const selection = this._selection;
@@ -543,7 +544,8 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
       getRowAriaDescribedBy: getRowAriaDescribedBy,
       checkButtonAriaLabel: checkButtonAriaLabel,
       checkboxCellClassName: checkboxCellClassName,
-      useReducedRowRenderer: useReducedRowRenderer
+      useReducedRowRenderer: useReducedRowRenderer,
+      cellStyleProps: cellStyleProps
     };
 
     if (!item) {
@@ -750,7 +752,7 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
     const fixedColumns = newColumns.slice(0, resizingColumnIndex);
     fixedColumns.forEach(column => (column.calculatedWidth = this._getColumnOverride(column.key).currentWidth));
 
-    const fixedWidth = fixedColumns.reduce((total, column, i) => total + getPaddedWidth(column, i === 0), 0);
+    const fixedWidth = fixedColumns.reduce((total, column, i) => total + getPaddedWidth(column, i === 0, props), 0);
 
     const remainingColumns = newColumns.slice(resizingColumnIndex);
     const remainingWidth = viewportWidth - fixedWidth;
@@ -769,24 +771,20 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
     firstIndex: number
   ): IColumn[] {
     const { selectionMode, checkboxVisibility, groups } = props;
-    const outerPadding = DEFAULT_INNER_PADDING;
     const rowCheckWidth =
       selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden ? CHECKBOX_WIDTH : 0;
     const groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0;
     let totalWidth = 0; // offset because we have one less inner padding.
-    const availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
+    const availableWidth = viewportWidth - (rowCheckWidth + groupExpandWidth);
     const adjustedColumns: IColumn[] = newColumns.map((column, i) => {
-      const newColumn = assign(
-        {},
-        column,
-        {
-          calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH
-        },
-        this._columnOverrides[column.key]
-      );
+      const newColumn = {
+        ...column,
+        calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH,
+        ...this._columnOverrides[column.key]
+      };
 
       const isFirst = i + firstIndex === 0;
-      totalWidth += getPaddedWidth(newColumn, isFirst);
+      totalWidth += getPaddedWidth(newColumn, isFirst, props);
 
       return newColumn;
     });
@@ -804,7 +802,7 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
         column.calculatedWidth = Math.max(column.calculatedWidth! - overflowWidth, minWidth);
         totalWidth = availableWidth;
       } else {
-        totalWidth -= getPaddedWidth(column, false);
+        totalWidth -= getPaddedWidth(column, false, props);
         adjustedColumns.splice(lastIndex, 1);
       }
       lastIndex--;
@@ -1046,6 +1044,13 @@ function isRightArrow(event: React.KeyboardEvent<HTMLElement>): boolean {
   return event.which === getRTLSafeKeyCode(KeyCodes.right);
 }
 
-function getPaddedWidth(column: IColumn, isFirst: boolean): number {
-  return column.calculatedWidth! + (isFirst ? 0 : DEFAULT_INNER_PADDING) + (column.isPadded ? ISPADDED_WIDTH : 0);
+function getPaddedWidth(column: IColumn, isFirst: boolean, props: IDetailsListProps): number {
+  const { cellStyleProps = DEFAULT_CELL_STYLE_PROPS } = props;
+
+  return (
+    column.calculatedWidth! +
+    cellStyleProps.cellLeftPadding +
+    cellStyleProps.cellRightPadding +
+    (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0)
+  );
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
index c93abf256fe9a..1e1c56cb2f62e 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
@@ -10,6 +10,7 @@ import { IDetailsFooterProps } from './DetailsFooter.types';
 import { IWithViewportProps, IViewport } from '../../utilities/decorators/withViewport';
 import { IList, IListProps, ScrollToMode } from '../List/index';
 import { ITheme, IStyle } from '../../Styling';
+import { ICellStyleProps } from './DetailsRow.types';
 
 export { IDetailsHeaderProps };
 
@@ -280,6 +281,12 @@ export interface IDetailsListProps extends IBaseProps<IDetailsList>, IWithViewpo
    * @default false
    */
   useReducedRowRenderer?: boolean;
+
+  /**
+   * Props impacting the render style of cells. Since these have an impact on calculated column widths, they are
+   * handled separately from normal theme styling, but they are passed to the styling system.
+   */
+  cellStyleProps?: ICellStyleProps;
 }
 
 export interface IColumn {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
index f759cf97975d5..e6df5fb30499c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
@@ -1,4 +1,4 @@
-import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';
+import { IDetailsRowStyleProps, IDetailsRowStyles, ICellStyleProps } from './DetailsRow.types';
 import {
   AnimationClassNames,
   FontSizes,
@@ -22,17 +22,20 @@ const GlobalClassNames = {
   fields: 'ms-DetailsRow-fields'
 };
 
+export const DEFAULT_CELL_STYLE_PROPS: ICellStyleProps = {
+  cellLeftPadding: 12,
+  cellRightPadding: 8,
+  cellExtraRightPadding: 24
+};
+
 // Constant values
 let values = {
   rowHeight: 42,
   compactRowHeight: 32,
   rowVerticalPadding: 11,
-  rowHorizontalPadding: 8,
   compactRowVerticalPadding: 6,
-  isPaddedMargin: 24,
   rowShimmerLineHeight: 7,
   rowShimmerIconPlaceholderHeight: 16,
-  rowShimmerHorizontalBorder: 0,
   rowShimmerVerticalBorder: 0,
   compactRowShimmerVerticalBorder: 0
 };
@@ -41,7 +44,6 @@ let values = {
 values = {
   ...values,
   ...{
-    rowShimmerHorizontalBorder: values.rowHorizontalPadding,
     rowShimmerVerticalBorder: (values.rowHeight - values.rowShimmerLineHeight) / 2,
     compactRowShimmerVerticalBorder: (values.compactRowHeight - values.rowShimmerLineHeight) / 2
   }
@@ -57,7 +59,8 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
     isCheckVisible,
     checkboxCellClassName,
     compact,
-    className
+    className,
+    cellStyleProps = DEFAULT_CELL_STYLE_PROPS
   } = props;
 
   const {
@@ -102,8 +105,8 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
     focusMetaTextColor: neutralDark
   };
 
-  const thickBorderStyle = `${values.rowShimmerHorizontalBorder * 4}px solid ${colors.defaultBackgroundColor}`;
-  const thinBorderStyle = `${values.rowShimmerHorizontalBorder}px solid ${colors.defaultBackgroundColor}`;
+  const shimmerRightBorderStyle = `${cellStyleProps.cellRightPadding * 4}px solid ${colors.defaultBackgroundColor}`;
+  const shimmerLeftBorderStyle = `${cellStyleProps.cellLeftPadding}px solid ${colors.defaultBackgroundColor}`;
   const selectedStyles: IStyle = [
     getFocusStyle(theme, -1, undefined, undefined, themePrimary, white),
     classNames.isSelected,
@@ -206,20 +209,20 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
     minHeight: values.compactRowHeight,
     paddingTop: values.compactRowVerticalPadding,
     paddingBottom: values.compactRowVerticalPadding,
-    paddingLeft: 12,
+    paddingLeft: `${cellStyleProps.cellLeftPadding}px`,
     selectors: {
       // Masking the running shimmer background with borders
       [`&.$shimmer`]: {
         padding: 0,
-        borderLeft: thinBorderStyle,
-        borderRight: thickBorderStyle,
+        borderLeft: shimmerLeftBorderStyle,
+        borderRight: shimmerRightBorderStyle,
         borderTop: `${values.compactRowShimmerVerticalBorder}px solid ${colors.defaultBackgroundColor}`,
         borderBottom: `${values.compactRowShimmerVerticalBorder}px solid ${colors.defaultBackgroundColor}`
       },
 
       // Masking the running shimmer background with borders when it's an Icon placeholder
       [`&.$shimmerIconPlaceholder`]: {
-        borderLeft: `${values.rowShimmerHorizontalBorder}px solid ${colors.defaultBackgroundColor}`,
+        borderLeft: `${cellStyleProps.cellLeftPadding}px solid ${colors.defaultBackgroundColor}`,
         borderBottom: `${(values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2}px solid ${
           colors.defaultBackgroundColor
         }`,
@@ -244,7 +247,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
       textOverflow: 'ellipsis',
       paddingTop: values.rowVerticalPadding,
       paddingBottom: values.rowVerticalPadding,
-      paddingLeft: 12,
+      paddingLeft: `${cellStyleProps.cellLeftPadding}px`,
       selectors: {
         '& > button': {
           maxWidth: '100%'
@@ -254,14 +257,14 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
 
         '&.$shimmer': {
           padding: 0,
-          borderLeft: thinBorderStyle,
-          borderRight: thickBorderStyle,
+          borderLeft: shimmerLeftBorderStyle,
+          borderRight: shimmerRightBorderStyle,
           borderTop: `${values.rowShimmerVerticalBorder}px solid ${colors.defaultBackgroundColor}`,
           borderBottom: `${values.rowShimmerVerticalBorder}px solid ${colors.defaultBackgroundColor}`
         },
 
         '&.$shimmerIconPlaceholder': {
-          borderLeft: `${values.rowShimmerHorizontalBorder}px solid ${colors.defaultBackgroundColor}`,
+          borderLeft: `${cellStyleProps.cellLeftPadding}px solid ${colors.defaultBackgroundColor}`,
           borderBottom: `${(values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2}px solid ${
             colors.defaultBackgroundColor
           }`,
@@ -340,12 +343,12 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
     ],
     cellUnpadded: [
       {
-        paddingRight: values.rowHorizontalPadding
+        paddingRight: `${cellStyleProps.cellRightPadding}px`
       }
     ],
     cellPadded: [
       {
-        paddingRight: values.isPaddedMargin + values.rowHorizontalPadding,
+        paddingRight: `${cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding}px`,
         selectors: {
           '&.$checkCell': {
             paddingRight: 0
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
index 91edda2fa14ea..c83204b7cbadb 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
@@ -158,6 +158,8 @@ export interface IDetailsRowProps extends IBaseProps<IDetailsRow> {
    * @default false
    */
   useReducedRowRenderer?: boolean;
+
+  cellStyleProps?: ICellStyleProps;
 }
 
 export type IDetailsRowStyleProps = Required<Pick<IDetailsRowProps, 'theme'>> & {
@@ -187,8 +189,16 @@ export type IDetailsRowStyleProps = Required<Pick<IDetailsRowProps, 'theme'>> &
 
   /** Is list in compact mode */
   compact?: boolean;
+
+  cellStyleProps?: ICellStyleProps;
 };
 
+export interface ICellStyleProps {
+  cellLeftPadding: number;
+  cellRightPadding: number;
+  cellExtraRightPadding: number;
+}
+
 export interface IDetailsRowStyles {
   root: IStyle;
   cell: IStyle;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
index 9c40d6114c118..2ebf663934dac 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -2,9 +2,7 @@ import * as React from 'react';
 import { IColumn } from './DetailsList.types';
 import { BaseComponent, css } from '../../Utilities';
 import { IDetailsRowFieldsProps } from './DetailsRowFields.types';
-
-const INNER_PADDING = 16; // Account for padding around the cell.
-const ISPADDED_WIDTH = 24;
+import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';
 
 export interface IDetailsRowFieldsState {
   cellContent: React.ReactNode[];
@@ -22,7 +20,8 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
   }
 
   public render(): JSX.Element {
-    const { columns, columnStartIndex, shimmer, rowClassNames } = this.props;
+    const { columns, columnStartIndex, shimmer, rowClassNames, cellStyleProps = DEFAULT_CELL_STYLE_PROPS } = this.props;
+
     const { cellContent } = this.state;
 
     return (
@@ -31,7 +30,10 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
           const width: string | number =
             typeof column.calculatedWidth === 'undefined'
               ? 'auto'
-              : column.calculatedWidth + INNER_PADDING + (column.isPadded ? ISPADDED_WIDTH : 0);
+              : column.calculatedWidth +
+                cellStyleProps.cellLeftPadding +
+                cellStyleProps.cellRightPadding +
+                (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);
 
           return (
             <div
@@ -42,10 +44,10 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
                 column.className,
                 column.isMultiline && rowClassNames.isMultiline,
                 column.isRowHeader && rowClassNames.isRowHeader,
-                column.isPadded ? rowClassNames.cellPadded : rowClassNames.cellUnpadded,
                 column.isIconOnly && shimmer && rowClassNames.shimmerIconPlaceholder,
                 shimmer && rowClassNames.shimmer,
-                rowClassNames.cell
+                rowClassNames.cell,
+                column.isPadded ? rowClassNames.cellPadded : rowClassNames.cellUnpadded
               )}
               style={{ width }}
               data-automationid="DetailsRowCell"
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.types.ts
index 479d402ac6163..9d0a204d70154 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.types.ts
@@ -1,5 +1,5 @@
 import { IColumn } from './DetailsList.types';
-import { IDetailsRowStyles } from './DetailsRow.types';
+import { IDetailsRowStyles, ICellStyleProps } from './DetailsRow.types';
 import { IBaseProps, IRefObject } from '../../Utilities';
 
 export interface IDetailsRowFields {}
@@ -49,4 +49,6 @@ export interface IDetailsRowFieldsProps extends IBaseProps<IDetailsRowFields> {
    * Required prop to be passed in from the parent DetailsRow a map of classNames and its mergestyle-created classNames
    */
   rowClassNames: { [className in keyof IDetailsRowStyles]: string };
+
+  cellStyleProps?: ICellStyleProps;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx
index 5e9e0d3978808..759e181b5633c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx
@@ -13,6 +13,7 @@ import {
 import { CheckboxVisibility } from './DetailsList.types';
 
 import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';
+import { DEFAULT_CELL_STYLE_PROPS, getStyles as getRowStyles } from './DetailsRow.styles';
 
 const getRowClassNames = classNamesFunction<IDetailsRowStyleProps, IDetailsRowStyles>();
 
@@ -22,7 +23,6 @@ const SHIMMER_INITIAL_ITEMS = 10;
 const DEFAULT_SHIMMER_HEIGHT = 7;
 
 // This values are matching values from ./DetailsRow.css
-const DEFAULT_SIDE_PADDING = 8;
 const DEFAULT_ROW_HEIGHT = 42;
 const COMPACT_ROW_HEIGHT = 32;
 
@@ -69,10 +69,19 @@ export class ShimmeredDetailsListBase extends BaseComponent<IShimmeredDetailsLis
 
   private _onRenderShimmerPlaceholder = (index: number, rowProps: IDetailsRowProps): React.ReactNode => {
     const { onRenderCustomPlaceholder, compact } = this.props;
-    const { selectionMode, checkboxVisibility, theme, styles } = rowProps;
+    const { selectionMode, checkboxVisibility } = rowProps;
+
+    const theme = this.props.theme!;
+
     const showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;
-    const rowClassNames = getRowClassNames(styles, {
-      theme: theme!
+
+    const rowStyleProps = {
+      ...rowProps,
+      theme: theme
+    };
+
+    const rowClassNames = getRowClassNames(getRowStyles(rowStyleProps), {
+      theme: theme
     });
 
     const placeholderElements: React.ReactNode = onRenderCustomPlaceholder
@@ -89,17 +98,21 @@ export class ShimmeredDetailsListBase extends BaseComponent<IShimmeredDetailsLis
   };
 
   private _renderDefaultShimmerPlaceholder = (rowProps: IDetailsRowProps): React.ReactNode => {
-    const { columns, compact } = rowProps;
+    const { columns, compact, cellStyleProps = DEFAULT_CELL_STYLE_PROPS } = rowProps;
     const shimmerElementsRow: JSX.Element[] = [];
     const gapHeight: number = compact ? COMPACT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
 
     columns.map((column, columnIdx) => {
       const shimmerElements: IShimmerElement[] = [];
-      const groupWidth: number = DEFAULT_SIDE_PADDING * 2 + column.calculatedWidth!;
+      const groupWidth: number =
+        cellStyleProps.cellLeftPadding +
+        cellStyleProps.cellRightPadding +
+        column.calculatedWidth! +
+        (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);
 
       shimmerElements.push({
         type: ShimmerElementType.gap,
-        width: DEFAULT_SIDE_PADDING,
+        width: cellStyleProps.cellLeftPadding,
         height: gapHeight
       });
 
@@ -111,18 +124,18 @@ export class ShimmeredDetailsListBase extends BaseComponent<IShimmeredDetailsLis
         });
         shimmerElements.push({
           type: ShimmerElementType.gap,
-          width: DEFAULT_SIDE_PADDING,
+          width: cellStyleProps.cellRightPadding,
           height: gapHeight
         });
       } else {
         shimmerElements.push({
           type: ShimmerElementType.line,
-          width: column.calculatedWidth! - DEFAULT_SIDE_PADDING * 3,
+          width: column.calculatedWidth! - cellStyleProps.cellRightPadding * 3,
           height: DEFAULT_SHIMMER_HEIGHT
         });
         shimmerElements.push({
           type: ShimmerElementType.gap,
-          width: DEFAULT_SIDE_PADDING * 4,
+          width: cellStyleProps.cellRightPadding * 4,
           height: gapHeight
         });
       }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
index 100f402786b46..8849211e3acf9 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
@@ -277,7 +277,7 @@ exports[`DetailsHeader can render 1`] = `
           margin-top: 0;
           outline: transparent;
           padding-bottom: 0;
-          padding-left: 8px;
+          padding-left: 12px;
           padding-right: 8px;
           padding-top: 0;
           position: relative;
@@ -314,7 +314,7 @@ exports[`DetailsHeader can render 1`] = `
     role="columnheader"
     style={
       Object {
-        "width": 216,
+        "width": 220,
       }
     }
   >
@@ -467,7 +467,7 @@ exports[`DetailsHeader can render 1`] = `
           margin-top: 0;
           outline: transparent;
           padding-bottom: 0;
-          padding-left: 8px;
+          padding-left: 12px;
           padding-right: 8px;
           padding-top: 0;
           position: relative;
@@ -504,7 +504,7 @@ exports[`DetailsHeader can render 1`] = `
     role="columnheader"
     style={
       Object {
-        "width": 216,
+        "width": 220,
       }
     }
   >
@@ -679,7 +679,7 @@ exports[`DetailsHeader can render 1`] = `
           margin-top: 0;
           outline: transparent;
           padding-bottom: 0;
-          padding-left: 8px;
+          padding-left: 12px;
           padding-right: 8px;
           padding-top: 0;
           position: relative;
@@ -716,7 +716,7 @@ exports[`DetailsHeader can render 1`] = `
     role="columnheader"
     style={
       Object {
-        "width": 26,
+        "width": 30,
       }
     }
   >
@@ -1145,7 +1145,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           margin-top: 0;
           outline: transparent;
           padding-bottom: 0;
-          padding-left: 8px;
+          padding-left: 12px;
           padding-right: 8px;
           padding-top: 0;
           position: relative;
@@ -1182,7 +1182,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     role="columnheader"
     style={
       Object {
-        "width": 216,
+        "width": 220,
       }
     }
   >
@@ -1335,7 +1335,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           margin-top: 0;
           outline: transparent;
           padding-bottom: 0;
-          padding-left: 8px;
+          padding-left: 12px;
           padding-right: 8px;
           padding-top: 0;
           position: relative;
@@ -1372,7 +1372,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     role="columnheader"
     style={
       Object {
-        "width": 216,
+        "width": 220,
       }
     }
   >
@@ -1571,7 +1571,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           margin-top: 0;
           outline: transparent;
           padding-bottom: 0;
-          padding-left: 8px;
+          padding-left: 12px;
           padding-right: 8px;
           padding-top: 0;
           position: relative;
@@ -1608,7 +1608,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     role="columnheader"
     style={
       Object {
-        "width": 26,
+        "width": 30,
       }
     }
   >
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
index 1eac781a692f7..b44b193b96cf3 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -318,7 +318,7 @@ exports[`DetailsList renders List correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -355,7 +355,7 @@ exports[`DetailsList renders List correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 116,
+                "width": 120,
               }
             }
           >
@@ -891,7 +891,7 @@ exports[`DetailsList renders List in compact mode correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -928,7 +928,7 @@ exports[`DetailsList renders List in compact mode correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 116,
+                "width": 120,
               }
             }
           >
@@ -1464,7 +1464,7 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -1501,7 +1501,7 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 316,
+                "width": 320,
               }
             }
           >
@@ -1653,7 +1653,7 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -1690,7 +1690,7 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 316,
+                "width": 320,
               }
             }
           >
@@ -1842,7 +1842,7 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -1879,7 +1879,7 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 316,
+                "width": 320,
               }
             }
           >
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
index 6837a08ac9c06..6ccbfb09d25ce 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
@@ -318,7 +318,7 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -355,7 +355,7 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -451,7 +451,7 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -488,7 +488,7 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -584,7 +584,7 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -621,7 +621,7 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -1120,7 +1120,7 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -1157,7 +1157,7 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -1253,7 +1253,7 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -1290,7 +1290,7 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -1386,7 +1386,7 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -1423,7 +1423,7 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -1922,7 +1922,7 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -1959,7 +1959,7 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -2055,7 +2055,7 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -2092,7 +2092,7 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -2188,7 +2188,7 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -2225,7 +2225,7 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -2724,7 +2724,7 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -2761,7 +2761,7 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -2857,7 +2857,7 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -2894,7 +2894,7 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
@@ -2990,7 +2990,7 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                   margin-top: 0;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: 8px;
+                  padding-left: 12px;
                   padding-right: 8px;
                   padding-top: 0;
                   position: relative;
@@ -3027,7 +3027,7 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             role="columnheader"
             style={
               Object {
-                "width": 24,
+                "width": 28,
               }
             }
           >
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap
index 0ced1c22152ba..061c4d7f8c635 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap
@@ -359,7 +359,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -462,7 +469,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -565,7 +579,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -668,7 +689,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -771,7 +799,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -874,7 +909,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -977,7 +1019,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -1080,7 +1129,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -1183,7 +1239,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
@@ -1286,7 +1349,14 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
                     role="presentation"
                   >
                     <div
-                      className=""
+                      className=
+
+                          {
+                            border-left: 40px solid #ffffff;
+                          }
+                          {
+                            border-bottom: 1px solid #ffffff;
+                          }
                     >
                       <div
                         className=
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss
index 45b51547ae802..8dcdd69779e41 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss
@@ -2,17 +2,6 @@
 
 :global {
   .DetailsList-grouped-example {
-    .ms-DetailsList {
-      max-height: 500px;
-      overflow-y: scroll;
-
-      .ms-DetailsRow-cell {
-        padding: 0px;
-      }
-
-      .grouped-example-column {
-        padding: 11px 8px;
-      }
-    }
+    display: block;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsListExample.scss b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsListExample.scss
index b4eb68cf7326d..5ecff04769040 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsListExample.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsListExample.scss
@@ -39,7 +39,6 @@
   }
 
   .DetailsListExample-cell--FileIcon {
-    overflow: visible;
     text-align: center;
 
     &:before {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.styles.ts b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.styles.ts
index 0cfb25d3b2b7b..c49460222d4b3 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.styles.ts
@@ -116,7 +116,8 @@ export const getStyles = (props: IGroupHeaderStyleProps): IGroupHeaderStyles =>
           ':focus': {
             opacity: 1
           }
-        }
+        },
+        width: '40px'
       }
     ],
     expand: [
@@ -148,6 +149,7 @@ export const getStyles = (props: IGroupHeaderStyleProps): IGroupHeaderStyles =>
     title: [
       classNames.title,
       {
+        paddingLeft: '12px',
         fontSize: FontSizes.xLarge,
         fontWeight: FontWeights.light,
         cursor: 'pointer',
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot
index 84541e9b719ce..fb5acd0b9e6e0 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot
@@ -131,7 +131,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -141,7 +141,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -306,9 +306,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -349,7 +346,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -359,9 +356,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -377,9 +377,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -420,7 +417,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -430,9 +427,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -486,9 +486,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -529,7 +526,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -539,9 +536,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -804,7 +804,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -814,7 +814,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -979,9 +979,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -1022,7 +1019,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -1032,9 +1029,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -1050,9 +1050,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -1093,7 +1090,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -1103,9 +1100,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -1159,9 +1159,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -1202,7 +1199,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -1212,9 +1209,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -1477,7 +1477,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -1487,7 +1487,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -1652,9 +1652,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -1695,7 +1692,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -1705,9 +1702,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -1723,9 +1723,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -1766,7 +1763,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -1776,9 +1773,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -1832,9 +1832,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -1875,7 +1872,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -1885,9 +1882,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -2150,7 +2150,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -2160,7 +2160,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -2325,9 +2325,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -2368,7 +2365,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -2378,9 +2375,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -2396,9 +2396,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -2439,7 +2436,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -2449,9 +2446,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -2505,9 +2505,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -2548,7 +2545,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -2558,9 +2555,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -2823,7 +2823,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -2833,7 +2833,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -2998,9 +2998,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -3041,7 +3038,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -3051,9 +3048,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -3069,9 +3069,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -3112,7 +3109,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -3122,9 +3119,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -3178,9 +3178,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -3221,7 +3218,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -3231,9 +3228,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -3496,7 +3496,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -3506,7 +3506,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -3671,9 +3671,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -3714,7 +3711,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -3724,9 +3721,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -3742,9 +3742,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -3785,7 +3782,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -3795,9 +3792,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -3851,9 +3851,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -3894,7 +3891,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -3904,9 +3901,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -4169,7 +4169,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -4179,7 +4179,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -4344,9 +4344,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -4387,7 +4384,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -4397,9 +4394,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -4415,9 +4415,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -4458,7 +4455,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -4468,9 +4465,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -4524,9 +4524,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -4567,7 +4564,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -4577,9 +4574,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -4842,7 +4842,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -4852,7 +4852,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -5017,9 +5017,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -5060,7 +5057,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -5070,9 +5067,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -5088,9 +5088,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -5131,7 +5128,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -5141,9 +5138,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -5197,9 +5197,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -5240,7 +5237,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -5250,9 +5247,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -5515,7 +5515,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -5525,7 +5525,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -5690,9 +5690,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -5733,7 +5730,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -5743,9 +5740,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -5761,9 +5761,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -5804,7 +5801,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -5814,9 +5811,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -5870,9 +5870,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -5913,7 +5910,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -5923,9 +5920,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -6188,7 +6188,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmer {
             border-bottom: 17.5px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-right: 32px solid #ffffff;
             border-top: 17.5px solid #ffffff;
             padding-bottom: 0px;
@@ -6198,7 +6198,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           &.$shimmerIconPlaceholder {
             border-bottom: 13px solid #ffffff;
-            border-left: 8px solid #ffffff;
+            border-left: 12px solid #ffffff;
             border-top: 13px solid #ffffff;
           }
       data-selection-toggle={true}
@@ -6363,9 +6363,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={2}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -6406,7 +6403,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -6416,9 +6413,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="name"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -6434,9 +6434,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={3}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -6477,7 +6474,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -6487,9 +6484,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"
@@ -6543,9 +6543,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
         aria-colindex={4}
         className=
             ms-DetailsRow-cell
-            {
-              padding-right: 8px;
-            }
             {
               box-sizing: border-box;
               display: inline-block;
@@ -6586,7 +6583,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmer {
               border-bottom: 17.5px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-right: 32px solid #ffffff;
               border-top: 17.5px solid #ffffff;
               padding-bottom: 0px;
@@ -6596,9 +6593,12 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             &.$shimmerIconPlaceholder {
               border-bottom: 13px solid #ffffff;
-              border-left: 8px solid #ffffff;
+              border-left: 12px solid #ffffff;
               border-top: 13px solid #ffffff;
             }
+            {
+              padding-right: 8px;
+            }
         data-automation-key="link"
         data-automationid="DetailsRowCell"
         role="gridcell"