fix: Position theme switcher and info button tooltips on TOP for mobile

The theme switcher and info button tooltips were appearing on the RIGHT
in mobile view instead of on TOP (like macOS Dock style) because they
didn't have the .fixed-btn class and weren't included in the mobile
media query rules.

Changes:
- static/css/04-interactive/_tooltips.css: Add .color-theme-switcher and
  .info-button selectors to mobile @media (max-width: 900px) rules
- Now tooltips appear ABOVE these buttons on mobile with bottom: calc(100% + 8px)

Testing:
- Added mobile tooltip position test
- Verified theme switcher and info tooltips now positioned on top on mobile
- Desktop behavior unchanged (tooltips still on right)

Mobile tooltip positioning now consistent across ALL buttons:
 All bottom dock buttons show tooltips on TOP (macOS Dock style)
This commit is contained in:
juanatsap
2025-11-20 20:01:57 +00:00
parent e5c824970c
commit ca758882ef
2 changed files with 137 additions and 2 deletions
+6 -2
View File
@@ -126,7 +126,9 @@
}
/* Fixed buttons (left side) get TOP tooltips on mobile - like macOS Dock */
.fixed-btn.has-tooltip::before {
.fixed-btn.has-tooltip::before,
.color-theme-switcher.has-tooltip::before,
.info-button.has-tooltip::before {
bottom: calc(100% + 8px); /* 8px gap above button */
left: 50%;
top: auto;
@@ -134,7 +136,9 @@
transform: translateX(-50%) scale(0.8);
}
.fixed-btn.has-tooltip:hover::before {
.fixed-btn.has-tooltip:hover::before,
.color-theme-switcher.has-tooltip:hover::before,
.info-button.has-tooltip:hover::before {
transform: translateX(-50%) scale(1);
}