feat: bugfix

app/components/Card/index.tsx

@@ -14,7 +14,7 @@ export default function Card(props: CardProps) {
       {title && (
         <div
           className={`
-            capitalize font-black font-setting-card-title text-sm-mobile font-weight-setting-card-title
+            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title
             mb-3
 
             ml-3

app/components/HoverPopover/index.tsx

@@ -8,6 +8,7 @@ export interface PopoverProps {
   popoverClassName?: string;
   noArrow?: boolean;
   align?: ComponentProps<typeof HoverCard.Content>["align"];
+  openDelay?: number;
 }
 
 export default function HoverPopover(props: PopoverProps) {
@@ -18,9 +19,10 @@ export default function HoverPopover(props: PopoverProps) {
     popoverClassName,
     noArrow = false,
     align,
+    openDelay = 300,
   } = props;
   return (
-    <HoverCard.Root>
+    <HoverCard.Root openDelay={openDelay}>
       <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
       <HoverCard.Portal>
         <HoverCard.Content

app/components/MenuLayout/index.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from "react-router-dom";
 import {
   DEFAULT_SIDEBAR_WIDTH,
   MAX_SIDEBAR_WIDTH,
@@ -9,13 +8,13 @@ import useDrag from "@/app/hooks/useDrag";
 import useMobileScreen from "@/app/hooks/useMobileScreen";
 import { updateGlobalCSSVars } from "@/app/utils/client";
 import { ComponentType, useRef, useState } from "react";
-
-import DragIcon from "@/app/icons/drag.svg";
 import { useAppConfig } from "@/app/store/config";
 
 export interface MenuWrapperInspectProps {
+  setExternalProps?: (v: Record<string, any>) => void;
   setShowPanel?: (v: boolean) => void;
   showPanel?: boolean;
+  [k: string]: any;
 }
 
 export default function MenuLayout<
@@ -27,8 +26,7 @@ export default function MenuLayout<
 ) {
   return function MenuHood(props: ListComponentProps & PanelComponentProps) {
     const [showPanel, setShowPanel] = useState(false);
-
-    const navigate = useNavigate();
+    const [externalProps, setExternalProps] = useState({});
     const config = useAppConfig();
 
     const isMobileScreen = useMobileScreen();
@@ -62,38 +60,34 @@ export default function MenuLayout<
     return (
       <div
         className={`
-        h-[100%] w-[100%] relative bg-center
-        md:flex 
-      `}
+          w-[100%] relative bg-center
+          md:flex md:my-2.5
+        `}
       >
         <div
           className={`
             flex flex-col px-6 
             h-[100%] 
             max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
-            md:relative md:basis-sidebar md:h-[calc(100%-1.25rem)] md:pb-6  md:rounded-md md:my-2.5 md:bg-menu
+            md:relative md:basis-sidebar  md:pb-6  md:rounded-md md:bg-menu
           `}
-          // onClick={(e) => {
-          //   if (e.target === e.currentTarget) {
-          //     navigate(Path.Home);
-          //   }
-          // }}
         >
           <ListComponent
             {...props}
             setShowPanel={setShowPanel}
+            setExternalProps={setExternalProps}
             showPanel={showPanel}
           />
         </div>
         {!isMobileScreen && (
           <div
-            className={`group/menu-dragger h-[100%] cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
+            className={`group/menu-dragger cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
             onPointerDown={(e) => {
               startDragWidth.current = config.sidebarWidth;
               onDragStart(e as any);
             }}
           >
-            <div className="w-[1px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger">
+            <div className="w-[2px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger h-[100%] rounded-[2px]">
               &nbsp;
             </div>
           </div>
@@ -108,7 +102,9 @@ export default function MenuLayout<
         >
           <PanelComponent
             {...props}
+            {...externalProps}
             setShowPanel={setShowPanel}
+            setExternalProps={setExternalProps}
             showPanel={showPanel}
           />
         </div>

app/components/Popover/index.tsx

@@ -312,17 +312,21 @@ export default function Popover(props: PopoverProps) {
 
   return (
     <div
-      className={`group relative ${className}`}
+      className={`group/popover relative ${className}`}
       onPointerEnter={(e) => {
         getRelativePosition(e.currentTarget, "");
         e.preventDefault();
         e.stopPropagation();
       }}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
     >
       {children}
       <div
         className={`
-          hidden group-hover:block 
+          hidden group-hover/popover:block 
           ${noArrow ? "opacity-0" : ""} 
           bg-inherit 
           ${arrowClassName}
@@ -332,9 +336,14 @@ export default function Popover(props: PopoverProps) {
         <ArrowIcon sibling={popoverRef} />
       </div>
       <div
-        className={`hidden group-hover:block whitespace-nowrap ${popoverCommonClass} ${placementClassName} ${popoverClassName}`}
+        className={`
+          hidden group-hover/popover:block whitespace-nowrap 
+          ${popoverCommonClass} 
+          ${placementClassName} 
+          ${popoverClassName}
+        `}
         ref={popoverRef}
-        style={{ zIndex: 10000 }}
+        style={{ zIndex: baseZIndex + 1 }}
       >
         {content}
       </div>

app/components/Screen/index.tsx

@@ -28,9 +28,9 @@ export default function Screen(props: ScreenProps) {
   return (
     <div
       className={`
-        bg-global flex h-[100%] w-[100%] bg-center
-        max-md:relative  max-md:flex-col-reverse  
-        md:overflow-hidden
+         flex h-[100%] w-[100%] bg-center
+        max-md:relative  max-md:flex-col-reverse  max-md:bg-global-mobile
+        md:overflow-hidden md:bg-global
       `}
       style={{
         direction: getLang() === "ar" ? "rtl" : "ltr",
@@ -54,7 +54,7 @@ export default function Screen(props: ScreenProps) {
             className={`
               h-[100%]
               max-md:w-[100%] 
-              md:flex-1 md:min-w-0 md:overflow-hidden
+              md:flex-1 md:min-w-0 md:overflow-hidden md:flex
             `}
             id={SlotID.AppBody}
             style={{

app/components/Switch/index.tsx

@@ -15,11 +15,15 @@ export default function Switch(props: SwitchProps) {
     <RadixSwitch.Root
       checked={value}
       onCheckedChange={onChange}
-      className={` cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${
-        value
-          ? "bg-switch-checked justify-end"
-          : "bg-switch-unchecked justify-start"
-      }`}
+      className={` 
+        cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md
+        ${switchClassName} 
+        ${
+          value
+            ? "bg-switch-checked justify-end"
+            : "bg-switch-unchecked justify-start"
+        }
+      `}
     >
       <RadixSwitch.Thumb
         className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`}