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>
2023-11-08 11:37:59 +00:00
parent aaf6a7069e
commit ee352e8ddb
17 changed files with 300 additions and 56 deletions
@@ -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>
@@ -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,
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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
@@ -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
@@ -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">
@@ -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) {
@@ -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">
@@ -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"
@@ -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"
@@ -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"
@@ -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 }}