diff --git a/scm-ui/ui-components/src/navigation/Section.tsx b/scm-ui/ui-components/src/navigation/Section.tsx
index 2214b974c5..c4af45e203 100644
--- a/scm-ui/ui-components/src/navigation/Section.tsx
+++ b/scm-ui/ui-components/src/navigation/Section.tsx
@@ -1,33 +1,33 @@
-import React, {FC, ReactChild, useEffect, useState} from "react";
+import React, { FC, ReactElement, useEffect, useState } from "react";
 import { Button } from "../buttons";
 import styled from "styled-components";
 
 type Props = {
   label: string;
-  children?: ReactChild;
+  children: ReactElement[];
   collapsed?: boolean;
   onCollapse?: (newStatus: boolean) => void;
 };
 
+type StylingProps = {
+  scrollPositionY: number;
+  collapsed: boolean;
+};
 
 const SectionContainer = styled.div`
-// @ts-ignore
-  position: ${props => (props.scrollPositionY > 210 ? "fixed" : "absolute")};
-  // @ts-ignore
-  top: ${props => props.scrollPositionY > 210 && "4.5rem"};
-  // @ts-ignore
-  width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
+  position: ${(props: StylingProps) => (props.scrollPositionY > 210 && window.innerWidth > 770 ? "fixed" : "inherit")};
+  top: ${(props: StylingProps) => props.scrollPositionY > 210 && window.innerWidth > 770 && "4.5rem"};
+  width: ${(props: StylingProps) => (props.collapsed ? "5.5rem" : "20.5rem")};
 `;
 
 const SmallButton = styled(Button)`
   height: 1.5rem;
-  width: 1rem;
-  position: absolute;
-  right: 1.5rem;
 `;
 
 const MenuLabel = styled.p`
   min-height: 2.5rem;
+  display: flex;
+  justify-content: ${(props: StylingProps) => (props.collapsed ? "center" : "space-between")};
 `;
 
 const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
@@ -41,14 +41,14 @@ const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
     };
   }, []);
 
-  // @ts-ignore
-  const childrenWithProps = React.Children.map(children, (child: ReactChild) => React.cloneElement(child, { collapsed: collapsed }));
+  const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
+    React.cloneElement(child, { collapsed: collapsed })
+  );
   const arrowIcon = collapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
 
   return (
-    // @ts-ignore
-    <SectionContainer collapsed={onCollapse && collapsed} scrollPositionY={onCollapse && scrollPositionY}>
-      <MenuLabel className="menu-label">
+    <SectionContainer collapsed={collapsed ? collapsed : false} scrollPositionY={onCollapse ? scrollPositionY : 0}>
+      <MenuLabel className="menu-label" collapsed={collapsed}>
         {collapsed ? "" : label}
         {onCollapse && (
           <SmallButton color="info" className="is-small" action={() => onCollapse(!collapsed)}>