From 2e83312dc474ef38429a9da8b71661b9a2df3929 Mon Sep 17 00:00:00 2001
From: Manuel Wedler <manuel@wedler.dev>
Date: Thu, 19 Sep 2024 11:13:15 +0200
Subject: [PATCH] Fix NavMenu for smaller screens

---
 apps/contract-verification/src/app/App.css                | 4 ++++
 apps/contract-verification/src/app/components/NavMenu.tsx | 4 ++--
 apps/contract-verification/src/app/layouts/Default.tsx    | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/contract-verification/src/app/App.css b/apps/contract-verification/src/app/App.css
index f062f4c39a..0ff37a0e7e 100644
--- a/apps/contract-verification/src/app/App.css
+++ b/apps/contract-verification/src/app/App.css
@@ -1,3 +1,7 @@
+html, body, #root {
+  height: 100%;
+}
+
 body {
   margin: 0;
 }
diff --git a/apps/contract-verification/src/app/components/NavMenu.tsx b/apps/contract-verification/src/app/components/NavMenu.tsx
index b8b99ab930..2b3b6d0976 100644
--- a/apps/contract-verification/src/app/components/NavMenu.tsx
+++ b/apps/contract-verification/src/app/components/NavMenu.tsx
@@ -9,7 +9,7 @@ interface NavItemProps {
 
 const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   return (
-    <NavLink to={to} className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center px-2 ' + (isActive ? 'bg-light' : 'bg-transparent')}>
+    <NavLink to={to} className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center p-2 small ' + (isActive ? 'bg-light' : 'bg-transparent')}>
       <span>
         <span>{icon}</span>
         <span className="ml-2">{title}</span>
@@ -20,7 +20,7 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
 
 export const NavMenu = () => {
   return (
-    <nav className="d-flex flex-row justify-start fixed-top w-100" style={{ height: '40px' }}>
+    <nav className="d-flex flex-row justify-start w-100">
       <NavItem to="/" icon={<i className="fas fa-home"></i>} title="Verify" />
       <NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title="Receipts" />
       <NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" />
diff --git a/apps/contract-verification/src/app/layouts/Default.tsx b/apps/contract-verification/src/app/layouts/Default.tsx
index 87c715e5ac..2f50c748a0 100644
--- a/apps/contract-verification/src/app/layouts/Default.tsx
+++ b/apps/contract-verification/src/app/layouts/Default.tsx
@@ -10,9 +10,9 @@ interface Props {
 
 export const DefaultLayout = ({ children, title, description }: PropsWithChildren<Props>) => {
   return (
-    <div>
+    <div className="d-flex flex-column h-100">
       <NavMenu />
-      <div className="py-4 px-3" style={{ marginTop: '40px' }}>
+      <div className="py-4 px-3 flex-grow-1" style={{ overflowY: 'auto' }}>
         <div>
           <p className="text-center" style={{ fontSize: '0.8rem' }}>
             {description}