Fix NavMenu for smaller screens

Author: manuelwedler

apps/contract-verification/src/app/App.css

@@ -1,3 +1,7 @@
+html, body, #root {
+  height: 100%;
+}
+
 body {
   margin: 0;
 }

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" />

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}