From 284bdf6b4f745a4e6ba0b2eed798e952feecff2a Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@Saurabhs-MacBook-Air.local>
Date: Mon, 22 Jun 2026 12:14:09 +0530
Subject: [PATCH] fix: batch - onboarding viewport, tooltip overflow, share
 button colors #922 #1267 #1087

---
 src/components/Footer.tsx            |  2 +-
 src/components/NativeShareButton.tsx |  2 +-
 src/components/OnboardingTour.tsx    | 40 +++++++++++++++++-----------
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9c8e35e9..b8a608ea 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -8,7 +8,7 @@ export default function Footer() {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <footer className="w-full border-t border-[var(--border)] bg-[var(--bg)] text-[var(--text)] px-6 py-16 mt-20 transition-colors duration-300">
+    <footer className="w-full border-t border-[var(--border)] bg-[var(--bg)] text-[var(--text)] px-6 py-16 mt-20 transition-colors duration-300 overflow-x-hidden">
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8">
 
         {/* Brand Section */}
diff --git a/src/components/NativeShareButton.tsx b/src/components/NativeShareButton.tsx
index 39eeb723..6d5d0f1a 100644
--- a/src/components/NativeShareButton.tsx
+++ b/src/components/NativeShareButton.tsx
@@ -79,7 +79,7 @@ export function NativeShareButton({
       disabled={isSharing}
       type="button"
       aria-label="Share video"
-      className={`inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white transition-colors duration-200 bg-blue-600 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
+      className={`inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white transition-colors duration-200 bg-[var(--accent)] rounded-md shadow-sm hover:bg-[var(--accent-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
     >
       <svg
         className="w-5 h-5 mr-2 -ml-1"
diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
index c1cef066..f4ea04d9 100644
--- a/src/components/OnboardingTour.tsx
+++ b/src/components/OnboardingTour.tsx
@@ -63,6 +63,9 @@ function getTooltipStyle(
   const tw = tooltip?.offsetWidth ?? 320;
   const th = tooltip?.offsetHeight ?? 140;
 
+  const vw = typeof window !== "undefined" ? window.innerWidth : 0;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 0;
+
   const sr = {
     top: rect.top - PADDING,
     left: rect.left - PADDING,
@@ -70,29 +73,34 @@ function getTooltipStyle(
     height: rect.height + PADDING * 2,
   };
 
+  let top = 0;
+  let left = 0;
+
   switch (position) {
     case "top":
-      return {
-        top: sr.top - th - TOOLTIP_OFFSET,
-        left: sr.left + sr.width / 2 - tw / 2,
-      };
+      top = sr.top - th - TOOLTIP_OFFSET;
+      left = sr.left + sr.width / 2 - tw / 2;
+      break;
     case "left":
-      return {
-        top: sr.top + sr.height / 2 - th / 2,
-        left: sr.left - tw - TOOLTIP_OFFSET,
-      };
+      top = sr.top + sr.height / 2 - th / 2;
+      left = sr.left - tw - TOOLTIP_OFFSET;
+      break;
     case "right":
-      return {
-        top: sr.top + sr.height / 2 - th / 2,
-        left: sr.left + sr.width + TOOLTIP_OFFSET,
-      };
+      top = sr.top + sr.height / 2 - th / 2;
+      left = sr.left + sr.width + TOOLTIP_OFFSET;
+      break;
     case "bottom":
     default:
-      return {
-        top: sr.top + sr.height + TOOLTIP_OFFSET,
-        left: sr.left + sr.width / 2 - tw / 2,
-      };
+      top = sr.top + sr.height + TOOLTIP_OFFSET;
+      left = sr.left + sr.width / 2 - tw / 2;
+      break;
   }
+
+  // Clamp within viewport so tooltip never overflows
+  top = Math.max(TOOLTIP_OFFSET, Math.min(top, vh - th - TOOLTIP_OFFSET));
+  left = Math.max(TOOLTIP_OFFSET, Math.min(left, vw - tw - TOOLTIP_OFFSET));
+
+  return { top, left };
 }
 
 interface SpotlightProps {