From cc6ca6e6baf0324a0aa6b18cb31772aaaeaa0a4d Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Tue, 18 Nov 2025 21:42:01 +0000
Subject: [PATCH] fix: Back-to-top button positioning in mobile + consistent
 hover effects

Fixed two UI bugs in button styling:

**1. Back-to-top button position in mobile:**
- BEFORE: Button was included in flexbox layout but not positioned (defaulted to left)
- AFTER: Excluded from flexbox layout, positioned at bottom-right (1.5rem) - same as desktop
- Mobile flexbox layout now has 5 buttons (download, print, shortcuts, theme, info)
- Back-to-top stays independently positioned at bottom-right corner

**2. Consistent hover effects for all buttons:**
- BEFORE: Only info and shortcuts buttons had enhanced box-shadow on hover
- AFTER: All buttons (download, print, shortcuts, info, back-to-top) have consistent hover effects
- Added `box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important` to mobile hover states
- Creates unified "edge glow" effect across all button hovers

**Technical changes:**
- Split mobile button reset into two groups (flexbox buttons vs back-to-top)
- Enhanced mobile hover effect with box-shadow for visual consistency
- Maintains desktop behavior (back-to-top at bottom-right: 2rem)

Files modified: static/css/main.css
---
 static/css/main.css | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 28e6ddf..34140bb 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2883,12 +2883,11 @@ html {
         display: none !important;
     }
 
-    /* Reset fixed positioning for all buttons on mobile */
+    /* Reset fixed positioning for FLEXBOX buttons on mobile (exclude back-to-top) */
     .download-btn,
     .print-friendly-btn,
     .shortcuts-btn,
-    .info-button,
-    .back-to-top {
+    .info-button {
         position: fixed !important;
         bottom: 1.5rem !important;
         left: auto !important;
@@ -2899,6 +2898,15 @@ html {
         transform: none !important;
     }
 
+    /* Keep back-to-top button at bottom-right (same as desktop) */
+    .back-to-top {
+        position: fixed !important;
+        bottom: 1.5rem !important;
+        right: 1.5rem !important;
+        width: 50px !important;
+        height: 50px !important;
+    }
+
     /* Flexbox container behavior - buttons arrange themselves */
     /* Buttons will be positioned using JavaScript or individual positioning */
     /* For now, use fixed spacing from center */
@@ -2927,15 +2935,17 @@ html {
         left: calc(50% + 95px) !important; /* Fifth button (last) */
     }
 
-    /* Hover effects - only Y transform */
+    /* Hover effects - only Y transform + enhanced shadow */
     .download-btn:hover,
     .download-btn.pdf-hover-sync,
     .print-friendly-btn:hover,
     .print-friendly-btn.print-hover-sync,
     .shortcuts-btn:hover,
-    .info-button:hover {
+    .info-button:hover,
+    .back-to-top:hover {
         transform: translateY(-3px) !important;
         opacity: 1 !important;
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
     }
 
     /* Keep at-bottom state without transform */