first working version

src/App.tsx

@@ -41,11 +41,13 @@ export const App = (): JSX.Element => {
                     <PageRouter />
                   </div>
                 ) : (
+                  <>
                     <Dashboard />
+                    <Footer />
+                  </>
                 )}
               </div>
             </div>
-            <Footer />
           </div>
         </DeviceWrapper>
       </MapProvider>

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -68,7 +68,7 @@ export const ChannelChat = ({
           )}
         </div>
       </div>
-      <div className="p-3">
+      <div className="pl-3 pr-3 pt-3 pb-1">
         <MessageInput to={to} channel={channel} />
       </div>
     </div>

src/components/UI/Footer.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
-export interface FooterProps
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
-  extends React.HTMLAttributes<HTMLElement> {}
 
 const Footer = React.forwardRef<HTMLElement, FooterProps>(
   ({ className, ...props }, ref) => {
     return (
       <footer
-      className={`flex flex- justify-center pl-2 pr-2 pb-2 ${className}`}
+        className={`flex flex- justify-center p-2 ${className}`}
         style={{
           backgroundColor: "var(--backgroundPrimary)",
           color: "var(--textPrimary)",
@@ -21,8 +20,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
           >
             Powered by ▲ Vercel
           </a>{" "}
-        | Meshtastic® is a registered trademark of Meshtastic LLC. |
+          | Meshtastic® is a registered trademark of Meshtastic LLC. |{" "}
-        {" "}
           <a
             href="https://meshtastic.org/docs/legal"
             className="hover:underline"
@@ -33,6 +31,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
         </p>
       </footer>
     );
-});
+  },
+);
 
 export default Footer;

src/components/UI/Tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
+      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 mt-2 dark:bg-slate-800",
       className,
     )}
     {...props}

src/pages/Dashboard/index.tsx

@@ -21,6 +21,7 @@ export const Dashboard = () => {
   const devices = useMemo(() => getDevices(), [getDevices]);
 
   return (
+    <>
       <div className="flex flex-col gap-3 p-3">
         <div className="flex items-center justify-between">
           <div className="space-y-1">
@@ -95,5 +96,6 @@ export const Dashboard = () => {
           )}
         </div>
       </div>
+    </>
   );
 };

src/pages/Map.tsx

@@ -87,6 +87,7 @@ export const MapPage = (): JSX.Element => {
           ))}
         </SidebarSection>
       </Sidebar>
+      <div className="flex flex-col flex-grow">
         <PageLayout
           label="Map"
           noPadding={true}
@@ -189,6 +190,7 @@ export const MapPage = (): JSX.Element => {
             })}
           </MapGl>
         </PageLayout>
+      </div>
     </>
   );
 };

src/pages/Messages.tsx

@@ -67,6 +67,7 @@ export const MessagesPage = (): JSX.Element => {
           ))}
         </SidebarSection>
       </Sidebar>
+      <div className="flex flex-col flex-grow">
         <PageLayout
           label={`Messages: ${
             chatType === "broadcast" && currentChannel
@@ -121,6 +122,7 @@ export const MessagesPage = (): JSX.Element => {
               ),
           )}
         </PageLayout>
+      </div>
     </>
   );
 };

src/pages/Nodes.tsx

@@ -1,3 +1,4 @@
+import Footer from "@app/components/UI/Footer";
 import { useAppStore } from "@app/core/stores/appStore";
 import { Sidebar } from "@components/Sidebar.js";
 import { Button } from "@components/UI/Button.js";
@@ -27,7 +28,8 @@ export const NodesPage = (): JSX.Element => {
   return (
     <>
       <Sidebar />
-      <div className="w-full overflow-y-auto">
+      <div className="flex flex-col w-full">
+        <div className="overflow-y-auto h-full">
           <Table
             headings={[
               { title: "", type: "blank", sortable: false },
@@ -95,6 +97,8 @@ export const NodesPage = (): JSX.Element => {
             ])}
           />
         </div>
+        <Footer />
+      </div>
     </>
   );
 };