From 3c130bf81342e9f249928a0103561a2a4d84d99b Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 3 Jun 2026 19:41:39 +0700
Subject: [PATCH] fix(ui): adjust mascot tooltip positioning and bubble pointer

Changes the mascot tooltip from a fixed bottom-left position to an absolute
centered position above the sidebar. Updates the decorative pointer
elements to use a downward-pointing triangle clip-path instead of a
side-aligned shape.
---
 services/frontend/src/widgets/Sidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/services/frontend/src/widgets/Sidebar.tsx b/services/frontend/src/widgets/Sidebar.tsx
index 816d2d9..330a9f6 100644
--- a/services/frontend/src/widgets/Sidebar.tsx
+++ b/services/frontend/src/widgets/Sidebar.tsx
@@ -116,7 +116,7 @@ export function Sidebar({
               initial={{ opacity: 0, x: -8, y: 6, scale: 0.96 }}
               animate={{ opacity: 1, x: 0, y: 0, scale: 1 }}
               transition={{ type: "spring", stiffness: 280, damping: 24 }}
-              className="pointer-events-none fixed bottom-[100px] left-20 z-[9999] w-64"
+              className="pointer-events-none absolute bottom-full left-1/2 z-[9999] mb-3 w-64 -translate-x-1/2"
             >
               <div className="relative rounded-2xl border border-sky-200/80 bg-white/95 px-4 py-3 text-left shadow-xl shadow-sky-100/70 backdrop-blur-md">
                 <p className="text-[11px] font-semibold uppercase tracking-wide text-primary/70">
@@ -126,10 +126,10 @@ export function Sidebar({
                   Halo! Saya mascot mu. Klik aku kalau mau tanya soal obrolan
                   atau moderasi ✨
                 </p>
-                {/* Outer: border layer — 1px larger, extends left & down to show border on diagonal/bottom edges */}
-                <div className="absolute -left-[13px] bottom-[7px] z-10 h-[21px] w-[21px] bg-sky-200/80 [clip-path:polygon(100%_0,0_100%,100%_70%)]" />
-                {/* Inner: fill layer — original position & size, matches bubble bg */}
-                <div className="absolute -left-3 bottom-2 z-20 h-5 w-5 bg-white/95 [clip-path:polygon(100%_0,0_100%,100%_70%)]" />
+                {/* Outer: border layer — triangle pointing down at center */}
+                <div className="absolute -bottom-[13px] left-1/2 z-10 h-[21px] w-[21px] -translate-x-1/2 bg-sky-200/80 [clip-path:polygon(0_0,100%_0,50%_100%)]" />
+                {/* Inner: fill layer — matches bubble bg */}
+                <div className="absolute -bottom-3 left-1/2 z-20 h-5 w-5 -translate-x-1/2 bg-white/95 [clip-path:polygon(0_0,100%_0,50%_100%)]" />
               </div>
             </motion.div>
           )}