From 671cbf9903e8e0fdf205edf09278cb5b733067ca Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Fri, 3 Oct 2025 10:22:06 +0200
Subject: [PATCH] Fix: Presentation fixes (#5629)

---
 .../frontend-2/components/presentation/Actions.vue   | 12 +++++++++---
 .../frontend-2/components/presentation/Header.vue    |  5 ++++-
 .../components/presentation/LeftSidebar.vue          |  8 +++++++-
 .../components/presentation/PageWrapper.vue          |  1 +
 .../components/presentation/SlideIndicator.vue       |  6 ++++--
 .../components/presentation/controls/Button.vue      |  4 +++-
 .../components/presentation/controls/Controls.vue    |  5 +++++
 .../components/presentation/slideList/Slide.vue      |  6 ++++--
 8 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-2/components/presentation/Actions.vue b/packages/frontend-2/components/presentation/Actions.vue
index 8fa6dbc3d..aa26224bb 100644
--- a/packages/frontend-2/components/presentation/Actions.vue
+++ b/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)
diff --git a/packages/frontend-2/components/presentation/Header.vue b/packages/frontend-2/components/presentation/Header.vue
index ed16b4853..c32357338 100644
--- a/packages/frontend-2/components/presentation/Header.vue
+++ b/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>
diff --git a/packages/frontend-2/components/presentation/LeftSidebar.vue b/packages/frontend-2/components/presentation/LeftSidebar.vue
index 90beacf02..6c6eb7f14 100644
--- a/packages/frontend-2/components/presentation/LeftSidebar.vue
+++ b/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 }
diff --git a/packages/frontend-2/components/presentation/PageWrapper.vue b/packages/frontend-2/components/presentation/PageWrapper.vue
index cfc9aa88e..b17987044 100644
--- a/packages/frontend-2/components/presentation/PageWrapper.vue
+++ b/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">
diff --git a/packages/frontend-2/components/presentation/SlideIndicator.vue b/packages/frontend-2/components/presentation/SlideIndicator.vue
index e1e4f56d6..ff6923350 100644
--- a/packages/frontend-2/components/presentation/SlideIndicator.vue
+++ b/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>
diff --git a/packages/frontend-2/components/presentation/controls/Button.vue b/packages/frontend-2/components/presentation/controls/Button.vue
index 2fef4682a..a6b10cae6 100644
--- a/packages/frontend-2/components/presentation/controls/Button.vue
+++ b/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>
diff --git a/packages/frontend-2/components/presentation/controls/Controls.vue b/packages/frontend-2/components/presentation/controls/Controls.vue
index 3aacd8c89..cb62a2ece 100644
--- a/packages/frontend-2/components/presentation/controls/Controls.vue
+++ b/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
diff --git a/packages/frontend-2/components/presentation/slideList/Slide.vue b/packages/frontend-2/components/presentation/slideList/Slide.vue
index 6400530f8..50f7a2933 100644
--- a/packages/frontend-2/components/presentation/slideList/Slide.vue
+++ b/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