From 24af1b071b2bdb33df8ac7ec67410225b585c924 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 31 Jul 2025 10:36:27 +0200
Subject: [PATCH 1/5] Update tooltips

---
 .../components/viewer/PreSetupWrapper.vue     |  2 +-
 packages/frontend-2/composables/tooltips.ts   | 43 +++++++++++++------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/frontend-2/components/viewer/PreSetupWrapper.vue b/packages/frontend-2/components/viewer/PreSetupWrapper.vue
index b6e10d41b..4ca399a69 100644
--- a/packages/frontend-2/components/viewer/PreSetupWrapper.vue
+++ b/packages/frontend-2/components/viewer/PreSetupWrapper.vue
@@ -56,7 +56,7 @@
           <template v-if="showControls">
             <ViewerControlsLeft />
             <ViewerControlsBottom />
-            <ViewerControlsRight v-if="!isMobile" />
+            <ViewerControlsRight v-if="isMobile" />
           </template>
 
           <ViewerLimitsDialog
diff --git a/packages/frontend-2/composables/tooltips.ts b/packages/frontend-2/composables/tooltips.ts
index a13c27b04..5081b9f73 100644
--- a/packages/frontend-2/composables/tooltips.ts
+++ b/packages/frontend-2/composables/tooltips.ts
@@ -1,4 +1,6 @@
 import type { MaybeNullOrUndefined } from '@speckle/shared'
+import { useBreakpoints } from '@vueuse/core'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 
 /**
  * Smart tooltip delay composable
@@ -7,9 +9,13 @@ import type { MaybeNullOrUndefined } from '@speckle/shared'
  * - First tooltip shows after a configurable delay (default 1 second)
  * - Subsequent tooltips show instantly once user has shown intent
  * - State resets after a period of inactivity (default 3 seconds)
+ * - Only shows tooltips on non-mobile devices
  */
 
 export function useSmartTooltipDelay() {
+  const breakpoints = useBreakpoints(TailwindBreakpoints)
+  const isMobile = breakpoints.smaller('sm')
+
   const initialDelay = 1000
   const resetAfter = 3000
 
@@ -19,20 +25,31 @@ export function useSmartTooltipDelay() {
   const getTooltipProps = (
     content?: MaybeNullOrUndefined<string>,
     additionalProps: Record<string, unknown> = {}
-  ) => ({
-    content,
-    delay: hasShownAny.value ? 0 : initialDelay,
-    onShow: () => {
-      hasShownAny.value = true
-      if (resetTimer.value) {
-        clearTimeout(resetTimer.value)
+  ) => {
+    // Don't show tooltips on mobile devices
+    if (isMobile.value) {
+      return {
+        content: null,
+        disabled: true,
+        ...additionalProps
       }
-      resetTimer.value = setTimeout(() => {
-        hasShownAny.value = false
-      }, resetAfter)
-    },
-    ...additionalProps
-  })
+    }
+
+    return {
+      content,
+      delay: hasShownAny.value ? 0 : initialDelay,
+      onShow: () => {
+        hasShownAny.value = true
+        if (resetTimer.value) {
+          clearTimeout(resetTimer.value)
+        }
+        resetTimer.value = setTimeout(() => {
+          hasShownAny.value = false
+        }, resetAfter)
+      },
+      ...additionalProps
+    }
+  }
 
   const cleanup = () => {
     if (resetTimer.value) {

From afd5efb43b39a54fe7abe75b9a9b0636351d9e6d Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 31 Jul 2025 11:03:17 +0200
Subject: [PATCH 2/5] Update panel indexes

---
 .../components/viewer/controls/Bottom.vue     |  4 ++--
 .../components/viewer/controls/Left.vue       | 11 +++++-----
 .../components/viewer/controls/Right.vue      | 21 ++++++++++++++-----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/frontend-2/components/viewer/controls/Bottom.vue b/packages/frontend-2/components/viewer/controls/Bottom.vue
index 426f7f766..c3d755be5 100644
--- a/packages/frontend-2/components/viewer/controls/Bottom.vue
+++ b/packages/frontend-2/components/viewer/controls/Bottom.vue
@@ -2,7 +2,7 @@
   <aside>
     <ViewerControlsButtonGroup
       v-show="activePanel === 'none'"
-      class="absolute left-1/2 -translate-x-1/2 bottom-4 z-40"
+      class="absolute left-1/2 -translate-x-1/2 bottom-4 z-50"
     >
       <ViewerControlsButtonToggle
         v-for="panel in panels"
@@ -16,7 +16,7 @@
 
     <ViewerLayoutPanel
       v-if="activePanel !== 'none'"
-      class="absolute left-1/2 -translate-x-1/2 bottom-4 z-30 flex p-1 items-center justify-between w-80"
+      class="absolute left-1/2 -translate-x-1/2 bottom-4 z-50 flex p-1 items-center justify-between w-80"
     >
       <span class="flex items-center">
         <component :is="panels[activePanel].icon" class="h-4 w-4 ml-1 mr-1.5" />
diff --git a/packages/frontend-2/components/viewer/controls/Left.vue b/packages/frontend-2/components/viewer/controls/Left.vue
index 5d34cc983..5007044bd 100644
--- a/packages/frontend-2/components/viewer/controls/Left.vue
+++ b/packages/frontend-2/components/viewer/controls/Left.vue
@@ -1,12 +1,12 @@
 <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 <template>
   <aside
-    class="absolute left-2 lg:left-0 top-[3.5rem] z-20 flex rounded-lg border border-outline-2 bg-foundation px-1 overflow-visible"
+    class="absolute left-2 lg:left-0 top-[3.5rem] z-40 flex rounded-lg border border-outline-2 bg-foundation px-1 overflow-visible"
     :class="[
       isEmbedEnabled
         ? ''
         : 'lg:top-[3rem] lg:rounded-none lg:px-2 lg:max-h-[calc(100dvh-3rem)] lg:border-l-0 lg:border-t-0 lg:border-b-0',
-      hasActivePanel && 'h-full max-h-[calc(100dvh-7.875rem)] rounded-r-none'
+      hasActivePanel && 'h-full max-h-[calc(100dvh-8rem)] rounded-r-none'
     ]"
   >
     <div class="flex flex-col gap-2 py-1" :class="isEmbedEnabled ? '' : 'lg:py-2'">
@@ -99,15 +99,14 @@
 
     <!-- Scrollable controls container -->
     <div
+      v-show="activePanel !== 'none'"
       ref="scrollableControlsContainer"
       :class="[
-        'simple-scrollbar bg-foundation absolute z-10 left-[calc(2.5rem+1px)] top-[-1px] bottom-[-1px] overflow-y-auto overflow-x-visible border-outline-2 border border-l-0 rounded-lg rounded-tl-none rounded-bl-none',
+        'simple-scrollbar overflow-x-hidden bg-foundation absolute z-10 left-[calc(2.5rem+1px)] top-[-1px] bottom-[-1px] overflow-y-auto border-outline-2 border border-l-0 rounded-lg rounded-tl-none rounded-bl-none',
         hasActivePanel ? 'opacity-100' : 'opacity-0',
         isEmbedEnabled ? '' : 'lg:left-[calc(3rem+1px)] lg:border-none lg:rounded-none'
       ]"
-      :style="`width: ${
-        isMobile ? 'calc(100vw - 3.75rem)' : `${width + 4}px`
-      }; overflow-x: visible !important;`"
+      :style="`width: ${isMobile ? 'calc(100vw - 3.75rem)' : `${width + 4}px`};`"
     >
       <ViewerModelsPanel
         v-if="resourceItems.length !== 0 && activePanel === 'models'"
diff --git a/packages/frontend-2/components/viewer/controls/Right.vue b/packages/frontend-2/components/viewer/controls/Right.vue
index ed70acd6f..4972bd1f5 100644
--- a/packages/frontend-2/components/viewer/controls/Right.vue
+++ b/packages/frontend-2/components/viewer/controls/Right.vue
@@ -1,6 +1,10 @@
 <template>
-  <aside class="absolute top-[3.75rem] z-20" :style="dynamicStyles">
-    <ViewerControlsButtonGroup direction="vertical">
+  <aside
+    ref="buttonContainer"
+    class="absolute top-[3.75rem] z-20"
+    :style="dynamicStyles"
+  >
+    <ViewerControlsButtonGroup ref="buttonContainer" direction="vertical">
       <ViewerControlsButtonToggle
         v-tippy="
           getTooltipProps(getShortcutDisplayText(shortcuts.ZoomExtentsOrSelection), {
@@ -49,6 +53,7 @@ const { getTooltipProps } = useSmartTooltipDelay()
 
 const activePanel = ref<ActivePanel>('none')
 const menuContainer = ref<Nullable<HTMLElement>>(null)
+const buttonContainer = ref<Nullable<HTMLElement>>(null)
 
 const dynamicStyles = computed(() => {
   if (props.sidebarOpen) {
@@ -75,7 +80,13 @@ registerShortcuts({
   ZoomExtentsOrSelection: () => trackAndzoomExtentsOrSelection()
 })
 
-onClickOutside(menuContainer, () => {
-  activePanel.value = 'none'
-})
+onClickOutside(
+  menuContainer,
+  () => {
+    activePanel.value = 'none'
+  },
+  {
+    ignore: [buttonContainer]
+  }
+)
 </script>

From 5b76beb034114e7f0db56d3f4ba0648fbe5f51f9 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 31 Jul 2025 11:16:10 +0200
Subject: [PATCH 3/5] Updated icon text color on dark mode

---
 packages/frontend-2/components/viewer/comments/Panel.vue    | 6 +++++-
 packages/frontend-2/components/viewer/measurements/Menu.vue | 3 ++-
 packages/frontend-2/components/viewer/view-modes/Menu.vue   | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-2/components/viewer/comments/Panel.vue b/packages/frontend-2/components/viewer/comments/Panel.vue
index 2db38af9d..89e09a4b7 100644
--- a/packages/frontend-2/components/viewer/comments/Panel.vue
+++ b/packages/frontend-2/components/viewer/comments/Panel.vue
@@ -19,7 +19,11 @@
           hide-text
           color="subtle"
           :icon-left="settingsIcon"
-          :class="showVisibilityOptions ? '!text-primary-focus !bg-info-lighter' : ''"
+          :class="
+            showVisibilityOptions
+              ? '!text-primary-focus !dark:text-foreground-on-primary !bg-info-lighter'
+              : ''
+          "
           @click="showVisibilityOptions = !showVisibilityOptions"
         />
       </LayoutMenu>
diff --git a/packages/frontend-2/components/viewer/measurements/Menu.vue b/packages/frontend-2/components/viewer/measurements/Menu.vue
index d0a1f2d38..e8a18b748 100644
--- a/packages/frontend-2/components/viewer/measurements/Menu.vue
+++ b/packages/frontend-2/components/viewer/measurements/Menu.vue
@@ -63,7 +63,8 @@
           <button
             class="size-6 flex items-center justify-center rounded-md"
             :class="[
-              showSettings && 'text-primary-focus bg-info-lighter',
+              showSettings &&
+                'text-primary-focus bg-info-lighter dark:text-foreground-on-primary',
               !showSettings && 'text-foreground hover:bg-foundation-2'
             ]"
             @click="showSettings = !showSettings"
diff --git a/packages/frontend-2/components/viewer/view-modes/Menu.vue b/packages/frontend-2/components/viewer/view-modes/Menu.vue
index 0e9631310..c62bfca87 100644
--- a/packages/frontend-2/components/viewer/view-modes/Menu.vue
+++ b/packages/frontend-2/components/viewer/view-modes/Menu.vue
@@ -79,7 +79,8 @@
       <button
         class="size-6 flex items-center justify-center rounded-md"
         :class="[
-          showSettings && 'text-primary-focus bg-info-lighter',
+          showSettings &&
+            'text-primary-focus bg-info-lighter dark:text-foreground-on-primary',
           !showSettings && 'text-foreground hover:bg-foundation-2'
         ]"
         @click="showSettings = !showSettings"

From 415c6673836944df4fd7217e33bebaa9c4dc7fbc Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 31 Jul 2025 11:21:03 +0200
Subject: [PATCH 4/5] Fix left sidebar

---
 packages/frontend-2/components/viewer/controls/Left.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/viewer/controls/Left.vue b/packages/frontend-2/components/viewer/controls/Left.vue
index 5007044bd..5cb00ff6f 100644
--- a/packages/frontend-2/components/viewer/controls/Left.vue
+++ b/packages/frontend-2/components/viewer/controls/Left.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 <template>
   <aside
-    class="absolute left-2 lg:left-0 top-[3.5rem] z-40 flex rounded-lg border border-outline-2 bg-foundation px-1 overflow-visible"
+    class="absolute left-2 lg:left-0 top-[3.5rem] z-40 flex rounded-lg border border-outline-2 bg-foundation px-1 overflow-visible lg:h-full"
     :class="[
       isEmbedEnabled
         ? ''
@@ -102,7 +102,7 @@
       v-show="activePanel !== 'none'"
       ref="scrollableControlsContainer"
       :class="[
-        'simple-scrollbar overflow-x-hidden bg-foundation absolute z-10 left-[calc(2.5rem+1px)] top-[-1px] bottom-[-1px] overflow-y-auto border-outline-2 border border-l-0 rounded-lg rounded-tl-none rounded-bl-none',
+        'simple-scrollbar overflow-x-hidden bg-foundation absolute z-10 left-[calc(2.5rem+1px)] top-[-1px] bottom-[-1px] overflow-y-auto border-outline-2 border border-l-0 rounded-lg rounded-tl-none rounded-bl-none ',
         hasActivePanel ? 'opacity-100' : 'opacity-0',
         isEmbedEnabled ? '' : 'lg:left-[calc(3rem+1px)] lg:border-none lg:rounded-none'
       ]"

From fc9b2fadad65a7c82b3e4ec65728a87bea04f82e Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 31 Jul 2025 11:24:32 +0200
Subject: [PATCH 5/5] Left sidebar width mobile

---
 packages/frontend-2/components/viewer/controls/Left.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/viewer/controls/Left.vue b/packages/frontend-2/components/viewer/controls/Left.vue
index 5cb00ff6f..e8b26fd8b 100644
--- a/packages/frontend-2/components/viewer/controls/Left.vue
+++ b/packages/frontend-2/components/viewer/controls/Left.vue
@@ -106,7 +106,7 @@
         hasActivePanel ? 'opacity-100' : 'opacity-0',
         isEmbedEnabled ? '' : 'lg:left-[calc(3rem+1px)] lg:border-none lg:rounded-none'
       ]"
-      :style="`width: ${isMobile ? 'calc(100vw - 3.75rem)' : `${width + 4}px`};`"
+      :style="`width: ${isMobile ? 'calc(100vw - 3.6rem)' : `${width + 4}px`};`"
     >
       <ViewerModelsPanel
         v-if="resourceItems.length !== 0 && activePanel === 'models'"