Set minimum page height

src/app/(auth-state)/layout.tsx

@@ -1,4 +1,5 @@
 import FooterAuth from '@/components/FooterAuth';
+import PageContentContainer from '@/components/PageContentContainer';
 import { SessionProvider } from 'next-auth/react';
 
 export default function RootLayout({
@@ -8,10 +9,10 @@ export default function RootLayout({
 }) {
   return (
     <SessionProvider>
-      {children}
-      <div className="my-8">
-        <FooterAuth />
-      </div>
+      <PageContentContainer>
+        {children}
+      </PageContentContainer>
+      <FooterAuth />
     </SessionProvider>
   );
 }

src/app/(static)/layout.tsx

@@ -1,4 +1,5 @@
 import FooterStatic from '@/components/FooterStatic';
+import PageContentContainer from '@/components/PageContentContainer';
 
 export default function RootLayout({
   children,
@@ -7,7 +8,9 @@ export default function RootLayout({
 }) {
   return (
     <>
-      {children}
+      <PageContentContainer>
+        {children}
+      </PageContentContainer>
       <FooterStatic />
     </>
   );

src/components/FooterAuth.tsx

@@ -24,6 +24,7 @@ export default function FooterAuth() {
     <SiteGrid
       contentMain={<div className={cc(
         'flex items-center',
+        'my-8',
         'text-gray-400 dark:text-gray-500',
       )}>
         <div className="flex gap-x-4 gap-y-1 flex-wrap flex-grow">

src/components/PageContentContainer.tsx

@@ -0,0 +1,11 @@
+export default function PageContentContainer({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="min-h-[16rem] sm:min-h-[30rem]">
+      {children}
+    </div>
+  );
+}

src/photo/PhotosEmptyState.tsx

@@ -29,7 +29,7 @@ export default function PhotosEmptyState() {
                 {' '}
                 <Link
                   href="/admin"
-                  className="underline hover:no-underline"
+                  className="hover:text-gray-800 hover:dark:text-gray-100"
                 >
                   /admin
                 </Link>