fix page scroll behaviour

package.json

@@ -25,18 +25,19 @@
     "@meshtastic/meshtasticjs": "2.0.20-5",
     "@preact/signals-react": "^1.2.2",
     "@radix-ui/react-accordion": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.0.1",
+    "@radix-ui/react-checkbox": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.0.3",
     "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-menubar": "^1.0.0",
+    "@radix-ui/react-menubar": "^1.0.1",
-    "@radix-ui/react-popover": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.4",
+    "@radix-ui/react-scroll-area": "^1.0.2",
     "@radix-ui/react-select": "^1.2.0",
     "@radix-ui/react-separator": "^1.0.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.4",
     "@tailwindcss/typography": "^0.5.9",
     "@turf/turf": "^6.5.0",
     "base64-js": "^1.5.1",
@@ -52,26 +53,26 @@
     "maplibre-gl": "2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.1",
+    "react-hook-form": "^7.43.2",
     "react-map-gl": "^7.0.21",
     "react-qrcode-logo": "^2.8.0",
     "rfc4648": "^1.5.2",
-    "tailwind-merge": "^1.9.1",
+    "tailwind-merge": "^1.10.0",
     "tailwindcss-animate": "^1.0.5",
     "timeago-react": "^3.0.5",
     "zustand": "4.3.3"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
-    "@types/chrome": "^0.0.216",
+    "@types/chrome": "^0.0.217",
     "@types/geodesy": "^2.2.3",
-    "@types/node": "^18.14.0",
+    "@types/node": "^18.14.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/w3c-web-serial": "^1.0.3",
     "@types/web-bluetooth": "^0.0.16",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.34.0",
@@ -89,7 +90,7 @@
     "tar": "^6.1.13",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5",
-    "vite": "^4.1.2",
+    "vite": "^4.1.4",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-pwa": "^0.14.4"
   }

src/App.tsx

@@ -29,12 +29,12 @@ export const App = (): JSX.Element => {
       <Toaster />
       <MapProvider>
         <DeviceWrapper device={device}>
-          <div className="flex min-h-screen flex-col bg-backgroundPrimary text-textPrimary">
+          <div className="flex flex-col overflow-hidden bg-backgroundPrimary text-textPrimary">
             <div className="flex flex-grow">
               <DeviceSelector />
               <div className="flex flex-grow flex-col">
                 {device ? (
-                  <div className="flex flex-grow">
+                  <div className="flex h-screen">
                     <DialogManager />
                     <CommandPalette />
                     <PageRouter />

src/components/PageLayout.tsx

@@ -40,8 +40,12 @@ export const PageLayout = ({
           </div>
         </div>
       </div>
-      {/* relative flex h-full w-full flex-col */}
+      <div
-      <div className={cn("flex h-full w-full flex-col", !noPadding && "p-3")}>
+        className={cn(
+          "flex h-full w-full flex-col overflow-y-auto",
+          !noPadding && "p-3"
+        )}
+      >
         {children}
       </div>
     </div>

src/components/UI/ScrollArea.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@core/utils/cn.js";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-slate-300 dark:bg-slate-700" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

src/components/UI/Select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "border-slate-300 placeholder:text-slate-400 focus:ring-slate-400 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 flex h-10 w-full items-center justify-between rounded-md border bg-transparent py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "border-slate-100 bg-white text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md animate-in fade-in-80",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white text-slate-700 shadow-md animate-in fade-in-80 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "text-slate-900 dark:text-slate-300 py-1.5 pr-2 pl-8 text-sm font-semibold",
+      "py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-300",
       className
     )}
     {...props}
@@ -71,7 +71,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "focus:bg-slate-100 dark:focus:bg-slate-700 relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
       className
     )}
     {...props}
@@ -93,7 +93,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("bg-slate-100 dark:bg-slate-700 -mx-1 my-1 h-px", className)}
+    className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700", className)}
     {...props}
   />
 ));

src/pages/Channels.tsx

@@ -40,8 +40,6 @@ export const ChannelsPage = (): JSX.Element => {
           {
             icon: ImportIcon,
             onClick() {
-              console.log("fired");
-
               setDialogOpen("import", true);
             }
           },

src/pages/Peers.tsx

@@ -31,7 +31,7 @@ export const PeersPage = (): JSX.Element => {
             <Hashicon size={24} value={node.num.toString()} />,
             <h1>
               {node.user?.longName ?? node.user?.macaddr
-                ? `Meshtastic_${base16
+                ? `Meshtastic ${base16
                     .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
                     .toLowerCase()}`
                 : `UNK: ${node.num}`}