Refactor Admin and Warning components for responsive design and adjust PopoverWrapper to simplify portal usage. Update size and border properties for better UI consistency.

client/src/components/indicators/Admin.tsx

@@ -5,7 +5,7 @@ export default function Admin({ className }: { className?: string }) {
   return (
     <div
       className={clsx(
-        "size-[1.111vw] border-[1px] border-white rounded-full flex items-center justify-center bg-[#141414]",
+        "2xl:size-[0.972vw] size-[14px] 2xl:border-[0.069vw] border-[1px] border-white rounded-full flex items-center justify-center bg-[#141414]",
         className
       )}
     >

client/src/components/indicators/Warning.tsx

@@ -10,9 +10,10 @@ export default function Warning({
   return (
     <div
       className={clsx(
-        "2xl:size-[1.111vw] size-4 border-[1px] border-white rounded-full flex items-center justify-center ",
+        "rounded-full flex items-center justify-center ",
-        type === "caution" && "bg-[#F9A530]",
+        type === "caution" &&
-        type === "critical" && "bg-[#FF4517]",
+          "bg-[#F9A530] 2xl:size-[0.972vw] size-[14px] 2xl:border-[0.069vw] border-[1px] border-white",
+        type === "critical" && "bg-[#FF4517] 2xl:size-[1.111vw] size-4",
         className
       )}
     >

client/src/components/ui/PopoverWrapper.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "motion/react";
 import clsx from "clsx";
 
@@ -88,7 +87,7 @@ function PopoverWrapper({
     };
   };
 
-  return createPortal(
+  return (
     <AnimatePresence>
       {isOpened && (
         <motion.div
@@ -109,8 +108,7 @@ function PopoverWrapper({
           <div className="2xl:p-[0.278vw] p-1">{children}</div>
         </motion.div>
       )}
-    </AnimatePresence>,
+    </AnimatePresence>
-    document.body
   );
 }