Added fullWidth variant for navigation routes

frontend/src/components/layout/BackstoryLayout.tsx

@@ -1,6 +1,6 @@
 // components/layout/BackstoryLayout.tsx
 import React, { JSX, ReactElement, useEffect, useState } from 'react';
-import { Outlet, useLocation, Routes, Route } from 'react-router-dom';
+import { Outlet, useLocation, Routes, Route, matchPath } from 'react-router-dom';
 import { Box, Container, Paper } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { SxProps, Theme } from '@mui/material';
@@ -24,10 +24,12 @@ export type NavigationLinkType = {
 interface BackstoryPageContainerProps {
   children?: React.ReactNode;
   sx?: SxProps<Theme>;
+  variant?: 'normal' | 'fullWidth';
 }
 
 const BackstoryPageContainer = (props: BackstoryPageContainerProps): JSX.Element => {
-  const { children, sx } = props;
+  const { children, sx, variant = 'normal' } = props;
+  console.log({ variant });
   return (
     <Container
       className="BackstoryPageContainer"
@@ -37,7 +39,8 @@ const BackstoryPageContainer = (props: BackstoryPageContainerProps): JSX.Element
         flexGrow: 1,
         p: '0 !important',
         m: '0 auto !important',
-        maxWidth: '1024px',
+        minWidth: variant === 'normal' ? '1024px' : '100%',
+        maxWidth: variant === 'normal' ? '1024px' : '100%',
         height: '100%',
         minHeight: 0,
         ...sx,
@@ -83,6 +86,9 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
   const location = useLocation();
   const { guest, user } = useAuth();
   const [navigationItems, setNavigationItems] = useState<NavigationItem[]>([]);
+  const userType = user?.userType || null;
+  const isAdmin = user?.isAdmin ? true : false;
+  const routes = getAllRoutes(userType, isAdmin);
 
   useEffect(() => {
     const userType = user?.userType || null;
@@ -93,10 +99,6 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
   const generateRoutes = (): React.ReactNode | null => {
     if (!guest && !user) return null;
 
-    const userType = user?.userType || null;
-    const isAdmin = user?.isAdmin ? true : false;
-    const routes = getAllRoutes(userType, isAdmin);
-
     return routes
       .map((route, index) => {
         if (!route.path || !route.component) return null;
@@ -114,6 +116,31 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
       .filter(Boolean);
   };
 
+  const findMatchingRoute = (currentPath: string, routes: any[]) => {
+    for (const route of routes) {
+      if (!route.path) continue;
+
+      // Try to match the route path with the current path
+      const match = matchPath(
+        {
+          path: route.path,
+          exact: true,
+          caseSensitive: false
+        },
+        currentPath
+      );
+
+      if (match) {
+        return route;
+      }
+    }
+    return null;
+  };
+
+  // Extract 'variant' from the current route
+  const currentRouteConfig = findMatchingRoute(location.pathname, routes);
+  const variant = currentRouteConfig?.variant || 'normal';
+
   return (
     <Box
       sx={{
@@ -152,7 +179,7 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
             minWidth: 'min-content',
           }}
         >
-          <BackstoryPageContainer>
+          <BackstoryPageContainer variant={variant}>
             {!guest && !user && (
               <Box>
                 <LoadingComponent

frontend/src/config/navigationConfig.tsx

@@ -222,6 +222,7 @@ export const navigationConfig: NavigationConfig = {
       path: '/candidate/resumes/:resumeId?',
       icon: <EditDocumentIcon />,
       component: <ResumeViewer />,
+      variant: 'fullWidth',
       userTypes: ['candidate', 'guest', 'employer'],
       showInNavigation: false,
       showInUserMenu: true,

frontend/src/types/navigation.ts

@@ -8,6 +8,7 @@ export interface NavigationItem {
   children?: NavigationItem[];
   component?: ReactElement;
   userTypes?: ('candidate' | 'employer' | 'guest' | 'admin')[];
+  variant?: 'normal' | 'fullWidth';
   exact?: boolean;
   divider?: boolean;
   showInNavigation?: boolean; // Controls if item appears in main navigation