Refine admin info pages + nav

src/admin/AdminInfoNav.tsx

@@ -10,7 +10,8 @@ import { useAppState } from '@/state/AppState';
 import InsightsIndicatorDot from './insights/InsightsIndicatorDot';
 
 const ADMIN_INFO_PAGES = [{
-  title: 'Insights',
+  title: 'App Insights',
+  titleShort: 'Insights',
   path: PATH_ADMIN_INSIGHTS,
 }, {
   title: 'Configuration',

src/admin/AdminNavClient.tsx

@@ -64,7 +64,7 @@ export default function AdminNavClient({
   return (
     <SiteGrid
       contentMain={
-        <div className="space-y-5">
+        <div className="space-y-4">
           <div className={clsx(
             'flex gap-2 pb-3',
             'border-b border-gray-200 dark:border-gray-800',

src/components/Container.tsx

@@ -4,14 +4,14 @@ import { ReactNode } from 'react';
 export default function Container({
   children,
   className,
-  color = 'gray',
+  color = 'gray-border',
   padding = 'normal',
   centered = true,
   spaceChildren = true,
 }: {
   children: ReactNode
   className?: string
-  color?: 'gray' | 'blue' | 'red' | 'yellow'
+  color?: 'gray' | 'gray-border' | 'blue' | 'red' | 'yellow'
   padding?:
     'loose' |
     'normal' |
@@ -27,6 +27,11 @@ export default function Container({
       'text-medium',
       'bg-dim',
     ];
+    case 'gray-border': return [
+      'text-medium',
+      'bg-gray-50 dark:bg-gray-900/40',
+      'border border-gray-200 dark:border-gray-800',
+    ];
     case 'blue': return [
       'text-blue-900 dark:text-blue-300',
       'bg-blue-100/35 dark:bg-blue-950/60',