Update page styling for back/forward buttons

src/components/layout/Layout.tsx

@@ -94,9 +94,15 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
         }}
       >
         <MainContainer id="container-main" expanded={misc.expandSidebar}>
-          <FlexboxGrid justify="space-between" style={{ padding: '10px 10px 0px 10px' }}>
+          <FlexboxGrid
+            justify="space-between"
+            style={{
+              padding: '0 10px 0 10px',
+              margin: '10px 5px 5px 5px',
+            }}
+          >
             <FlexboxGrid.Item>
-              <ButtonToolbar style={{ height: '20px' }}>
+              <ButtonToolbar>
                 <StyledIconButton
                   appearance="subtle"
                   size="sm"

src/components/layout/styled.tsx

@@ -149,7 +149,7 @@ export const PageContainer = styled(Container)<{ $backgroundSrc?: string }>`
 `;
 
 export const PageHeader = styled(Header)<{ padding?: string }>`
-  padding: ${(props) => (props.padding ? props.padding : '10px 20px 0px 20px')};
+  padding: ${(props) => (props.padding ? props.padding : '0px 20px 0px 20px')};
   z-index: 1;
 `;