Fix main page scrollbar and socket status position

client/src/components/Projects/Projects.jsx

@@ -21,40 +21,38 @@ const Projects = React.memo(({
     return (
       <Container className={styles.cardsWrapper}>
         <Grid className={styles.gridFix}>
-          <Grid.Row>
-            {items.map((item) => (
-              <Grid.Column key={item.id} mobile={8} computer={4}>
-                <Link
-                  to={
-                    item.firstBoardId
-                      ? Paths.BOARDS.replace(':id', item.firstBoardId)
-                      : Paths.PROJECTS.replace(':id', item.id)
-                  }
-                >
-                  <div className={classNames(styles.card, styles.open)}>
-                    <div className={styles.cardOverlay} />
-                    <div className={styles.openTitle}>{item.name}</div>
+          {items.map((item) => (
+            <Grid.Column key={item.id} mobile={8} computer={4}>
+              <Link
+                to={
+                  item.firstBoardId
+                    ? Paths.BOARDS.replace(':id', item.firstBoardId)
+                    : Paths.PROJECTS.replace(':id', item.id)
+                }
+              >
+                <div className={classNames(styles.card, styles.open)}>
+                  <div className={styles.cardOverlay} />
+                  <div className={styles.openTitle}>{item.name}</div>
+                </div>
+              </Link>
+            </Grid.Column>
+          ))}
+          {isEditable && (
+            <Grid.Column mobile={8} computer={4}>
+              <button
+                type="button"
+                className={classNames(styles.card, styles.add)}
+                onClick={onAdd}
+              >
+                <div className={styles.addTitleWrapper}>
+                  <div className={styles.addTitle}>
+                    <PlusIcon className={styles.addGridIcon} />
+                    {t('action.createProject')}
                   </div>
-                </Link>
-              </Grid.Column>
-            ))}
-            {isEditable && (
-              <Grid.Column mobile={8} computer={4}>
-                <button
-                  type="button"
-                  className={classNames(styles.card, styles.add)}
-                  onClick={onAdd}
-                >
-                  <div className={styles.addTitleWrapper}>
-                    <div className={styles.addTitle}>
-                      <PlusIcon className={styles.addGridIcon} />
-                      {t('action.createProject')}
-                    </div>
-                  </div>
-                </button>
-              </Grid.Column>
-            )}
-          </Grid.Row>
+                </div>
+              </button>
+            </Grid.Column>
+          )}
         </Grid>
       </Container>
     );

client/src/components/Projects/Projects.module.css

@@ -36,7 +36,6 @@
 .card {
   border-radius: 4px;
   height: 150px;
-  margin-bottom: 24px;
   transition: all 200ms ease !important;
 }
 
@@ -53,7 +52,6 @@
 .cardsWrapper {
   flex: 1 1 auto;
   max-height: 100%;
-  overflow: auto;
 }
 
 .gridFix {

client/src/components/SocketStatus/SocketStatus.module.css

@@ -28,7 +28,7 @@
   bottom: 20px;
   box-shadow: #b04632 0 1px 0;
   padding: 12px 18px;
-  position: absolute;
+  position: fixed;
   right: 20px;
   width: 390px;
   z-index: 10001;