update ProjectPage Layout

client/src/components/FileCollection.tsx

@@ -28,7 +28,6 @@ const useStyles = makeStyles((theme: Theme) =>
 export const FileCollection: FC<IProps> = ({ files, filterText }) => {
   const classes = useStyles();
   return (
-
     <List className={classes.root}>
         {files.length === 0 ? (
           <FileEntry />
@@ -42,7 +41,6 @@ export const FileCollection: FC<IProps> = ({ files, filterText }) => {
             .map((file: AppFile) => <FileEntry file={file} key={file.id} />)
         )}
       </List>
-
   );
 };
 

client/src/pages/ProjectPage.tsx

@@ -3,16 +3,22 @@ import ProjectVM from "../VM/ProjectVM";
 import { Header } from "../components/Header";
 import { AvatarList } from "../components/AvatarList";
 import { ProgressBar } from "../components/ProgressBar";
-import { TabRouter } from "../components/TabRouter";
 import { FloatingButton } from "../components/FloatingButton";
 import { UsersModal } from "../components/UsersModal";
-import { Container, Grid } from "@material-ui/core";
+import { Container, Grid, makeStyles, Theme } from "@material-ui/core";
 import { ProjectTabPanel } from "../components/ProjectTabPanel";
 
 interface IProps {
   viewModel: ProjectVM;
 }
 
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    margin: theme.spacing(1),
+    flexGrow: 1
+  }
+}));
+
 export const ProjectPage: FC<IProps> = ({ viewModel }) => {
   const {
     // id,
@@ -33,9 +39,13 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
   const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"];
   const [showModal, setShowModal] = useState<boolean>(false);
 
+  const classes = useStyles();
+
   return (
     <Container maxWidth="md">
-      <Header title={title} description={description} />
+      <div className={classes.root}>
+        <Header title={title} description={description} />
+      </div>
       <UsersModal
         show={showModal}
         users={users}
@@ -57,13 +67,14 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
         </Grid>
       </Grid>
 
-      <ProgressBar
-        value={progression}
-        tasksDone={ticketsDone}
-        tasksTotalCount={ticketsTotalCount}
-        remainingDays={remainingDays}
-      />
-
+      <div className={classes.root}>
+        <ProgressBar
+          value={progression}
+          tasksDone={ticketsDone}
+          tasksTotalCount={ticketsTotalCount}
+          remainingDays={remainingDays}
+        />
+      </div>
       <ProjectTabPanel
         tabNames={tabNames}
         tickets={tickets}