Fix: Presentation fixes (#5629)

packages/frontend-2/components/presentation/Actions.vue

@@ -6,8 +6,9 @@
       <FormButton v-if="isLoggedIn" @click="showShareDialog = true">Share</FormButton>
 
       <PresentationFloatingPanelButton
-        v-tippy="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
-        class="hidden md:flex touch:hidden"
+        v-if="isMdOrLarger"
+        v-tippy="getTooltipProps(isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen')"
+        class="touch:hidden"
         @click="toggleFullscreen"
       >
         <LucideMinimize
@@ -25,7 +26,7 @@
       </PresentationFloatingPanelButton>
 
       <PresentationFloatingPanelButton
-        v-tippy="isSidebarOpen ? 'Hide slide info' : 'Show slide info'"
+        v-tippy="getTooltipProps(isSidebarOpen ? 'Hide slide info' : 'Show slide info')"
         :is-active="isSidebarOpen"
         @click="emit('toggleSidebar')"
       >
@@ -39,6 +40,8 @@
 
 <script setup lang="ts">
 import { LucideInfo, LucideMaximize, LucideMinimize } from 'lucide-vue-next'
+import { useBreakpoints } from '@vueuse/core'
+import { TailwindBreakpoints } from '~/lib/common/helpers/tailwind'
 
 const emit = defineEmits<{
   (e: 'toggleSidebar'): void
@@ -47,6 +50,9 @@ const emit = defineEmits<{
 const isSidebarOpen = defineModel<boolean>('is-sidebar-open')
 
 const { isLoggedIn } = useActiveUser()
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+const isMdOrLarger = breakpoints.greaterOrEqual('md')
+const { getTooltipProps } = useSmartTooltipDelay()
 
 const isFullscreen = ref(false)
 const showShareDialog = ref(false)

packages/frontend-2/components/presentation/Header.vue

@@ -2,7 +2,9 @@
   <PresentationFloatingPanel>
     <div class="flex items-center justify-between space-x-2">
       <PresentationFloatingPanelButton
-        v-tippy="isSidebarOpen ? 'Hide slides list' : 'Show slides list'"
+        v-tippy="
+          getTooltipProps(isSidebarOpen ? 'Hide slides list' : 'Show slides list')
+        "
         :active="isSidebarOpen"
         @click="emit('toggleSidebar')"
       >
@@ -50,4 +52,5 @@ const isSidebarOpen = defineModel<boolean>('is-sidebar-open')
 const {
   response: { presentation }
 } = useInjectedPresentationState()
+const { getTooltipProps } = useSmartTooltipDelay()
 </script>

packages/frontend-2/components/presentation/LeftSidebar.vue

@@ -1,6 +1,8 @@
+<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 <template>
   <div class="w-full sm:w-auto">
-    <div class="fixed inset-0 z-10 lg:hidden">
+    <div class="fixed inset-0 z-10 lg:hidden" tabindex="-1" @click="emit('close')">
       <div class="absolute inset-0 bg-black/20" />
     </div>
 
@@ -59,6 +61,10 @@ graphql(`
   }
 `)
 
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
 const { isLoggedIn } = useActiveUser()
 const {
   response: { workspace }

packages/frontend-2/components/presentation/PageWrapper.vue

@@ -36,6 +36,7 @@
       <PresentationLeftSidebar
         v-if="isLeftSidebarOpen"
         class="absolute left-0 top-0 md:relative flex-shrink-0 z-30"
+        @close="isLeftSidebarOpen = false"
       />
 
       <div class="flex-1 z-0 flex flex-col lg:flex-row pb-[11rem] lg:pb-0">

packages/frontend-2/components/presentation/SlideIndicator.vue

@@ -11,9 +11,11 @@
 
     <div
       v-if="showSlideList"
-      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 max-h-[75vh] overflow-y-auto w-56 simple-scrollbar bg-foundation border border-outline-3 rounded-2xl p-2 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
+      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 w-56 overflow-hidden bg-foundation border border-outline-3 rounded-2xl p-2 pr-0 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
     >
-      <PresentationSlideList class="w-full" hide-title />
+      <div class="simple-scrollbar overflow-y-auto max-h-[75vh] pr-2">
+        <PresentationSlideList class="w-full" hide-title />
+      </div>
     </div>
   </div>
 </template>

packages/frontend-2/components/presentation/controls/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-tippy="tooltip">
+  <div v-tippy="getTooltipProps(tooltip)">
     <button
       :disabled="disabled"
       class="bg-foundation size-8 rounded-md flex items-center justify-center hover:bg-primary-muted disabled:hover:bg-transparent text-foreground disabled:text-foreground-3"
@@ -19,4 +19,6 @@ defineProps<{
   disabled?: boolean
   tooltip?: string
 }>()
+
+const { getTooltipProps } = useSmartTooltipDelay()
 </script>

packages/frontend-2/components/presentation/controls/Controls.vue

@@ -67,6 +67,11 @@ useEventListener(
       event.preventDefault()
       event.stopPropagation()
       event.stopImmediatePropagation()
+
+      // Remove focus from any currently focused element to prevent blue outline
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur()
+      }
     }
     if (event.key === 'ArrowLeft') {
       if (disablePrevious.value) return

packages/frontend-2/components/presentation/slideList/Slide.vue

@@ -1,8 +1,10 @@
 <template>
   <li class="w-full" :class="{ 'pb-0': hideTitle }">
     <button
-      class="bg-foundation-page rounded-md overflow-hidden border border-outline-3 transition-all duration-200 hover:!border-outline-5 w-full"
-      :class="[isCurrentSlide ? '!border-outline-1' : '']"
+      class="bg-foundation-page rounded-md overflow-hidden border transition-all duration-200 w-full"
+      :class="[
+        isCurrentSlide ? 'border-outline-1' : 'border-outline-3 hover:border-outline-5'
+      ]"
       @click="onSelectSlide"
     >
       <img