From 2497dbaa3eee0ce0183181e37904c245888cd40f Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 20 Nov 2025 18:31:31 +0000
Subject: [PATCH] fix: Correct fixed button tooltip positioning and add mobile
 support

- Remove tooltip-left class from zoom and shortcuts buttons (all left-side buttons show tooltips on RIGHT)
- Add mobile CSS rules for fixed-btn tooltips to appear on TOP (like macOS Dock)
- Update button template comments to reflect correct positioning
- Mobile: All fixed buttons now show tooltips above (top position)
- Desktop: All left-side fixed buttons show tooltips on right
---
 static/css/04-interactive/_tooltips.css           | 15 ++++++++++++++-
 templates/partials/widgets/shortcuts-button.html  |  4 ++--
 .../partials/widgets/zoom-toggle-button.html      |  4 ++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/static/css/04-interactive/_tooltips.css b/static/css/04-interactive/_tooltips.css
index ba2c6e2..8a534f1 100644
--- a/static/css/04-interactive/_tooltips.css
+++ b/static/css/04-interactive/_tooltips.css
@@ -110,7 +110,7 @@
    MOBILE RESPONSIVE BEHAVIOR
    ============================================================================ */
 
-/* Mobile: Switch action bar tooltips to TOP position (like macOS Dock) */
+/* Mobile: Switch all tooltips to TOP position (like macOS Dock) */
 @media (max-width: 900px) {
     /* Action bar buttons get TOP tooltips on mobile */
     .action-btn.has-tooltip::before {
@@ -125,6 +125,19 @@
         transform: translateX(-50%) scale(1);
     }
 
+    /* Fixed buttons (left side) get TOP tooltips on mobile - like macOS Dock */
+    .fixed-btn.has-tooltip::before {
+        bottom: calc(100% + 8px); /* 8px gap above button */
+        left: 50%;
+        top: auto;
+        right: auto;
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    .fixed-btn.has-tooltip:hover::before {
+        transform: translateX(-50%) scale(1);
+    }
+
     /* Back-to-top button keeps LEFT position on mobile */
     .back-to-top.has-tooltip.tooltip-left::before {
         right: calc(100% + 8px);
diff --git a/templates/partials/widgets/shortcuts-button.html b/templates/partials/widgets/shortcuts-button.html
index 7c226b5..f4b183d 100644
--- a/templates/partials/widgets/shortcuts-button.html
+++ b/templates/partials/widgets/shortcuts-button.html
@@ -1,8 +1,8 @@
 {{define "shortcuts-button"}}
-<!-- Keyboard Shortcuts Button (Fixed Right) -->
+<!-- Keyboard Shortcuts Button (Fixed Left) -->
 <button
     id="shortcuts-button"
-    class="fixed-btn shortcuts-btn no-print has-tooltip tooltip-left"
+    class="fixed-btn shortcuts-btn no-print has-tooltip"
     onclick="document.getElementById('shortcuts-modal').showModal()"
     aria-label="{{if eq .Lang "es"}}Atajos de teclado{{else}}Keyboard shortcuts{{end}}"
     data-tooltip="{{if eq .Lang "es"}}Atajos de teclado (?){{else}}Keyboard shortcuts (?){{end}}">
diff --git a/templates/partials/widgets/zoom-toggle-button.html b/templates/partials/widgets/zoom-toggle-button.html
index 44d0fa0..26b89d8 100644
--- a/templates/partials/widgets/zoom-toggle-button.html
+++ b/templates/partials/widgets/zoom-toggle-button.html
@@ -1,8 +1,8 @@
 {{define "zoom-toggle-button"}}
-<!-- Zoom Toggle Button (Fixed Right, above shortcuts button) -->
+<!-- Zoom Toggle Button (Fixed Left, above shortcuts button) -->
 <button
     id="zoom-toggle-button"
-    class="fixed-btn zoom-toggle-btn no-print has-tooltip tooltip-left"
+    class="fixed-btn zoom-toggle-btn no-print has-tooltip"
     aria-label="{{if eq .Lang "es"}}Alternar control de zoom{{else}}Toggle zoom control{{end}}"
     data-tooltip="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"
     _="on mouseenter call highlightZoomControl(true)