From 73a83b2177bb47aad355773a634ae9d78d411fa7 Mon Sep 17 00:00:00 2001
From: Tomas Mizera <tomas.mizera@lutraconsulting.co.uk>
Date: Tue, 25 Aug 2026 21:03:44 +0200
Subject: [PATCH 1/6] Show user and project ID in admin panel, fix page headers
 and other small fixes

---
 .../admin-lib/src/modules/admin/routes.ts     |   9 +-
 .../modules/admin/views/AccountDetailView.vue | 129 ++++++++++++++----
 .../src/modules/admin/views/ProjectView.vue   |  66 +++++++++
 .../lib/src/common/composables/index.ts       |   1 +
 .../common/composables/useCopyToClipboard.ts  |  30 ++++
 5 files changed, 203 insertions(+), 32 deletions(-)
 create mode 100644 web-app/packages/lib/src/common/composables/useCopyToClipboard.ts

diff --git a/web-app/packages/admin-lib/src/modules/admin/routes.ts b/web-app/packages/admin-lib/src/modules/admin/routes.ts
index 3439a561..6dc1f98c 100644
--- a/web-app/packages/admin-lib/src/modules/admin/routes.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/routes.ts
@@ -21,15 +21,18 @@ export enum AdminRoutes {
   Login = 'login'
 }
 
-export const getAdminTitle = (route: RouteLocationNormalizedLoaded) => {
+export const getAdminTitle = (
+  route: RouteLocationNormalizedLoaded,
+  config?: { accountEmail?: string }
+) => {
   const params = route.params as AdminRouteParams
   const titles: Record<AdminRoutes, string | string[]> = {
     [AdminRoutes.Login]: ['Sign in', 'Mergin Maps Admin Panel'],
     [AdminRoutes.ACCOUNTS]: 'Accounts',
-    [AdminRoutes.ACCOUNT]: 'Account details',
+    [AdminRoutes.ACCOUNT]: [config?.accountEmail || 'Account details'],
     [AdminRoutes.OVERVIEW]: 'Admin overview',
     [AdminRoutes.PROJECTS]: 'Projects',
-    [AdminRoutes.PROJECT]: ['Details', params.projectName],
+    [AdminRoutes.PROJECT]: [params.projectName],
     [AdminRoutes.SETTINGS]: 'Settings',
     [AdminRoutes.ProjectTree]: ['Files', params.projectName],
     [AdminRoutes.ProjectHistory]: ['History', params.projectName],
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
index c779d9e2..3ff32697 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
@@ -10,26 +10,30 @@
     <template v-if="user">
       <app-container>
         <app-section class="p-4">
-          <div
-            class="flex flex-column align-items-center row-gap-3 text-center"
-          >
-            <PAvatar
-              :label="$filters.getAvatar(user?.email, profile?.name)"
-              size="xlarge"
-              shape="circle"
-              :pt="{
-                root: {
-                  class: 'font-semibold'
-                }
-              }"
-            />
-            <h3 class="headline-h2" data-cy="profile-name">
-              {{
-                profile?.name
-                  ? `${profile.name} (${user?.username})`
-                  : user.username
-              }}
-            </h3>
+          <div class="flex flex-column row-gap-3">
+            <div class="flex align-items-center gap-2">
+              <PAvatar
+                :label="$filters.getAvatar(user?.email, profile?.name)"
+                shape="circle"
+                :pt="{
+                  root: {
+                    class: 'font-semibold flex-shrink-0',
+                    style: {
+                      width: '2.25rem',
+                      height: '2.25rem',
+                      fontSize: '1rem'
+                    }
+                  }
+                }"
+              />
+              <h2 class="headline-h2" data-cy="profile-name">
+                {{
+                  profile?.name
+                    ? `${profile.name} (${user?.username})`
+                    : user.username
+                }}
+              </h2>
+            </div>
             <p
               class="m-0 paragraph-p6 overflow-wrap-anywhere"
               data-cy="profile-email"
@@ -45,18 +49,32 @@
               {{ user?.email }}
             </p>
             <dl
-              class="profile-view-detail-list grid grid-nogutter paragraph-p5"
+              class="project-view-detail-list paragraph-p5 flex flex-column gap-3"
             >
-              <div
-                class="col-6 flex flex-column align-items-start text-left flex-wrap"
-              >
-                <dt class="paragraph-p6 opacity-80 mb-2">Last signed in</dt>
+              <div>
+                <dt class="paragraph-p6 opacity-80">User ID</dt>
+                <dd class="font-semibold" data-cy="profile-id">
+                  <button
+                    type="button"
+                    class="id-copy-pill"
+                    v-tooltip.top="'Copy to clipboard'"
+                    :aria-label="`Copy user ID ${user?.id}`"
+                    :disabled="!user?.id"
+                    @click="copyId"
+                  >
+                    <span>{{ user?.id }}</span>
+                    <i class="ti ti-copy"></i>
+                  </button>
+                </dd>
+              </div>
+              <div>
+                <dt class="paragraph-p6 opacity-80">Last signed in</dt>
                 <dd class="font-semibold" data-cy="profile-last-signed-in">
                   {{ $filters.date(user.last_signed_in) || '-' }}
                 </dd>
               </div>
-              <div class="col-6 flex flex-column align-items-end">
-                <dt class="paragraph-p6 opacity-80 mb-2">Registered</dt>
+              <div>
+                <dt class="paragraph-p6 opacity-80">Registered</dt>
                 <dd class="font-semibold" data-cy="profile-registered">
                   {{ $filters.date(user?.registration_date) }}
                 </dd>
@@ -138,13 +156,15 @@ import {
   ConfirmDialogProps,
   AppSettings,
   AppSettingsItemConfig,
+  useCopyToClipboard,
   useInstanceStore,
   useUserStore
 } from '@mergin/lib'
-import { computed, watch } from 'vue'
+import { computed, watch, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
+import { getAdminTitle } from '@/modules/admin/routes'
 import { useAdminStore } from '@/modules/admin/store'
 
 const route = useRoute()
@@ -183,6 +203,9 @@ const settingsItems = computed<AppSettingsItemConfig[]>(() => [
   }
 ])
 
+const { copy } = useCopyToClipboard()
+const copyId = () => copy(user.value?.id, 'User ID')
+
 const user = computed(() => adminStore.user)
 const profile = computed(() => adminStore.user?.profile)
 const routeUsername = computed(() => route?.params?.username)
@@ -192,6 +215,16 @@ const fetchProfile = (username: string) => {
   adminStore.fetchUserByName({ username })
 }
 
+watchEffect(() => {
+  // We need to handle the title separately, as the account's email is not
+  // available in the route and only loads after the profile is fetched
+  if (user.value?.email) {
+    document.title = getAdminTitle(route, {
+      accountEmail: user.value.email
+    })?.[0]
+  }
+})
+
 watch(
   routeUsername,
   (username) => {
@@ -300,8 +333,46 @@ const switchAdminAccess = async () => {
 </script>
 
 <style lang="scss" scoped>
-.profile-view-detail-list {
+h2 {
+  color: var(--text-color);
+}
+
+.project-view-detail-list {
   max-width: 640px;
   width: 100%;
 }
+
+.id-copy-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: -0.25rem -0.5rem;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-color);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: var(--surface-hover);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  i {
+    font-size: 0.95rem;
+    color: inherit;
+  }
+}
 </style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
index 255e07cb..2eaba0fd 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
@@ -33,6 +33,8 @@
           <h2 class="headline-h2" data-cy="project-name">
             <template v-if="showWorkspaceName"
               ><router-link
+                class="workspace-name-link"
+                v-tooltip.top="'Open workspace detail'"
                 :to="{
                   name: 'adminWorkspace',
                   params: { id: project?.workspace_id }
@@ -46,6 +48,22 @@
           <dl
             class="project-view-detail-list paragraph-p5 flex flex-column gap-3"
           >
+            <div>
+              <dt class="paragraph-p6 opacity-80">Project ID</dt>
+              <dd class="font-semibold" data-cy="project-id">
+                <button
+                  type="button"
+                  class="id-copy-pill"
+                  v-tooltip.top="'Copy to clipboard'"
+                  :aria-label="`Copy project ID ${project?.id}`"
+                  :disabled="!project?.id"
+                  @click="copyId"
+                >
+                  <span>{{ project?.id }}</span>
+                  <i class="ti ti-copy"></i>
+                </button>
+              </dd>
+            </div>
             <div>
               <dt class="paragraph-p6 opacity-80">Created</dt>
               <dd class="font-semibold" data-cy="project-owner">
@@ -110,6 +128,7 @@
 import {
   AppSection,
   AppContainer,
+  useCopyToClipboard,
   useProjectStore,
   ProjectApi,
   DownloadProgress,
@@ -153,6 +172,9 @@ const tabs = computed(() => {
   return tabs
 })
 
+const { copy } = useCopyToClipboard()
+const copyId = () => copy(project.value?.id, 'Project ID')
+
 const project = computed(() => projectStore.project)
 const routeProjectName = computed(() => route?.params?.projectName as string)
 const routeWorkspaceName = computed(() => route?.params?.namespace as string)
@@ -214,8 +236,52 @@ function openDashboard() {
 </script>
 
 <style lang="scss" scoped>
+h2 {
+  color: var(--text-color);
+}
+
 .project-view-detail-list {
   max-width: 640px;
   width: 100%;
 }
+
+.id-copy-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: -0.25rem -0.5rem;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-color);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: var(--surface-hover);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  i {
+    font-size: 0.95rem;
+    color: inherit;
+  }
+}
+
+.workspace-name-link {
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+  color: inherit;
+}
 </style>
diff --git a/web-app/packages/lib/src/common/composables/index.ts b/web-app/packages/lib/src/common/composables/index.ts
index 86cca258..ae599a78 100644
--- a/web-app/packages/lib/src/common/composables/index.ts
+++ b/web-app/packages/lib/src/common/composables/index.ts
@@ -3,5 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 export { default as useRouterTitle } from './use_router_title'
+export { default as useCopyToClipboard } from './useCopyToClipboard'
 export { useDataTableSearch } from './useDataTableSearch'
 export type { DataTableSearchOptions } from './useDataTableSearch'
diff --git a/web-app/packages/lib/src/common/composables/useCopyToClipboard.ts b/web-app/packages/lib/src/common/composables/useCopyToClipboard.ts
new file mode 100644
index 00000000..7ddb6b84
--- /dev/null
+++ b/web-app/packages/lib/src/common/composables/useCopyToClipboard.ts
@@ -0,0 +1,30 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+import { useNotificationStore } from '@/modules/notification'
+
+const useCopyToClipboard = () => {
+  const notificationStore = useNotificationStore()
+
+  const copy = async (
+    value: string | number | null | undefined,
+    label = 'Value'
+  ) => {
+    if (value === null || value === undefined || value === '') {
+      return
+    }
+    try {
+      await navigator.clipboard.writeText(String(value))
+      notificationStore.show({ text: `${label} copied to clipboard` })
+    } catch {
+      notificationStore.error({
+        text: `Failed to copy ${label.toLowerCase()} to clipboard`
+      })
+    }
+  }
+
+  return { copy }
+}
+
+export default useCopyToClipboard

From 9ac806e79a9d9d50b81d7f4f3bd31c7e5109a46f Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 28 Aug 2026 15:41:08 +0200
Subject: [PATCH 2/6] Add global margin: 0 for divider

---
 .../src/assets/sass/themes/mm-theme-light/_extensions.scss    | 4 ++++
 .../assets/sass/themes/mm-theme-light/variables/_panel.scss   | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index b873a944..55fe7c28 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -99,6 +99,10 @@ img {
   }
 }
 
+.p-divider.p-divider-horizontal {
+  margin: 0;
+}
+
 
 // Custom semantic  classes
 
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
index cd779051..e05ab957 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
@@ -316,7 +316,7 @@ $dividerSize:1px;
 
 /// Color of the divider border
 /// @group panel
-$dividerColor:#dee2e6;
+$dividerColor: map-get($colors, 'secondary-gray');
 
 /// Background of the splitter gutter
 /// @group panel

From 335db4ab1e83b69f0acc616dcb3063ee92fd3e58 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 1 Sep 2026 13:08:41 +0200
Subject: [PATCH 3/6] Use separated component for pill copy

---
 .../src/common/components/CopyPill.vue        | 88 +++++++++++++++++++
 .../admin-lib/src/common/components/index.ts  |  5 ++
 .../packages/admin-lib/src/common/index.ts    |  5 ++
 web-app/packages/admin-lib/src/main.ts        |  1 +
 .../modules/admin/views/AccountDetailView.vue | 51 +----------
 .../src/modules/admin/views/ProjectView.vue   | 51 +----------
 .../lib/src/common/composables/index.ts       |  1 -
 .../common/composables/useCopyToClipboard.ts  | 30 -------
 8 files changed, 103 insertions(+), 129 deletions(-)
 create mode 100644 web-app/packages/admin-lib/src/common/components/CopyPill.vue
 create mode 100644 web-app/packages/admin-lib/src/common/components/index.ts
 create mode 100644 web-app/packages/admin-lib/src/common/index.ts
 delete mode 100644 web-app/packages/lib/src/common/composables/useCopyToClipboard.ts

diff --git a/web-app/packages/admin-lib/src/common/components/CopyPill.vue b/web-app/packages/admin-lib/src/common/components/CopyPill.vue
new file mode 100644
index 00000000..5c90ce19
--- /dev/null
+++ b/web-app/packages/admin-lib/src/common/components/CopyPill.vue
@@ -0,0 +1,88 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <button
+    type="button"
+    class="copy-pill"
+    v-tooltip.top="'Copy to clipboard'"
+    :aria-label="ariaLabel"
+    :disabled="!value"
+    @click="copyValue"
+  >
+    <span>{{ value }}</span>
+    <i class="ti ti-copy"></i>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useNotificationStore } from '@mergin/lib'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Value shown in the pill and copied to the clipboard */
+    value: string | number | null | undefined
+    /** Human readable name of the value, used in notification and aria label */
+    label?: string
+  }>(),
+  { label: 'Value' }
+)
+
+const notificationStore = useNotificationStore()
+
+const ariaLabel = computed(() => `Copy ${props.label} ${props.value ?? ''}`)
+
+async function copyValue() {
+  if (props.value === null || props.value === undefined || props.value === '') {
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(String(props.value))
+    notificationStore.show({ text: `${props.label} copied to clipboard` })
+  } catch {
+    notificationStore.error({
+      text: `Failed to copy ${props.label.toLowerCase()} to clipboard`
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.copy-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: -0.25rem -0.5rem;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-color);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: var(--surface-hover);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  i {
+    font-size: 0.95rem;
+    color: inherit;
+  }
+}
+</style>
diff --git a/web-app/packages/admin-lib/src/common/components/index.ts b/web-app/packages/admin-lib/src/common/components/index.ts
new file mode 100644
index 00000000..dd5b13c3
--- /dev/null
+++ b/web-app/packages/admin-lib/src/common/components/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+export { default as CopyPill } from './CopyPill.vue'
diff --git a/web-app/packages/admin-lib/src/common/index.ts b/web-app/packages/admin-lib/src/common/index.ts
new file mode 100644
index 00000000..d333dd14
--- /dev/null
+++ b/web-app/packages/admin-lib/src/common/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+export * from './components'
diff --git a/web-app/packages/admin-lib/src/main.ts b/web-app/packages/admin-lib/src/main.ts
index 7620ed70..2c60d992 100644
--- a/web-app/packages/admin-lib/src/main.ts
+++ b/web-app/packages/admin-lib/src/main.ts
@@ -2,4 +2,5 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
+export * from '@/common'
 export * from '@/modules'
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
index 3ff32697..37fab7c6 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
@@ -54,17 +54,7 @@
               <div>
                 <dt class="paragraph-p6 opacity-80">User ID</dt>
                 <dd class="font-semibold" data-cy="profile-id">
-                  <button
-                    type="button"
-                    class="id-copy-pill"
-                    v-tooltip.top="'Copy to clipboard'"
-                    :aria-label="`Copy user ID ${user?.id}`"
-                    :disabled="!user?.id"
-                    @click="copyId"
-                  >
-                    <span>{{ user?.id }}</span>
-                    <i class="ti ti-copy"></i>
-                  </button>
+                  <copy-pill :value="user?.id" label="User ID" />
                 </dd>
               </div>
               <div>
@@ -156,13 +146,13 @@ import {
   ConfirmDialogProps,
   AppSettings,
   AppSettingsItemConfig,
-  useCopyToClipboard,
   useInstanceStore,
   useUserStore
 } from '@mergin/lib'
 import { computed, watch, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 
+import CopyPill from '@/common/components/CopyPill.vue'
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
 import { getAdminTitle } from '@/modules/admin/routes'
 import { useAdminStore } from '@/modules/admin/store'
@@ -203,9 +193,6 @@ const settingsItems = computed<AppSettingsItemConfig[]>(() => [
   }
 ])
 
-const { copy } = useCopyToClipboard()
-const copyId = () => copy(user.value?.id, 'User ID')
-
 const user = computed(() => adminStore.user)
 const profile = computed(() => adminStore.user?.profile)
 const routeUsername = computed(() => route?.params?.username)
@@ -341,38 +328,4 @@ h2 {
   max-width: 640px;
   width: 100%;
 }
-
-.id-copy-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin: -0.25rem -0.5rem;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-color);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-
-  &:hover {
-    background: var(--surface-hover);
-  }
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.6;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-
-  i {
-    font-size: 0.95rem;
-    color: inherit;
-  }
-}
 </style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
index 2eaba0fd..dc1f3bea 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
@@ -51,17 +51,7 @@
             <div>
               <dt class="paragraph-p6 opacity-80">Project ID</dt>
               <dd class="font-semibold" data-cy="project-id">
-                <button
-                  type="button"
-                  class="id-copy-pill"
-                  v-tooltip.top="'Copy to clipboard'"
-                  :aria-label="`Copy project ID ${project?.id}`"
-                  :disabled="!project?.id"
-                  @click="copyId"
-                >
-                  <span>{{ project?.id }}</span>
-                  <i class="ti ti-copy"></i>
-                </button>
+                <copy-pill :value="project?.id" label="Project ID" />
               </dd>
             </div>
             <div>
@@ -128,7 +118,6 @@
 import {
   AppSection,
   AppContainer,
-  useCopyToClipboard,
   useProjectStore,
   ProjectApi,
   DownloadProgress,
@@ -137,6 +126,7 @@ import {
 import { computed, watch, defineProps } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
+import CopyPill from '@/common/components/CopyPill.vue'
 import { AdminRoutes } from '@/modules'
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
 
@@ -172,9 +162,6 @@ const tabs = computed(() => {
   return tabs
 })
 
-const { copy } = useCopyToClipboard()
-const copyId = () => copy(project.value?.id, 'Project ID')
-
 const project = computed(() => projectStore.project)
 const routeProjectName = computed(() => route?.params?.projectName as string)
 const routeWorkspaceName = computed(() => route?.params?.namespace as string)
@@ -245,40 +232,6 @@ h2 {
   width: 100%;
 }
 
-.id-copy-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin: -0.25rem -0.5rem;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-color);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-
-  &:hover {
-    background: var(--surface-hover);
-  }
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.6;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-
-  i {
-    font-size: 0.95rem;
-    color: inherit;
-  }
-}
-
 .workspace-name-link {
   text-decoration: underline dotted;
   text-underline-offset: 3px;
diff --git a/web-app/packages/lib/src/common/composables/index.ts b/web-app/packages/lib/src/common/composables/index.ts
index ae599a78..86cca258 100644
--- a/web-app/packages/lib/src/common/composables/index.ts
+++ b/web-app/packages/lib/src/common/composables/index.ts
@@ -3,6 +3,5 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 export { default as useRouterTitle } from './use_router_title'
-export { default as useCopyToClipboard } from './useCopyToClipboard'
 export { useDataTableSearch } from './useDataTableSearch'
 export type { DataTableSearchOptions } from './useDataTableSearch'
diff --git a/web-app/packages/lib/src/common/composables/useCopyToClipboard.ts b/web-app/packages/lib/src/common/composables/useCopyToClipboard.ts
deleted file mode 100644
index 7ddb6b84..00000000
--- a/web-app/packages/lib/src/common/composables/useCopyToClipboard.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (C) Lutra Consulting Limited
-//
-// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
-
-import { useNotificationStore } from '@/modules/notification'
-
-const useCopyToClipboard = () => {
-  const notificationStore = useNotificationStore()
-
-  const copy = async (
-    value: string | number | null | undefined,
-    label = 'Value'
-  ) => {
-    if (value === null || value === undefined || value === '') {
-      return
-    }
-    try {
-      await navigator.clipboard.writeText(String(value))
-      notificationStore.show({ text: `${label} copied to clipboard` })
-    } catch {
-      notificationStore.error({
-        text: `Failed to copy ${label.toLowerCase()} to clipboard`
-      })
-    }
-  }
-
-  return { copy }
-}
-
-export default useCopyToClipboard

From 2a6abc78c277c9c1dc06c10a9330c1b611694033 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 1 Sep 2026 17:21:21 +0200
Subject: [PATCH 4/6] Checkbox styles tunning for hoverred color

---
 .../assets/sass/themes/mm-theme-light/_extensions.scss | 10 ++++++++++
 .../sass/themes/mm-theme-light/variables/_form.scss    |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 55fe7c28..0a5b7c99 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -183,6 +183,16 @@ img {
   }
 }
 
+.p-checkbox:not(.p-checkbox-disabled) {
+  .p-checkbox-box {
+    &.p-highlight:hover {
+      .p-checkbox-icon {
+        color: $primaryColor
+      }
+    }
+  }
+}
+
 // Color of error messages in inputs ...
 .p-error {
   color: map-get($map: $colors, $key: grape);
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_form.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_form.scss
index 85624b0e..6ca55b92 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_form.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_form.scss
@@ -197,7 +197,7 @@ $checkboxActiveHoverBg: $primaryDarkerColor;
 
 /// Icon color of a selected checkbox in hover state
 /// @group form
-$checkboxIconActiveHoverColor: $primaryTextColor;
+$checkboxIconActiveHoverColor: $primaryColor;
 
 /// Border color of a selected checkbox in hover state
 /// @group form

From 715d569c0c8954e3fcf0951e6331a79aa51e84c6 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 8 Sep 2026 14:37:06 +0200
Subject: [PATCH 5/6] Multiselect panel styles

---
 .../sass/themes/mm-theme-light/_extensions.scss      | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 0a5b7c99..54e214fc 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -221,3 +221,15 @@ td:has(.dt-row-link) {
   display: block;
   padding: $tableBodyCellPadding;
 }
+
+// Multiselect customization of highlighting and focusing
+
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+  background-color: transparent;
+  color: var(--text-color);
+}
+
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+  background-color: transparent;
+  color: var(--text-color);
+}

From 4f9283a3ff65314e1f0d383b8b84858982644a87 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 8 Sep 2026 15:05:42 +0200
Subject: [PATCH 6/6] $buttonActiveBg - change bg color for active button

---
 .../assets/sass/themes/mm-theme-light/variables/_button.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
index d302da1e..7bf32a3f 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
@@ -36,7 +36,7 @@ $buttonHoverBorderColor: $primaryDarkColor;
 
 /// Background of a button in pressed state
 /// @group button
-$buttonActiveBg: $primaryColor;
+$buttonActiveBg: $primaryDarkColor;
 
 /// Color of a button in pressed state
 /// @group button