src/App.scss

@@ -100,10 +100,10 @@ li {
   // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
   // - others We don't include border and padding and scroll to the top of the image
   &:first-child {
-    scroll-margin-top: $body-vertical-padding + 20px;
+    scroll-margin-top: $header-height + $body-vertical-padding + 20px;
   }
   &:not(:first-child) {
-    scroll-margin-top: $body-vertical-padding;
+    scroll-margin-top: $header-height + $body-vertical-padding;
   }
 }
 
@@ -148,7 +148,7 @@ li {
   justify-content: start;
   align-items: start;
 
-  scroll-margin-top: $body-vertical-padding;
+  scroll-margin-top: $header-height + $body-vertical-padding;
 }
 
 [data-dev='true'] {

src/components/AppBar/AppBar.tsx

@@ -36,9 +36,6 @@ import styles from './style.module.scss'
 import { setUserRobotImage } from '../../store/userRobotImage/action'
 import { Container } from '../Container'
 import { ButtonIcon } from '../ButtonIcon'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClose } from '@fortawesome/free-solid-svg-icons'
-import useMediaQuery from '@mui/material/useMediaQuery'
 
 const metadataController = MetadataController.getInstance()
 
@@ -121,33 +118,9 @@ export const AppBar = () => {
   }
   const isAuthenticated = authState?.loggedIn === true
 
-  const matches = useMediaQuery('(max-width:767px)')
-  const [isBannerVisible, setIsBannerVisible] = useState(true)
-  const handleBannerHide = () => {
-    setIsBannerVisible(false)
-  }
-
   return (
-    <>
-      {isAuthenticated && isBannerVisible && (
-        <div className={styles.banner}>
-          <Container>
-            <div className={styles.bannerInner}>
-              SIGit is currently Alpha software (available for internal
-              testing), use at your own risk!
-              <Button
-                aria-label={`close banner`}
-                variant="text"
-                onClick={handleBannerHide}
-              >
-                <FontAwesomeIcon icon={faClose} />
-              </Button>
-            </div>
-          </Container>
-        </div>
-      )}
     <AppBarMui
-        position={matches ? 'sticky' : 'static'}
+      position="fixed"
       className={styles.AppBar}
       sx={{
         boxShadow: 'none'
@@ -265,6 +238,5 @@ export const AppBar = () => {
         </Toolbar>
       </Container>
     </AppBarMui>
-    </>
   )
 }

src/components/AppBar/style.module.scss

@@ -34,36 +34,3 @@
     justify-content: flex-end;
   }
 }
-
-.banner {
-  color: #ffffff;
-  background-color: $primary-main;
-}
-
-.bannerInner {
-  display: flex;
-  gap: 10px;
-  padding-block: 10px;
-  z-index: 1;
-
-  width: 100%;
-
-  justify-content: space-between;
-  flex-direction: row;
-
-  button {
-    min-width: 44px;
-    color: inherit;
-  }
-
-  &:hover,
-  &.active,
-  &:focus-within {
-    background: $primary-main;
-    color: inherit;
-
-    button {
-      color: inherit;
-    }
-  }
-}

src/components/PDFView/PdfPageItem.tsx

@@ -33,8 +33,7 @@ const PdfPageItem = ({
   useEffect(() => {
     if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
       markRefs.current[selectedMark.id]?.scrollIntoView({
-        behavior: 'smooth',
+        behavior: 'smooth'
-        block: 'center'
       })
     }
   }, [selectedMark])

src/layouts/StickySideColumns.module.scss

@@ -42,22 +42,15 @@
 .sides {
   @media only screen and (min-width: 768px) {
     position: sticky;
-    top: $body-vertical-padding;
+    top: $header-height + $body-vertical-padding;
   }
   > :first-child {
-    // We want to keep header on smaller devices at all times
     max-height: calc(
       100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
     );
-
-    @media only screen and (min-width: 768px) {
-      max-height: calc(100dvh - $body-vertical-padding * 2);
-    }
   }
 }
 
-// Adjust the content scroll on smaller screens
-// Make sure only the inner tab is scrolling
 .scrollAdjust {
   @media only screen and (max-width: 767px) {
     max-height: calc(

src/layouts/style.module.scss

@@ -3,5 +3,5 @@
 
 .main {
   flex-grow: 1;
-  padding: $body-vertical-padding 0 $body-vertical-padding 0;
+  padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
 }

src/pages/settings/relays/index.tsx

@@ -233,7 +233,6 @@ export const RelaysPage = () => {
           ))}
         </Box>
       )}
-      <Footer />
     </Container>
   )
 }
@@ -429,6 +428,7 @@ const RelayItem = ({
           )}
         </List>
       </Box>
+      <Footer />
     </>
   )
 }