HPCC-33301 ECL Watch v9 restore grid styles

adds a border bottom style to the Grid component, also fixes an issue
where the custom styles were not being correctly passed down to the
ShimmeredDetailsList component

Signed-off-by: Jeremy Clements <[email protected]>

Author: jeclrsg

esp/src/src-react/components/controls/Grid.tsx

@@ -122,7 +122,7 @@ const gridStyles = (height: string): Partial<IDetailsListStyles> => {
             maxHeight: height,
             selectors: {
                 ".ms-DetailsHeader-cellName": { fontSize: "13.5px" },
-                ".ms-DetailsRow": { userSelect: "text" },
+                ".ms-DetailsRow": { userSelect: "text", borderBottom: "1px solid var(--colorNeutralBackground5)" },
                 ".ms-DetailsRow-cell:has(.bgFilled)": { color: "white", boxShadow: "inset 1px 0 var(--colorNeutralBackground1), inset -1px 1px var(--colorNeutralBackground1)" },
                 ".ms-DetailsRow-cell:has(.bgGreen)": { background: "green" },
                 ".ms-DetailsRow-cell:has(.bgOrange)": { background: "orange" },
@@ -336,7 +336,7 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
                 onRenderDetailsHeader={renderDetailsHeader}
                 onColumnResize={columnResize}
                 onRenderRow={onRenderRow}
-                styles={gridStyles(height)}
+                detailsListStyles={gridStyles(height)}
                 selectionMode={selectionMode}
             />
         </ScrollablePane>