From ee352e8ddb203a57ea53511896ccd4337ececc64 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Wed, 8 Nov 2023 11:37:59 +0000
Subject: [PATCH] FE2 - Web Onboarding Enhancements (#1859)

* Change expiration of hasDismissedChecklistForever to 2 years from session

* Register Panel WIP

* Register Page

* Checklist Responsiveness

* Updates to checklist and onboarding

* Fix for viewer comments

* Automation Dialog updates

* feat(fe2): quick fixes

---------

Co-authored-by: Dimitrie Stefanescu <didimitrie@gmail.com>
---
 .../components/auth/RegisterPanel.vue         |  6 +-
 .../auth/RegisterWithEmailBlock.vue           | 17 +++--
 .../components/global/icon/HandRotate.vue     | 52 +++++++++++++
 .../components/global/icon/HandSelect.vue     | 66 +++++++++++++++++
 .../components/global/icon/HandZoom.vue       | 73 +++++++++++++++++++
 .../components/onboarding/checklist/v1.vue    | 25 +++++--
 .../components/onboarding/dialog/Manager.vue  |  4 +-
 .../models/card/AutomationStatusRefactor.vue  | 28 ++++---
 .../project/page/team/dialog/InviteUser.vue   |  2 +-
 .../frontend-2/components/tour/Comment.vue    | 25 ++++++-
 .../components/tour/Segmentation.vue          |  8 +-
 .../frontend-2/components/tour/Slideshow.vue  |  8 +-
 .../tour/content/BasicViewerNavigation.vue    | 34 ++++++---
 .../components/tour/content/OverlayModel.vue  |  2 +
 .../viewer/anchored-point/Thread.vue          |  2 +-
 .../viewer/anchored-point/thread/NewReply.vue |  2 +-
 .../src/components/layout/Dialog.vue          |  2 +-
 17 files changed, 300 insertions(+), 56 deletions(-)
 create mode 100644 packages/frontend-2/components/global/icon/HandRotate.vue
 create mode 100644 packages/frontend-2/components/global/icon/HandSelect.vue
 create mode 100644 packages/frontend-2/components/global/icon/HandZoom.vue

diff --git a/packages/frontend-2/components/auth/RegisterPanel.vue b/packages/frontend-2/components/auth/RegisterPanel.vue
index d82dd5a22..eeb593a13 100644
--- a/packages/frontend-2/components/auth/RegisterPanel.vue
+++ b/packages/frontend-2/components/auth/RegisterPanel.vue
@@ -1,13 +1,13 @@
 <template>
   <LayoutPanel fancy-glow no-shadow class="max-w-lg mx-auto w-full">
     <div class="space-y-4">
-      <div class="flex flex-col items-center space-y-2">
+      <div class="flex flex-col items-center sm:gap-2">
         <h1
-          class="h3 text-center font-bold bg-gradient-to-r py-1 from-blue-500 via-blue-400 to-blue-600 inline-block text-transparent bg-clip-text"
+          class="text-xl sm:text-3xl text-center font-bold bg-gradient-to-r py-1 from-blue-500 via-blue-400 to-blue-600 inline-block text-transparent bg-clip-text"
         >
           Create your Speckle Account
         </h1>
-        <h2 class="text-center text-foreground-2">
+        <h2 class="text-sm sm:text-base text-center text-foreground-2">
           Interoperability, Collaboration and Automation for 3D
         </h2>
       </div>
diff --git a/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue b/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue
index 271d5094e..bab6b66d7 100644
--- a/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue
+++ b/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue
@@ -7,7 +7,7 @@
         name="name"
         label="Full Name"
         placeholder="My Name"
-        size="xl"
+        :size="isSmallerOrEqualSM ? 'lg' : 'xl'"
         :rules="nameRules"
         :custom-icon="UserIcon"
         show-label
@@ -19,7 +19,7 @@
         name="email"
         label="Email"
         placeholder="example@email.com"
-        size="xl"
+        :size="isSmallerOrEqualSM ? 'lg' : 'xl'"
         :rules="emailRules"
         show-label
         :disabled="loading"
@@ -30,7 +30,7 @@
         name="password"
         label="Password"
         placeholder="Type a strong password"
-        size="xl"
+        :size="isSmallerOrEqualSM ? 'lg' : 'xl'"
         :rules="passwordRules"
         show-label
         :disabled="loading"
@@ -40,7 +40,9 @@
     </div>
     <AuthPasswordChecks
       :password="password"
-      :class="`mt-2 overflow-hidden ${pwdFocused ? 'h-8' : 'h-0'} transition-[height]`"
+      :class="`mt-2 overflow-hidden ${
+        pwdFocused ? 'h-12 sm:h-8' : 'h-0'
+      } transition-[height]`"
     />
     <div
       class="mt-3 text-xs flex items-center justify-center text-foreground-2 space-x-2"
@@ -61,7 +63,7 @@
       class="mt-2 text-xs text-foreground-2 text-center linkify-tos"
       v-html="serverInfo.termsOfService"
     ></div>
-    <div class="mt-8 text-center">
+    <div class="mt-2 sm:mt-8 text-center text-xs sm:text-base">
       <span class="mr-2">Already have an account?</span>
       <CommonTextLink :to="finalLoginRoute" :icon-right="ArrowRightIcon">
         Log in
@@ -80,6 +82,8 @@ import { passwordRules } from '~~/lib/auth/helpers/validation'
 import { graphql } from '~~/lib/common/generated/gql'
 import { ServerTermsOfServicePrivacyPolicyFragmentFragment } from '~~/lib/common/generated/gql/graphql'
 import { UserIcon, ArrowRightIcon } from '@heroicons/vue/20/solid'
+import { useBreakpoints } from '@vueuse/core'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 
 /**
  * TODO:
@@ -102,6 +106,7 @@ const props = defineProps<{
 
 const { handleSubmit } = useForm<FormValues>()
 const router = useRouter()
+const breakpoints = useBreakpoints(TailwindBreakpoints)
 
 const loading = ref(false)
 const password = ref('')
@@ -116,6 +121,8 @@ const newsletterConsent = inject<Ref<boolean>>('newsletterconsent')
 
 const pwdFocused = ref(false)
 
+const isSmallerOrEqualSM = computed(() => breakpoints.smallerOrEqual('sm').value)
+
 const finalLoginRoute = computed(() => {
   const result = router.resolve({
     path: loginRoute,
diff --git a/packages/frontend-2/components/global/icon/HandRotate.vue b/packages/frontend-2/components/global/icon/HandRotate.vue
new file mode 100644
index 000000000..97827be25
--- /dev/null
+++ b/packages/frontend-2/components/global/icon/HandRotate.vue
@@ -0,0 +1,52 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 13V4.5C8 4.10218 8.15804 3.72064 8.43934 3.43934C8.72064 3.15804 9.10218 3 9.5 3C9.89782 3 10.2794 3.15804 10.5607 3.43934C10.842 3.72064 11 4.10218 11 4.5V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11 11.5V9.5C11 9.10218 11.158 8.72064 11.4393 8.43934C11.7206 8.15804 12.1022 8 12.5 8C12.8978 8 13.2794 8.15804 13.5607 8.43934C13.842 8.72064 14 9.10218 14 9.5V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14 10.5C14 10.1022 14.158 9.72064 14.4393 9.43934C14.7206 9.15804 15.1022 9 15.5 9C15.8978 9 16.2794 9.15804 16.5607 9.43934C16.842 9.72064 17 10.1022 17 10.5V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17.0002 11.5C17.0002 11.1022 17.1582 10.7206 17.4395 10.4393C17.7208 10.158 18.1024 10 18.5002 10C18.898 10 19.2795 10.158 19.5608 10.4393C19.8421 10.7206 20.0002 11.1022 20.0002 11.5V16C20.0002 17.5913 19.368 19.1174 18.2428 20.2426C17.1176 21.3679 15.5915 22 14.0002 22H12.0002H12.2082C11.2145 22.0002 10.2364 21.7535 9.36157 21.2823C8.48676 20.811 7.7427 20.1299 7.19618 19.3L7.00018 19C6.68818 18.521 5.59318 16.612 3.71418 13.272C3.52263 12.9315 3.47147 12.5298 3.57157 12.1522C3.67166 11.7745 3.91513 11.4509 4.25018 11.25C4.60706 11.0359 5.02526 10.9471 5.43834 10.9978C5.85143 11.0486 6.23572 11.2359 6.53018 11.53L8.00018 13"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.54102 5.59497C3.30843 5.03394 4.13302 4.55561 5.00102 4.16797"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14 3.45703C15.32 3.81103 16.558 4.35903 17.685 5.06903"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/packages/frontend-2/components/global/icon/HandSelect.vue b/packages/frontend-2/components/global/icon/HandSelect.vue
new file mode 100644
index 000000000..0ff10e139
--- /dev/null
+++ b/packages/frontend-2/components/global/icon/HandSelect.vue
@@ -0,0 +1,66 @@
+<template>
+  <svg
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.5 13V4.5C8.5 4.10218 8.65804 3.72064 8.93934 3.43934C9.22064 3.15804 9.60218 3 10 3C10.3978 3 10.7794 3.15804 11.0607 3.43934C11.342 3.72064 11.5 4.10218 11.5 4.5V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.5 11.5V9.5C11.5 9.10218 11.658 8.72064 11.9393 8.43934C12.2206 8.15804 12.6022 8 13 8C13.3978 8 13.7794 8.15804 14.0607 8.43934C14.342 8.72064 14.5 9.10218 14.5 9.5V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.5 10.5C14.5 10.1022 14.658 9.72064 14.9393 9.43934C15.2206 9.15804 15.6022 9 16 9C16.3978 9 16.7794 9.15804 17.0607 9.43934C17.342 9.72064 17.5 10.1022 17.5 10.5V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17.5002 11.5C17.5002 11.1022 17.6582 10.7206 17.9395 10.4393C18.2208 10.158 18.6024 10 19.0002 10C19.398 10 19.7795 10.158 20.0608 10.4393C20.3421 10.7206 20.5002 11.1022 20.5002 11.5V16C20.5002 17.5913 19.868 19.1174 18.7428 20.2426C17.6176 21.3679 16.0915 22 14.5002 22H12.5002H12.7082C11.7145 22.0002 10.7364 21.7535 9.86157 21.2823C8.98676 20.811 8.2427 20.1299 7.69618 19.3L7.50018 19C7.18818 18.521 6.09318 16.612 4.21418 13.272C4.02263 12.9315 3.97147 12.5298 4.07157 12.1522C4.17166 11.7745 4.41513 11.4509 4.75018 11.25C5.10706 11.0359 5.52526 10.9471 5.93834 10.9978C6.35143 11.0486 6.73572 11.2359 7.03018 11.53L8.50018 13"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.5 3L4.5 2"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.5 7H3.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.5 3L15.5 2"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.5 6H16.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/packages/frontend-2/components/global/icon/HandZoom.vue b/packages/frontend-2/components/global/icon/HandZoom.vue
new file mode 100644
index 000000000..4210676be
--- /dev/null
+++ b/packages/frontend-2/components/global/icon/HandZoom.vue
@@ -0,0 +1,73 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_614_5022)">
+      <path
+        d="M11 14V5.5C11 5.10218 11.158 4.72064 11.4393 4.43934C11.7206 4.15804 12.1022 4 12.5 4C12.8978 4 13.2794 4.15804 13.5607 4.43934C13.842 4.72064 14 5.10218 14 5.5V13"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M14 12.5V10.5C14 10.303 14.0388 10.108 14.1142 9.92597C14.1896 9.74399 14.3001 9.57863 14.4393 9.43934C14.5786 9.30005 14.744 9.18956 14.926 9.11418C15.108 9.0388 15.303 9 15.5 9C15.697 9 15.892 9.0388 16.074 9.11418C16.256 9.18956 16.4214 9.30005 16.5607 9.43934C16.6999 9.57863 16.8104 9.74399 16.8858 9.92597C16.9612 10.108 17 10.303 17 10.5V13"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M17 11.5C17 11.1022 17.158 10.7206 17.4393 10.4393C17.7206 10.158 18.1022 10 18.5 10C18.8978 10 19.2794 10.158 19.5607 10.4393C19.842 10.7206 20 11.1022 20 11.5V13"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M20.0002 12.5C20.0002 12.1022 20.1582 11.7206 20.4395 11.4393C20.7208 11.158 21.1024 11 21.5002 11C21.898 11 22.2795 11.158 22.5608 11.4393C22.8421 11.7206 23.0002 12.1022 23.0002 12.5V17C23.0002 18.5913 22.368 20.1174 21.2428 21.2426C20.1176 22.3679 18.5915 23 17.0002 23H15.0002H15.2082C14.2145 23.0002 13.2364 22.7535 12.3616 22.2823C11.4868 21.811 10.7427 21.1299 10.1962 20.3C10.1306 20.2002 10.0653 20.1002 10.0002 20C9.68818 19.521 8.59318 17.612 6.71418 14.272C6.52263 13.9315 6.47147 13.5298 6.57157 13.1522C6.67166 12.7745 6.91513 12.4509 7.25018 12.25C7.60706 12.0359 8.02526 11.9471 8.43834 11.9978C8.85143 12.0486 9.23572 12.2359 9.53018 12.53L11.0002 14"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M0.750039 6.36034L3.75004 6.36034L3.75004 9.36034"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.75068 6.36101C1.75068 8.36101 -0.249322 8.89698 2.25068 11.361"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.24999 0.750039L5.24999 3.75004L8.24999 3.75004"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.24969 3.7497C7.24969 1.7497 7.78565 -0.250299 10.2497 2.2497"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_614_5022">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/packages/frontend-2/components/onboarding/checklist/v1.vue b/packages/frontend-2/components/onboarding/checklist/v1.vue
index c114e20f5..a9156673d 100644
--- a/packages/frontend-2/components/onboarding/checklist/v1.vue
+++ b/packages/frontend-2/components/onboarding/checklist/v1.vue
@@ -1,7 +1,11 @@
 <!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
 <template>
   <div>
-    <div :class="`${background ? 'px-2 bg-foundation rounded-md shadow-xl' : ''}`">
+    <div
+      :class="`${
+        background ? 'mx-2 sm:mx-auto px-2 bg-foundation rounded-md shadow-xl' : ''
+      } ${allCompleted ? 'max-w-lg' : ''}`"
+    >
       <div
         v-if="!allCompleted"
         :class="`grid gap-2 ${showIntro ? 'px-4 grid-cols-5' : 'grid-cols-4'}`"
@@ -51,7 +55,7 @@
               "
             >
               <div
-                :class="`text-xl font-bold flex items-center justify-between ${
+                :class="`text-lg sm:text-xl font-bold flex items-center justify-between ${
                   step.active ? 'text-foreground-on-primary' : 'text-foreground-2'
                 }`"
               >
@@ -64,12 +68,19 @@
                 <CheckCircleIcon v-else class="w-4 h-4 mt-1 text-primary" />
               </div>
               <div
-                :class="`${step.active ? 'font-bold text-forergound-on-primary' : ''}`"
+                :class="`${
+                  step.active
+                    ? 'font-bold text-sm sm:text-base text-forergound-on-primary'
+                    : ''
+                }`"
               >
                 {{ step.title }}
               </div>
               <div class="text-xs mt-[2px]">{{ step.blurb }}</div>
-              <div class="h-10 flex items-center justify-between">
+              <div
+                class="flex items-center justify-between"
+                :class="step.active ? 'h-10' : 'h-4'"
+              >
                 <div
                   v-if="idx === 0 || steps[idx - 1].completed"
                   class="flex justify-between items-center py-2 w-full"
@@ -143,13 +154,13 @@
       </div>
       <div
         v-else
-        class="flex flex-col sm:flex-row items-center justify-center flex-1 space-x-2 py-4"
+        class="flex flex-col items-center justify-center flex-1 space-x-2 py-4"
       >
         <div class="w-6 h-6">
           <!-- <CheckCircleIcon class="absolute w-6 h-6 text-primary" /> -->
           <CheckCircleIcon class="w-6 h-6 text-primary animate-ping animate-pulse" />
         </div>
-        <div class="text-sm max-w-lg grow">
+        <div class="text-sm max-w-lg grow text-center sm:text-left">
           <b>All done!</b>
           PS: the
           <FormButton to="https://speckle.community" target="_blank" size="sm" link>
@@ -157,7 +168,7 @@
           </FormButton>
           is there to help!
         </div>
-        <div>
+        <div class="mt-2">
           <FormButton text size="sm" @click="closeChecklist()">Close</FormButton>
         </div>
       </div>
diff --git a/packages/frontend-2/components/onboarding/dialog/Manager.vue b/packages/frontend-2/components/onboarding/dialog/Manager.vue
index 1b45331d9..2d52c3f66 100644
--- a/packages/frontend-2/components/onboarding/dialog/Manager.vue
+++ b/packages/frontend-2/components/onboarding/dialog/Manager.vue
@@ -2,7 +2,7 @@
   <OnboardingDialogBase v-model:open="openState">
     <template #header>Install Manager ⚙️</template>
     <div
-      class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
+      class="w-full aspect-video bg-primary rounded-xl flex items-center justify-center overflow-hidden"
     >
       <iframe
         width="560"
@@ -31,7 +31,7 @@
           Download for {{ os === 'Windows' ? 'Mac OS' : 'Windows' }}
         </FormButton>
       </div>
-      <div v-else class="flex justify-center flex-col space-y-2">
+      <div v-else class="flex justify-center flex-col space-y-2 text-sm sm:text-base">
         <p>
           Speckle Connectors exist only for applications running on Windows or Mac OS.
           If you want, you can still go ahead and download Speckle Manager for
diff --git a/packages/frontend-2/components/project/page/models/card/AutomationStatusRefactor.vue b/packages/frontend-2/components/project/page/models/card/AutomationStatusRefactor.vue
index 89e9409f1..18c70cf98 100644
--- a/packages/frontend-2/components/project/page/models/card/AutomationStatusRefactor.vue
+++ b/packages/frontend-2/components/project/page/models/card/AutomationStatusRefactor.vue
@@ -7,22 +7,20 @@
     >
       <AutomationDoughnutSummary :summary="summary" />
     </button>
-    <LayoutDialog
-      v-model:open="showDialog"
-      :title="`Automation Status for ${displayName}`"
-      max-width="lg"
-    >
+    <LayoutDialog v-model:open="showDialog" max-width="lg">
       <template #header>
-        <div class="flex items-center space-x-2 -mt-1 max-w-full w-full">
-          <div class="h-10 w-10 mt-[6px]">
-            <AutomationDoughnutSummary :summary="summary" />
-          </div>
-          <div class="min-w-0">
-            <h4 :class="`text-xl font-bold ${summary.titleColor}`">
-              {{ summary.title }}
-            </h4>
-            <div class="text-xs text-foreground-2 truncate">
-              {{ summary.longSummary }}
+        <div class="flex flex-col">
+          <div class="flex items-center space-x-2 max-w-full w-full">
+            <div class="h-10 w-10 mt-[6px]">
+              <AutomationDoughnutSummary :summary="summary" />
+            </div>
+            <div class="min-w-0">
+              <h4 :class="`text-xl font-bold ${summary.titleColor}`">
+                {{ summary.title }}
+              </h4>
+              <div class="text-xs text-foreground-2 truncate">
+                {{ summary.longSummary }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/frontend-2/components/project/page/team/dialog/InviteUser.vue b/packages/frontend-2/components/project/page/team/dialog/InviteUser.vue
index e54925cfb..4f3937452 100644
--- a/packages/frontend-2/components/project/page/team/dialog/InviteUser.vue
+++ b/packages/frontend-2/components/project/page/team/dialog/InviteUser.vue
@@ -20,7 +20,7 @@
       </FormTextInput>
       <div
         v-if="searchUsers.length || selectedEmails?.length"
-        class="flex flex-col border border-primary-muted -mt-6"
+        class="flex flex-col border bg-foundation border-primary-muted -mt-6"
       >
         <template v-if="searchUsers.length">
           <ProjectPageTeamDialogInviteUserServerUserRow
diff --git a/packages/frontend-2/components/tour/Comment.vue b/packages/frontend-2/components/tour/Comment.vue
index abbeb80e8..91c6f23b5 100644
--- a/packages/frontend-2/components/tour/Comment.vue
+++ b/packages/frontend-2/components/tour/Comment.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="relative">
-      <button class="pointer-events-auto group" @click="toggle(index)">
+      <button class="hidden sm:block pointer-events-auto group" @click="toggle(index)">
         <div
           v-show="!item.viewed"
           class="animate-ping absolute bg-primary rounded-full h-8 w-8"
         ></div>
         <div
-          class="absolute bg-foundation group-hover:scale-125 scale transition rounded-full h-8 w-8 flex items-center justify-center text-primary cursor-pointer select-none text-sm font-bold"
+          class="sm:absolute bg-foundation group-hover:scale-125 scale transition rounded-full h-8 w-8 flex items-center justify-center text-primary cursor-pointer select-none text-sm font-bold"
         >
           <span>{{ index + 1 }}</span>
           <!-- <span v-if="!expanded">{{ index + 1 }}</span>
@@ -22,11 +22,28 @@
       >
         <div
           v-show="item.expanded"
-          class="transition hover:bg-foundation bg-white/80 dark:bg-neutral-800/90 dark:hover:bg-neutral-800 backdrop-blur-sm rounded-lg shadow-md ml-10 px-4 py-4 max-w-xs min-w-fit space-y-4 w-96 pointer-events-auto"
+          class="transition hover:bg-foundation bg-white/80 dark:bg-neutral-800/90 dark:hover:bg-neutral-800 backdrop-blur-sm rounded-lg shadow-md mb-8 mx-2 px-4 py-4 gap-2 sm:gap-4 sm:ml-12 sm:max-w-xs pointer-events-auto"
         >
+          <div
+            class="sm:hidden flex items-center justify-center w-full gap-3 mt-1 mb-3"
+          >
+            <div
+              class="bg-primary rounded-full"
+              :class="index === 0 ? 'h-3 w-3' : 'h-2 w-2 opacity-50'"
+            ></div>
+            <div
+              class="bg-primary rounded-full"
+              :class="index === 1 ? 'h-3 w-3' : 'h-2 w-2 opacity-50'"
+            ></div>
+            <div
+              class="bg-primary rounded-full"
+              :class="index === 2 ? 'h-3 w-3' : 'h-2 w-2 opacity-50'"
+            ></div>
+          </div>
+
           <slot></slot>
 
-          <div class="flex items-center justify-between pointer-events-auto">
+          <div class="flex items-center justify-between pointer-events-auto mt-4">
             <slot name="actions">
               <FormButton text outlined size="sm" @click="$emit('skip')">
                 Skip
diff --git a/packages/frontend-2/components/tour/Segmentation.vue b/packages/frontend-2/components/tour/Segmentation.vue
index 33f83bbf0..8c65d7353 100644
--- a/packages/frontend-2/components/tour/Segmentation.vue
+++ b/packages/frontend-2/components/tour/Segmentation.vue
@@ -7,14 +7,14 @@
       <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
       <div
         v-show="step === 0"
-        class="bg-blue-500/50 border-4 border-primary-muted text-foreground-on-primary backdrop-blur shadow-lg rounded-xl p-4 space-y-4 absolute pointer-events-auto"
+        class="dark:bg-neutral-900/80 border dark:border-neutral-800 text-foreground backdrop-blur shadow-lg rounded-xl p-4 space-y-4 absolute pointer-events-auto mx-2"
         @mouseenter="rotateGently(Math.random() * 2)"
         @mouseleave="rotateGently(Math.random() * 2)"
       >
         <h2 class="text-center text-2xl font-bold">
           Welcome, {{ activeUser?.name?.split(' ')[0] }}!
         </h2>
-        <p class="text-center">
+        <p class="text-center text-sm">
           Let's get to know each other. What industry do you work in?
         </p>
         <div class="grid grid-cols-2 gap-4">
@@ -38,12 +38,12 @@
       <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
       <div
         v-show="step === 1"
-        class="bg-blue-500/40 border-4 border-primary-muted text-foreground-on-primary backdrop-blur shadow-lg rounded-xl p-4 space-y-4 absolute pointer-events-auto"
+        class="dark:bg-neutral-900/80 border dark:border-neutral-800 text-foreground backdrop-blur shadow-lg rounded-xl p-4 space-y-4 absolute pointer-events-auto mx-2"
         @mouseenter="rotateGently(Math.random() * 2)"
         @mouseleave="rotateGently(Math.random() * 2)"
       >
         <h2 class="text-center text-2xl font-bold">Thanks!</h2>
-        <p class="text-center">
+        <p class="text-center text-sm">
           Last thing! Please select the role that best describes you:
         </p>
         <div class="grid grid-cols-2 gap-4">
diff --git a/packages/frontend-2/components/tour/Slideshow.vue b/packages/frontend-2/components/tour/Slideshow.vue
index ea11f10a5..6ab81e9e5 100644
--- a/packages/frontend-2/components/tour/Slideshow.vue
+++ b/packages/frontend-2/components/tour/Slideshow.vue
@@ -12,7 +12,8 @@
       :item="item"
       :index="index"
       class="absolute"
-      :style="{ ...item.style }"
+      :class="isSmallerOrEqualSM ? 'bottom-0 left-0 w-screen' : ''"
+      :style="isSmallerOrEqualSM ? undefined : item.style"
       :show-controls="item.showControls"
       @skip="finishSlideshow()"
     >
@@ -59,6 +60,8 @@ import BasicViewerNavigation from '~~/components/tour/content/BasicViewerNavigat
 import OverlayModel from '~~/components/tour/content/OverlayModel.vue'
 import { useCameraUtilities } from '~~/lib/viewer/composables/ui'
 import { useMixpanel } from '~~/lib/core/composables/mp'
+import { useBreakpoints } from '@vueuse/core'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 
 const emit = defineEmits(['next'])
 
@@ -76,6 +79,9 @@ provide('slideshowItems', slideshowItems)
 
 const lastOpenIndex = ref(0)
 const mp = useMixpanel()
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+
+const isSmallerOrEqualSM = computed(() => breakpoints.smallerOrEqual('sm').value)
 
 const next = (currentIndex: number) => {
   if (currentIndex + 1 >= slideshowItems.value.length) {
diff --git a/packages/frontend-2/components/tour/content/BasicViewerNavigation.vue b/packages/frontend-2/components/tour/content/BasicViewerNavigation.vue
index 5c0a5f5e6..fee38c88d 100644
--- a/packages/frontend-2/components/tour/content/BasicViewerNavigation.vue
+++ b/packages/frontend-2/components/tour/content/BasicViewerNavigation.vue
@@ -1,18 +1,30 @@
 <template>
   <div>
     <p class="text-sm">
-      You can easily navigate it by
-      <b>rotating</b>
-      (left mouse button),
-      <b>zooming</b>
-      (scroll) and
-      <b>panning</b>
-      (right mouse button). Give it a try now!
-    </p>
-    <p v-if="hasMovedCamera" class="mt-2 text-sm font-bold flex items-center">
-      <CheckIcon class="w-4 h-4 text-success mr-2" />
-      {{ encouragements[controlEndCounts] }}
+      <strong>Navigate</strong>
+      easily with hand gestures:
     </p>
+    <div class="flex items-center justify-between gap-4 py-3 text-xs">
+      <div class="flex gap-1 items-center">
+        <IconHandRotate class="h-5 w-5" />
+        rotate
+      </div>
+      <div class="flex gap-1 items-center">
+        <IconHandSelect class="h-5 w-5" />
+        select
+      </div>
+      <div class="flex gap-1 items-center">
+        <IconHandZoom class="h-5 w-5" />
+        zoom
+      </div>
+    </div>
+    <div class="text-sm">
+      <div v-if="hasMovedCamera" class="font-bold flex items-center">
+        <CheckIcon class="w-4 h-4 text-success mr-2" />
+        <p>{{ encouragements[controlEndCounts] }}</p>
+      </div>
+      <p v-else>Give it a try now!</p>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/tour/content/OverlayModel.vue b/packages/frontend-2/components/tour/content/OverlayModel.vue
index d45484c53..cf5e59240 100644
--- a/packages/frontend-2/components/tour/content/OverlayModel.vue
+++ b/packages/frontend-2/components/tour/content/OverlayModel.vue
@@ -3,6 +3,8 @@
     <div v-show="!hasAddedOverlay">
       <p class="text-sm">
         Speckle allows you to load multiple models in the same viewer.
+      </p>
+      <p class="text-sm mt-2">
         <span v-show="!hasAddedOverlay">
           <FormButton
             size="sm"
diff --git a/packages/frontend-2/components/viewer/anchored-point/Thread.vue b/packages/frontend-2/components/viewer/anchored-point/Thread.vue
index 6ac13731a..a8f1b9262 100644
--- a/packages/frontend-2/components/viewer/anchored-point/Thread.vue
+++ b/packages/frontend-2/components/viewer/anchored-point/Thread.vue
@@ -115,7 +115,7 @@
             <div class="relative w-full sm:w-80 flex flex-col flex-1 justify-between">
               <div
                 ref="commentsContainer"
-                class="max-h-[calc(50vh)] sm:max-h-[300px] 2xl:max-h-[500px] pb-16 overflow-y-auto simple-scrollbar flex flex-col space-y-1 pr-1"
+                class="max-h-[calc(50vh)] sm:max-h-[300px] 2xl:max-h-[500px] pb-20 overflow-y-auto simple-scrollbar flex flex-col space-y-1 pr-1"
               >
                 <div
                   v-if="!isThreadResourceLoaded"
diff --git a/packages/frontend-2/components/viewer/anchored-point/thread/NewReply.vue b/packages/frontend-2/components/viewer/anchored-point/thread/NewReply.vue
index 49f886d20..c8e8b2fd1 100644
--- a/packages/frontend-2/components/viewer/anchored-point/thread/NewReply.vue
+++ b/packages/frontend-2/components/viewer/anchored-point/thread/NewReply.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable vuejs-accessibility/no-autofocus -->
 <template>
   <div
-    class="absolute bottom-0 left-0 bg-foundation pl-4 pr-3 py-2 sm:py-1.5 rounded-b flex items-center w-full"
+    class="absolute bottom-0 left-0 bg-foundation sm:bg-transparent pl-4 pr-3 py-2 sm:py-1.5 rounded-b flex items-center w-full"
   >
     <FormButton
       :icon-left="PaperClipIcon"
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 1d47bfc7c..418c3e1cf 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -38,7 +38,7 @@
               <div :class="scrolledFromTop && 'relative z-10 shadow-lg'">
                 <div
                   v-if="hasTitle"
-                  class="flex items-center justify-start rounded-t-lg shrink-0 h-16 px-4 sm:px-8 truncate text-xl sm:text-2xl font-bold"
+                  class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[4rem] py-2 px-4 sm:px-8 truncate text-xl sm:text-2xl font-bold"
                 >
                   <div class="w-full truncate pr-12">
                     {{ title }}