michal.cukrowski/j_kedzierski
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): reduce floating whatsapp button size and adjust margins on mobile to prevent overflow

Browse Source
This commit is contained in:
MichalC
2026-09-17 23:56:58 +02:00
parent f21de6dd5e
commit 25578fcc54
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FloatingWhatsApp/index.tsx
+3 -3
View File
@@ -35,7 +35,7 @@ export const FloatingWhatsApp = ({ whatsappLink, ariaLabel }: { whatsappLink: st
<AnimatePresence>
{isVisible && (
<motion.div
className={`fixed right-6 z-40 transition-all duration-500 ease-in-out ${bottomClass}`}
className={`fixed right-6 md:right-8 z-40 transition-all duration-500 ease-in-out ${bottomClass}`}
initial={{ scale: 1.5, rotate: 10, opacity: 0 }}
animate={{ scale: 1, rotate: 0, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
@@ -45,10 +45,10 @@ export const FloatingWhatsApp = ({ whatsappLink, ariaLabel }: { whatsappLink: st
href={whatsappLink}
target="_blank"
rel="noopener noreferrer"
className="flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-[#1C1B1A] shadow-lg transition-transform hover:scale-105 hover:bg-[#20bd5a] focus:outline-none focus:ring-4 focus:ring-[#25D366]/50"
className="flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-full bg-[#25D366] text-[#1C1B1A] shadow-lg transition-transform hover:scale-105 hover:bg-[#20bd5a] focus:outline-none focus:ring-4 focus:ring-[#25D366]/50"
aria-label={ariaLabel}
>
<MessageCircle size={28} />
<MessageCircle className="w-6 h-6 md:w-7 md:h-7" />
</a>
</motion.div>
)}