fix page scroll behaviour

3 years ago · a711db4ee3
8 changed files with 644 additions and 572 deletions
--- a/package.json
+++ b/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-popover": "^1.0.3",
+    "@radix-ui/react-menubar": "^1.0.1",
+    "@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/parser": "^5.52.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.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"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.tsx
+++ b/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 />
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@ -40,8 +40,12 @@ export const PageLayout = ({
          </div>
        </div>
      </div>
-      {/* relative flex h-full w-full flex-col */}
-      <div className={cn("flex h-full w-full flex-col", !noPadding && "p-3")}>
+      <div
+        className={cn(
+          "flex h-full w-full flex-col overflow-y-auto",
+          !noPadding && "p-3"
+        )}
+      >
        {children}
      </div>
    </div>
--- a/src/components/UI/ScrollArea.tsx
+++ b/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 };
--- a/src/components/UI/Select.tsx
+++ b/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}
  />
 ));
--- a/src/pages/Channels.tsx
+++ b/src/pages/Channels.tsx
@ -40,8 +40,6 @@ export const ChannelsPage = (): JSX.Element => {
          {
            icon: ImportIcon,
            onClick() {
-              console.log("fired");
-
              setDialogOpen("import", true);
            }
          },
--- a/src/pages/Peers.tsx
+++ b/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}`}