From 90dcac5b9baee821df5b52ea54ae205711e3b2f0 Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Fri, 14 Nov 2025 00:28:50 +0900
Subject: [PATCH] fix: detect parent size using `ResizeObserver`

---
 .../components/PlayerPopoverTrigger.tsx       | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/player/components/PlayerPopoverTrigger.tsx b/src/player/components/PlayerPopoverTrigger.tsx
index 3e0eab3..d2bc3d9 100644
--- a/src/player/components/PlayerPopoverTrigger.tsx
+++ b/src/player/components/PlayerPopoverTrigger.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import { PopoverTrigger } from '@/components/ui/popover';
 import icon from '@/assets/icon.png';
 import { BorderTrail } from '@/components/ui/border-trail';
@@ -8,18 +9,38 @@ interface PlayerPopoverTriggerProps {
 }
 
 export default function PlayerPopoverTrigger({ onClick, isPlaying }: PlayerPopoverTriggerProps) {
+  const containerRef = useRef<HTMLLIElement>(null);
+  const [parentWidth, setParentWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const root = containerRef.current?.getRootNode() as ShadowRoot | Document | null;
+    const host = (root instanceof ShadowRoot ? root.host : null) as HTMLElement | null;
+
+    if (!host) return console.warn('dotbugi-player host not found');
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setParentWidth(entry.contentRect.width);
+    });
+
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
+
+  const isCompact = parentWidth < 190;
+
   return (
     <PopoverTrigger asChild>
       <li
+        ref={containerRef}
         onClick={onClick}
         className="relative flex justify-center items-center text-white text-2xl 
-            font-bold cursor-pointer h-[61px] px-4 bg-transparent overflow-visible 
-            "
+                   font-bold cursor-pointer h-[61px] px-4 bg-transparent overflow-visible"
       >
         <div className="flex w-full justify-start items-center z-10 px-4">
-          <img src={icon} alt="돋부기 아이콘" className="w-10 h-10 mr-4" />
+          <img src={icon} alt="돋부기 아이콘" className={`${isCompact ? 'w-6 h-6 mr-2' : 'w-10 h-10 mr-4'}`} />
           <div className="flex justify-between w-full items-center">
-            <h5 className="m-1">돋부기 🔎</h5>
+            {!isCompact && <h5 className="m-1">돋부기 🔎</h5>}
             <span className={`w-4 h-4 rounded-full ${isPlaying ? 'bg-green-700' : 'bg-red-700'}`} />
           </div>
         </div>