fix(ui): normalize version badge and account menu layout

frontend/src/api/admin/system.ts

@@ -3,6 +3,7 @@
  */
 
 import { apiClient } from '../client'
+import { extractSemanticVersion } from '@/utils/version'
 
 export interface ReleaseInfo {
   name: string
@@ -26,7 +27,10 @@ export interface VersionInfo {
  */
 export async function getVersion(): Promise<{ version: string }> {
   const { data } = await apiClient.get<{ version: string }>('/admin/system/version')
-  return data
+  return {
+    ...data,
+    version: extractSemanticVersion(data.version)
+  }
 }
 
 /**
@@ -37,7 +41,11 @@ export async function checkUpdates(force = false): Promise<VersionInfo> {
   const { data } = await apiClient.get<VersionInfo>('/admin/system/check-updates', {
     params: force ? { force: 'true' } : undefined
   })
-  return data
+  return {
+    ...data,
+    current_version: extractSemanticVersion(data.current_version),
+    latest_version: extractSemanticVersion(data.latest_version)
+  }
 }
 
 export interface UpdateResult {

frontend/src/components/layout/AppLayout.vue

@@ -24,11 +24,13 @@
 
 <script setup lang="ts">
 import '@/styles/onboarding.css'
-import { computed, onMounted } from 'vue'
+import '@/styles/layout-fixes.css'
+import { computed, onMounted, watch } from 'vue'
 import { useAppStore } from '@/stores'
 import { useAuthStore } from '@/stores/auth'
 import { useOnboardingTour } from '@/composables/useOnboardingTour'
 import { useOnboardingStore } from '@/stores/onboarding'
+import { extractSemanticVersion } from '@/utils/version'
 import AppSidebar from './AppSidebar.vue'
 import AppHeader from './AppHeader.vue'
 
@@ -37,6 +39,17 @@ const authStore = useAuthStore()
 const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
 const isAdmin = computed(() => authStore.user?.role === 'admin')
 
+watch(
+  () => appStore.siteVersion,
+  (version) => {
+    const normalizedVersion = extractSemanticVersion(version)
+    if (normalizedVersion && normalizedVersion !== version) {
+      appStore.siteVersion = normalizedVersion
+    }
+  },
+  { immediate: true }
+)
+
 const { replayTour } = useOnboardingTour({
   storageKey: isAdmin.value ? 'admin_guide' : 'user_guide',
   autoStart: true

frontend/src/styles/layout-fixes.css

@@ -0,0 +1,9 @@
+/* Keep the fixed-width account dropdown readable for long email addresses. */
+header.glass .dropdown.glass-popover.w-56 {
+  width: min(16rem, calc(100vw - 1rem));
+}
+
+header.glass .dropdown.glass-popover.w-56 > .border-b:first-child > div:last-child {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}

frontend/src/utils/version.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import { extractSemanticVersion } from './version'
+
+describe('extractSemanticVersion', () => {
+  it.each([
+    ['main-v0.0.1-81a2f23b25fb', '0.0.1'],
+    ['v0.0.1', '0.0.1'],
+    ['0.0.1', '0.0.1'],
+    ['release/v12.34.56+build.7', '12.34.56']
+  ])('extracts %s as %s', (input, expected) => {
+    expect(extractSemanticVersion(input)).toBe(expected)
+  })
+
+  it('keeps a non-semantic fallback readable', () => {
+    expect(extractSemanticVersion('vdev')).toBe('dev')
+  })
+
+  it('returns an empty string for missing values', () => {
+    expect(extractSemanticVersion(undefined)).toBe('')
+  })
+})

frontend/src/utils/version.ts

@@ -0,0 +1,17 @@
+const SEMANTIC_VERSION_PATTERN = /(?:^|[^0-9])v?(\d+\.\d+\.\d+)(?=$|[^0-9])/i
+
+/**
+ * Extract a clean semantic version from build identifiers.
+ *
+ * Examples:
+ * - main-v0.0.1-81a2f23b25fb -> 0.0.1
+ * - v0.0.1 -> 0.0.1
+ * - 0.0.1 -> 0.0.1
+ */
+export function extractSemanticVersion(value: string | null | undefined): string {
+  const normalized = value?.trim() ?? ''
+  if (!normalized) return ''
+
+  const match = normalized.match(SEMANTIC_VERSION_PATTERN)
+  return match?.[1] ?? normalized.replace(/^v/i, '')
+}