✨ Unify version footer, fix overlaying on small screens and long pages

frontend/src/common/version.tsx

@@ -41,14 +41,12 @@ export function Version({ className = '' }: { className?: string }) {
   const lastCommit = version?.lastCommit;
 
   return (
-    <div className={clsx('mb-10')}>
+    <div className={clsx('mt-5')}>
       <div
         className={clsx(
-          'absolute bottom-0 ',
-          'h-10 text-xs',
+          'text-xs',
           'opacity-70 hover:opacity-100 duration-400 transition-all',
           'w-full text-center',
-          'left-1/2 -translate-x-1/2',
           className,
         )}
       >

frontend/src/components/app.tsx

@@ -1,7 +1,39 @@
-import { primitiveWithClassname } from '../styled';
+import clsx from 'clsx';
+import { Version } from '../common/version';
 
-export const AppContainer = primitiveWithClassname('div', 'max-w-screen-xl p-6 mx-auto');
-export const AppCenter = primitiveWithClassname(
-  'div',
-  'h-screen p-6 flex items-center justify-center',
-);
+export function AppContainer({
+  children,
+  className,
+  versionClassName = '',
+  ...props
+}: JSX.IntrinsicElements['div'] & { versionClassName?: string }) {
+  return (
+    <div
+      {...props}
+      className={clsx('min-h-screen max-w-screen-xl p-6 mx-auto flex flex-col', className)}
+    >
+      <div className="flex-1">{children}</div>
+      <Version className={versionClassName} />
+    </div>
+  );
+}
+
+export function AppCenter({
+  children,
+  className,
+  versionClassName = '',
+  ...props
+}: JSX.IntrinsicElements['div'] & { versionClassName?: string }) {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        'min-h-screen h-min p-6 flex flex-col items-center justify-center ',
+        className,
+      )}
+    >
+      <div className="flex-1 flex items-center align-middle justify-center">{children}</div>
+      <Version className={versionClassName} />
+    </div>
+  );
+}

frontend/src/editor/player.tsx

@@ -184,8 +184,6 @@ export function PlayerBar({ documentId, editor }: { documentId: string; editor:
 
         <PlaybackSpeedDropdown value={playbackRate} onChange={setPlaybackRate} />
       </div>
-
-      <div className="pb-24" />
     </>
   );
 }

frontend/src/pages/document.tsx

@@ -15,7 +15,6 @@ import { useAutomergeWebsocketEditor } from '../editor/automerge_websocket_edito
 import { WebvttExportModal } from '../editor/webvtt_export';
 import { showModal } from '../components/modal';
 import { Tooltip } from '../components/tooltip';
-import { Version } from '../common/version';
 import { Input } from '../components/form';
 import { BiPencil } from 'react-icons/bi';
 import { SubmitHandler, useForm } from 'react-hook-form';
@@ -150,7 +149,7 @@ export function DocumentPage({
   const canGenVtt = useMemo(() => canGenerateVtt(editor.doc.children), [editor.doc]);
 
   return (
-    <AppContainer className="relative min-h-screen">
+    <AppContainer className="relative min-h-screen" versionClassName="mb-16">
       <Helmet>
         <title>{data?.name}</title>
       </Helmet>
@@ -213,8 +212,6 @@ export function DocumentPage({
       />
 
       <Suspense>{debugMode && <LazyDebugPanel editor={editor} />}</Suspense>
-
-      <Version className="bottom-16" />
     </AppContainer>
   );
 }

frontend/src/pages/loading.tsx

@@ -1,5 +1,4 @@
 import { AppCenter } from '../components/app';
-import { Version } from '../common/version';
 
 export function LoadingPage() {
   return (
@@ -8,7 +7,6 @@ export function LoadingPage() {
         <h1 className="font-medium text-4xl">Loading...</h1>
         <p>Transcribee is currently loading...</p>
       </div>
-      <Version />
     </AppCenter>
   );
 }

frontend/src/pages/login.tsx

@@ -8,7 +8,6 @@ import { Dialog, DialogTitle } from '../components/dialog';
 import { FormControl, Input } from '../components/form';
 import { PrimaryButton } from '../components/button';
 import { AppCenter } from '../components/app';
-import { Version } from '../common/version';
 
 type FieldValues = {
   username: string;
@@ -80,8 +79,6 @@ export function LoginPage() {
           </div>
         </form>
       </Dialog>
-
-      <Version />
     </AppCenter>
   );
 }

frontend/src/pages/new_document.tsx

@@ -8,7 +8,6 @@ import { Dialog, DialogTitle } from '../components/dialog';
 import { FormControl, Input, Select } from '../components/form';
 import { LoadingSpinnerButton, SecondaryButton } from '../components/button';
 import { AppCenter } from '../components/app';
-import { Version } from '../common/version';
 import { useGetConfig } from '../api/config';
 
 type FieldValues = {
@@ -327,8 +326,6 @@ export function NewDocumentPage() {
           </div>
         </form>
       </Dialog>
-
-      <Version />
     </AppCenter>
   );
 }

frontend/src/pages/page_not_found.tsx

@@ -1,7 +1,6 @@
 import { useLocation } from 'wouter';
 import { AppCenter } from '../components/app';
 import { PrimaryButton } from '../components/button';
-import { Version } from '../common/version';
 
 export function PageNotFoundPage() {
   const [_, navigate] = useLocation();
@@ -12,7 +11,6 @@ export function PageNotFoundPage() {
         <p>We couldn&apos;t find what you were looking for.</p>
         <PrimaryButton onClick={() => navigate('/')}>Go to Home</PrimaryButton>
       </div>
-      <Version />
     </AppCenter>
   );
 }

frontend/src/pages/user_home.tsx

@@ -7,7 +7,6 @@ import { AppContainer } from '../components/app';
 import { AiOutlinePlus } from 'react-icons/ai';
 import { IoMdTrash } from 'react-icons/io';
 import { IconButton } from '../components/button';
-import { Version } from '../common/version';
 import { WorkerStatusWithData } from '../editor/worker_status';
 import { useEffect, useState } from 'react';
 
@@ -147,8 +146,6 @@ export function UserHomePage() {
           </Link>
         </li>
       </ul>
-
-      <Version />
     </AppContainer>
   );
 }