diff --git a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
index 93cc060d41..4ac25ad5c7 100644
--- a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
+++ b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
@@ -22,9 +22,25 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
+import styled from "styled-components";
+import { useSecondaryNavigation } from "../useSecondaryNavigation";
+
+const PrimaryColumn = styled.div<{ collapsed: boolean }>`
+  width: ${(props: { collapsed: boolean }) => (props.collapsed ? "89.7%" : "75%")};
+  /* Render this column to full size if column construct breaks (page size too small). */
+  @media (max-width: 785px) {
+    width: 100%;
+  }
+`;
 
 const PrimaryContentColumn: FC = ({ children }) => {
-  return <div className="column is-10">{children}</div>;
+  const { collapsed } = useSecondaryNavigation();
+
+  return (
+    <PrimaryColumn className="column" collapsed={collapsed}>
+      {children}
+    </PrimaryColumn>
+  );
 };
 
 export default PrimaryContentColumn;
diff --git a/scm-ui/ui-components/src/navigation/useActiveMatch.ts b/scm-ui/ui-components/src/navigation/useActiveMatch.ts
index 4b879bc55e..eb1540f95b 100644
--- a/scm-ui/ui-components/src/navigation/useActiveMatch.ts
+++ b/scm-ui/ui-components/src/navigation/useActiveMatch.ts
@@ -35,15 +35,16 @@ const useActiveMatch = ({ to, activeOnlyWhenExact, activeWhenMatch }: RoutingPro
 
   const match = useRouteMatch({
     path: urls.escapeUrlForRoute(path),
-    exact: activeOnlyWhenExact
+    exact: activeOnlyWhenExact,
   });
 
   const location = useLocation();
 
   const isActiveWhenMatch = () => {
     if (activeWhenMatch) {
-      return activeWhenMatch({
-        location
+      // noinspection PointlessBooleanExpressionJS could be a truthy value if a function is passed in
+      return !!activeWhenMatch({
+        location,
       });
     }
     return false;