Make scroll relative to whole page, rather than content box

ui/package.json

@@ -101,8 +101,8 @@
   },
   "jest": {
     "testMatch": [
-      "**/__tests__/**/*.+(ts|tsx|js)",
-      "**/?(*.)+(spec|test).+(ts|tsx|js)"
+      "**/__tests__/**/*.+(ts|tsx|js|jsx)",
+      "**/?(*.)+(spec|test).+(ts|tsx|js|jsx)"
     ],
     "transformIgnorePatterns": [
       "^.+\\.css$"

ui/src/@types/index.d.ts

@@ -1,7 +1,7 @@
 declare module '*.svg' {
   const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
-  const content: string
+  // const content: string
 
   export { ReactComponent }
-  export default content
+  // export default content
 }

ui/src/Pages/AllAlbumsPage/AlbumsPage.tsx

@@ -3,7 +3,6 @@ import AlbumBoxes from '../../components/albumGallery/AlbumBoxes'
 import Layout from '../../components/layout/Layout'
 import { useQuery, gql } from '@apollo/client'
 import LazyLoad from '../../helpers/LazyLoad'
-import { useTranslation } from 'react-i18next'
 import { getMyAlbums } from './__generated__/getMyAlbums'
 
 const getAlbumsQuery = gql`

ui/src/Pages/LoginPage/LoginPage.tsx

@@ -100,6 +100,7 @@ const LoginForm = () => {
       />
       <input
         type="submit"
+        disabled={loading}
         value={t('login_page.field.submit', 'Sign in') as string}
         className="rounded-md px-8 py-2 focus:outline-none hover:cursor-pointer bg-gradient-to-bl from-[#FF8246] to-[#D6264D] text-white font-semibold focus:ring-2 focus:ring-red-200"
       />

ui/src/components/header/Header.tsx

@@ -5,7 +5,7 @@ import logoPath from '../../assets/photoview-logo.svg'
 import { authToken } from '../../helpers/authentication'
 
 const Header = () => (
-  <div className="bg-white flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none">
+  <div className="sticky top-0 z-10 bg-white flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none">
     <h1 className="mr-4 lg:mr-8 flex-shrink-0 flex items-center">
       <img className="h-12 lg:h-10" src={logoPath} alt="logo" />
       <span className="hidden lg:block ml-2 text-2xl font-light">

ui/src/components/header/Searchbar.tsx

@@ -11,14 +11,6 @@ import {
   searchQuery_search_media,
 } from './__generated__/searchQuery'
 
-const Container = styled.div`
-  height: 60px;
-  width: 350px;
-  margin: 0 12px;
-  padding: 12px 0;
-  position: relative;
-`
-
 const SearchField = styled.input`
   height: 100%;
   width: 100%;

ui/src/components/layout/Layout.tsx

@@ -26,18 +26,14 @@ const Layout = ({ children, title, ...otherProps }: LayoutProps) => {
       <Helmet>
         <title>{title ? `${title} - Photoview` : `Photoview`}</title>
       </Helmet>
-      <div
-        className="h-full flex flex-col overflow-hidden relative"
-        {...otherProps}
-        data-testid="Layout"
-      >
+      <div className="relative" {...otherProps} data-testid="Layout">
         <Header />
-        <div className="lg:flex">
+        <div className="">
           <Authorized>
             <MainMenu />
           </Authorized>
           <div
-            className="px-3 py-3 w-full overflow-y-scroll h-screen flex-grow lg:pt-5 lg:pr-8"
+            className="px-3 py-3 lg:pt-5 lg:pr-8 lg:pl-[292px]"
             id="layout-content"
           >
             {children}

ui/src/components/layout/MainMenu.tsx

@@ -60,8 +60,8 @@ export const MainMenu = () => {
   const mapboxEnabled = !!mapboxQuery?.data?.mapboxToken
 
   return (
-    <div className="absolute lg:relative w-full bottom-0 z-10 bg-white shadow-separator lg:shadow-none lg:w-[240px] lg:ml-8 lg:mr-5 lg:my-4">
-      <ul className="flex justify-around py-2 px-2 z-10 max-w-lg mx-auto lg:flex-col lg:p-0">
+    <div className="fixed w-full bottom-0 lg:bottom-auto lg:top-[84px] z-30 bg-white shadow-separator lg:shadow-none lg:w-[240px] lg:ml-8 lg:mr-5 flex-shrink-0">
+      <ul className="flex justify-around py-2 px-2 max-w-lg mx-auto lg:flex-col lg:p-0">
         <MenuButton
           to="/photos"
           exact

ui/src/components/photoGallery/MediaThumbnail.tsx

@@ -160,7 +160,7 @@ export const MediaThumbnail = ({
     >
       <div
         style={{
-          minWidth: `${minWidth}px`,
+          minWidth: `min(${minWidth}px, 100%)`,
           height: `200px`,
         }}
       >

ui/src/components/photoGallery/PhotoGallery.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect } from 'react'
 import styled from 'styled-components'
 import { MediaThumbnail, MediaPlaceholder } from './MediaThumbnail'
 import PresentView from './presentView/PresentView'
-import { useTranslation } from 'react-i18next'
 import { PresentMediaProps_Media } from './presentView/PresentMedia'
 import { sidebarPhoto_media_thumbnail } from '../sidebar/__generated__/sidebarPhoto'
 import {
@@ -47,13 +46,7 @@ type PhotoGalleryProps = {
   dispatchMedia: React.Dispatch<PhotoGalleryAction>
 }
 
-const PhotoGallery = ({
-  mediaState,
-  loading,
-  dispatchMedia,
-}: PhotoGalleryProps) => {
-  const { t } = useTranslation()
-
+const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
   const [markFavorite] = useMarkFavoriteMutation()
 
   const { media, activeIndex, presenting } = mediaState

ui/src/components/timelineGallery/TimelineGallery.tsx

@@ -2,7 +2,6 @@ import React, { useRef, useEffect, useReducer, useContext } from 'react'
 import PropTypes from 'prop-types'
 import { useQuery, gql } from '@apollo/client'
 import TimelineGroupDate from './TimelineGroupDate'
-import styled from 'styled-components'
 import PresentView from '../photoGallery/presentView/PresentView'
 import useURLParameters from '../../hooks/useURLParameters'
 import { FavoritesCheckbox } from '../album/AlbumFilter'
@@ -58,13 +57,6 @@ const MY_TIMELINE_QUERY = gql`
   }
 `
 
-const GalleryWrapper = styled.div`
-  margin: -12px;
-  display: flex;
-  flex-wrap: wrap;
-  overflow-x: hidden;
-`
-
 export type TimelineActiveIndex = {
   albumGroup: number
   media: number
@@ -178,10 +170,7 @@ const TimelineGallery = () => {
           setOnlyFavorites={setOnlyFavorites}
         />
       </div>
-      <div
-        className="-mx-3 flex flex-wrap overflow-x-hidden"
-        ref={containerElem}
-      >
+      <div className="-mx-3 flex flex-wrap" ref={containerElem}>
         {timelineGroups}
       </div>
       <PaginateLoader

ui/src/components/timelineGallery/TimelineGroupAlbum.tsx

@@ -13,37 +13,6 @@ import {
   TimelineGalleryState,
 } from './timelineGalleryReducer'
 
-const MediaWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  height: 210px;
-  position: relative;
-  margin: -4px;
-  padding-right: 16px;
-
-  overflow: hidden;
-
-  @media (max-width: 1000px) {
-    /* Compensate for tab bar on mobile */
-    margin-bottom: 76px;
-  }
-`
-
-const AlbumTitle = styled.h2`
-  font-size: 1.25rem;
-  font-weight: 200;
-  margin: 0 0 4px;
-
-  & a:not(:hover) {
-    color: #212121;
-  }
-`
-
-const GroupAlbumWrapper = styled.div`
-  margin: 12px 8px 0;
-`
-
 const TotalItemsBubble = styled(Link)`
   position: absolute;
   top: 24px;
@@ -134,7 +103,7 @@ const TimelineGroupAlbum = ({
       <Link to={`/album/${album.id}`} className="hover:underline">
         {album.title}
       </Link>
-      <div className="flex flex-wrap items-center h-[210px] relative -mx-1 pr-4 overflow-hidden">
+      <div className="flex flex-wrap items-center min-h-[210px] relative -mx-1 pr-4">
         {mediaElms}
         {itemsBubble}
       </div>

ui/src/components/timelineGallery/TimelineGroupDate.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import TimelineGroupAlbum from './TimelineGroupAlbum'
-import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
   TimelineGalleryAction,
@@ -12,20 +11,6 @@ const dateFormatterOptions: Intl.DateTimeFormatOptions = {
   month: 'long',
   day: 'numeric',
 }
-const GroupDateWrapper = styled.div`
-  margin: 12px 12px;
-`
-
-const DateTitle = styled.h1`
-  font-size: 1.5rem;
-  margin: 0 0 -12px;
-`
-
-const GroupAlbumWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -8px;
-`
 
 type TimelineGroupDateProps = {
   groupIndex: number
@@ -62,7 +47,7 @@ const TimelineGroupDate = ({
   return (
     <div className="mx-3 mb-2">
       <div className="text-xl m-0 -mb-2">{formattedDate}</div>
-      <div className="flex wrap -mx-2 my-0">{albumGroupElms}</div>
+      <div className="flex flex-wrap -mx-2 my-0">{albumGroupElms}</div>
     </div>
   )
 }

ui/src/hooks/useDelay.ts

@@ -2,7 +2,7 @@ import { useLayoutEffect, useState, useRef } from 'react'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useDelay(wait: number, deps: any[] = []) {
-  const [_, triggerUpdate] = useState(false)
+  const triggerUpdate = useState(false)[1]
   const done = useRef(false)
 
   useLayoutEffect(() => {

ui/src/index.css

@@ -6,7 +6,7 @@
 #root,
 body,
 html {
-  height: 100%;
+  /* height: 100%; */
   margin: 0;
   font-size: inherit;
   font-family: 'Source Sans Pro', sans-serif;

ui/src/main.tsx

@@ -1,4 +1,4 @@
-// import 'regenerator-runtime/runtime'
+import 'regenerator-runtime/runtime'
 
 import React from 'react'
 import ReactDOM from 'react-dom'