Lighten dark mode border on small screens

Author: Rigidity

src/components/ui/sheet.tsx

@@ -36,7 +36,7 @@ const sheetVariants = cva(
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-[280px]',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-r-neutral-600 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-[280px]',
         right:
           'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-[280px]',
       },

src/pages/PeerList.tsx

@@ -1,28 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { commands, PeerRecord } from '../bindings';
-import { platform } from '@tauri-apps/plugin-os';
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import Header from '@/components/Header';
 import Container from '@/components/Container';
+import Header from '@/components/Header';
 import Layout from '@/components/Layout';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import {
   Dialog,
   DialogContent,
@@ -32,25 +13,44 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { useErrors } from '@/hooks/useErrors';
+import { useLongPress } from '@/hooks/useLongPress';
+import { t } from '@lingui/core/macro';
+import { Plural, Trans } from '@lingui/react/macro';
+import { animated, useSpring } from '@react-spring/web';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { platform } from '@tauri-apps/plugin-os';
+import { useDrag } from '@use-gesture/react';
 import {
   BadgeCheckIcon,
   BadgeIcon,
   BanIcon,
   HelpCircleIcon,
   Trash2Icon,
 } from 'lucide-react';
-import { animated, useSpring } from '@react-spring/web';
-import { useDrag } from '@use-gesture/react';
-import { useLongPress } from '@/hooks/useLongPress';
-import { Plural, Trans } from '@lingui/react/macro';
-import { t } from '@lingui/core/macro';
+import { useCallback, useEffect, useState } from 'react';
+import { commands, PeerRecord } from '../bindings';
 
 const MobileRow = ({
   peer,
@@ -208,7 +208,7 @@ export default function PeerList() {
     },
     {
       accessorKey: 'peak_height',
-      header: t`Peak Height`,
+      header: t`Height`,
     },
     {
       accessorKey: 'trusted',