fix:custom page width issue (#145)

Author: Ramakrishnan24689

SubwayNav/SubwayNav/components/CanvasSubwayNav.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { ThemeProvider, createTheme, ITheme, IFocusZoneProps } from '@fluentui/react';
+import { ThemeProvider, createTheme, ITheme, IFocusZoneProps, mergeStyles } from '@fluentui/react';
 import { ISubwayNavNodeProps, SubwayNavNodeState } from '../utilities/subway-nav/subway-node.types';
 import { goToStepById, completeAllSteps, errorAllSteps } from '../utilities/utilities';
 import { SubwayNav as CustomSubwayNav } from '../utilities/subway-nav/subway-nav';
@@ -10,6 +10,7 @@ import { M365Styles, IM365ExtendedSemanticColors } from '../utilities/customizat
 import { useAsync, usePrevious } from '@fluentui/react-hooks';
 import { getSubwayNavNodeState } from './DatasetMapping';
 import { PPACActualLightTheme, PPACActualDarkTheme } from '../utilities/themes';
+import { subwayNavWidth, wizardContentMaxWidth } from '../utilities/wizard';
 
 // reference : https://admincontrolsdemoapps.blob.core.windows.net/demo-app/latest/DemoApp/index.html#/examples/subwaynav
 
@@ -50,10 +51,10 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem
             }
             return themeJSON
                 ? createTheme({
-                      palette: { ...JSON.parse(themeJSON).palette },
-                      semanticColors: semanticColorsCopy,
-                      components: M365Styles,
-                  })
+                    palette: { ...JSON.parse(themeJSON).palette },
+                    semanticColors: semanticColorsCopy,
+                    components: M365Styles,
+                })
                 : copyofM365Theme;
         } catch (ex) {
             /* istanbul ignore next */
@@ -155,6 +156,8 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem
                 focusZoneProps={focusZoneProps}
                 stateAriaLabels={ariaLabelStrings}
                 steps={steps}
+                //This is required to override width styles in custom pages
+                styles={{ root: { width: props.width } }}
                 {...(wizardComplete !== 'None' && { wizardComplete: isNavCompleteOrError })}
             />
         </ThemeProvider>

SubwayNav/package-lock.json

@@ -25,7 +25,7 @@
     "@types/powerapps-component-framework": "^1.3.0",
     "@types/ramda": "^0.28.8",
     "@types/react": "^16.8",
-    "@types/react-dom": "^18.0.9",
+    "@types/react-dom": "^16.8.6",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",