middle in mmobile

src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx

@@ -56,7 +56,7 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover,
 
   return (
     <>
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center justify-center sm:justify-start gap-2">
         {TABS.map(({ id, icon: Icon, labelKey }) => {
           const isActive = activeTab === id;
           const hasPopover = POPOVER_TABS.has(id);

src/pages/taskmanager/components/task-detail/TaskDetailPopoverPanel.tsx

@@ -10,8 +10,10 @@ type Props = {
   onClose?: () => void;
 };
 
+const MOBILE_BREAKPOINT = 640;
+
 const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, width = 300, onClose }) => {
-  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const [position, setPosition] = useState<{ top: number; left: number; width: number } | null>(null);
   const panelRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
@@ -21,12 +23,21 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
 
       const rect = anchor.getBoundingClientRect();
       const padding = 8;
-      let left = rect.right - width;
+      const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
-      left = Math.max(padding, Math.min(left, window.innerWidth - width - padding));
+      const panelWidth = Math.min(width, window.innerWidth - padding * 2);
+
+      let left: number;
+      if (isMobile) {
+        left = (window.innerWidth - panelWidth) / 2;
+      } else {
+        left = rect.right - panelWidth;
+        left = Math.max(padding, Math.min(left, window.innerWidth - panelWidth - padding));
+      }
 
       setPosition({
         top: rect.bottom + 8,
         left,
+        width: panelWidth,
       });
     };
 
@@ -59,7 +70,7 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
   return createPortal(
     <div
       ref={panelRef}
-      style={{ top: position.top, left: position.left, width }}
+      style={{ top: position.top, left: position.left, width: position.width }}
       className={clx("fixed z-[80] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80", className)}
     >
       {children}