From f6960fd3ec8c02d85b8ec9d74fb046575a15991c Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Wed, 19 Aug 2026 11:27:40 -0400
Subject: [PATCH] Fix cart button overlapping scroll-to-top button, make it
 more compact

Both were fixed bottom-right with no awareness of each other. Scroll-to-top
now lifts above the cart pill when the cart has items; the pill itself
drops the redundant "View order" text and shrinks padding/font.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 estore/src/components/CartFab.tsx     | 7 +++----
 estore/src/components/ScrollToTop.tsx | 5 +++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/estore/src/components/CartFab.tsx b/estore/src/components/CartFab.tsx
index f58833d..aa00d21 100644
--- a/estore/src/components/CartFab.tsx
+++ b/estore/src/components/CartFab.tsx
@@ -20,13 +20,13 @@ export default function CartFab() {
         color:        '#fff',
         border:       'none',
         borderRadius: '999px',
-        padding:      '0.75rem 1.25rem',
+        padding:      '0.55rem 1rem',
         display:      'flex',
         alignItems:   'center',
-        gap:          '0.6rem',
+        gap:          '0.45rem',
         boxShadow:    '0 6px 20px rgba(0,0,0,0.22)',
         cursor:       'pointer',
-        fontSize:     '0.95rem',
+        fontSize:     '0.85rem',
         fontWeight:   'bold',
         fontFamily:   'inherit',
         transition:   'transform 0.15s, box-shadow 0.15s',
@@ -42,7 +42,6 @@ export default function CartFab() {
     >
       <i className="fa-solid fa-bag-shopping" />
       <span>{totalItems} {totalItems === 1 ? 'item' : 'items'}</span>
-      <span style={{ opacity: 0.75, fontWeight: 'normal', fontSize: '0.8rem' }}>· View order</span>
     </button>
   )
 }
diff --git a/estore/src/components/ScrollToTop.tsx b/estore/src/components/ScrollToTop.tsx
index fba208f..66d21ab 100644
--- a/estore/src/components/ScrollToTop.tsx
+++ b/estore/src/components/ScrollToTop.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import { useCart } from '@/context/CartContext'
 
 export default function ScrollToTop() {
-  const { drawerOpen } = useCart()
+  const { drawerOpen, totalItems } = useCart()
   const [scrolled, setScrolled] = useState(false)
 
   useEffect(() => {
@@ -24,9 +24,10 @@ export default function ScrollToTop() {
       onClick={() => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })}
       style={{
         position:        'fixed',
-        bottom:          '12px',
+        bottom:          totalItems > 0 ? '76px' : '12px',
         right:           '10px',
         zIndex:          98,
+        transition:      'bottom 0.15s',
         border:          '1px solid #363636',
         outline:         'none',
         background:      '#94d601',