better alignment for readonly user account menu

beszel/site/package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "NODE_ENV=production vite",
+		"dev": "vite",
 		"build": "vite build",
 		"preview": "vite preview"
 	},

beszel/site/src/main.tsx

@@ -5,7 +5,14 @@ import Home from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
 import { $authenticated, $systems, pb, $publicKey, $hubVersion } from './lib/stores.ts'
 import { ModeToggle } from './components/mode-toggle.tsx'
-import { cn, isAdmin, updateAlerts, updateFavicon, updateSystemList } from './lib/utils.ts'
+import {
+	cn,
+	isAdmin,
+	isReadOnlyUser,
+	updateAlerts,
+	updateFavicon,
+	updateSystemList,
+} from './lib/utils.ts'
 import { buttonVariants } from './components/ui/button.tsx'
 import {
 	DatabaseBackupIcon,
@@ -125,7 +132,7 @@ const Layout = () => {
 									<UserIcon className="h-[1.2rem] w-[1.2rem]" />
 								</button>
 							</DropdownMenuTrigger>
-							<DropdownMenuContent className="min-w-44">
+							<DropdownMenuContent align={isReadOnlyUser() ? 'end' : 'center'} className="min-w-44">
 								<DropdownMenuLabel>{pb.authStore.model?.email}</DropdownMenuLabel>
 								<DropdownMenuSeparator />
 								<DropdownMenuGroup>