From a0e580878e6ca586a4bd1c13d4b36236e72268af Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Wed, 7 Jan 2026 23:40:03 +0700
Subject: [PATCH] fix(admin): mount popover portal inside app container

Instead of mounting to body (which breaks scoped styles), we now
mount the popover portal to #woonoow-admin-app. This ensures
dropdowns inherit the correct CSS variables and styling.
---
 admin-spa/src/components/ui/popover.tsx       |  2 +-
 admin-spa/src/index.css                       | 67 -------------------
 .../src/routes/Orders/partials/OrderForm.tsx  |  1 -
 3 files changed, 1 insertion(+), 69 deletions(-)

diff --git a/admin-spa/src/components/ui/popover.tsx b/admin-spa/src/components/ui/popover.tsx
index fdcb511..30742b1 100644
--- a/admin-spa/src/components/ui/popover.tsx
+++ b/admin-spa/src/components/ui/popover.tsx
@@ -13,7 +13,7 @@ const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+  <PopoverPrimitive.Portal container={document.getElementById("woonoow-admin-app")}>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
diff --git a/admin-spa/src/index.css b/admin-spa/src/index.css
index 1d30554..a932dce 100644
--- a/admin-spa/src/index.css
+++ b/admin-spa/src/index.css
@@ -134,72 +134,6 @@
   box-shadow: none !important;
 }
 
-/* Fix cmdk/command styles that might be missing */
-[cmdk-root] {
-  max-width: 100%;
-  width: 100%;
-  background-color: transparent;
-}
-
-[cmdk-list] {
-  min-height: 100px;
-  /* Ensure non-empty look */
-  max-height: 300px;
-  overflow: auto;
-  overscroll-behavior: contain;
-  transition: 100ms ease;
-  padding: 4px;
-}
-
-[cmdk-item] {
-  content-visibility: auto;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 14px;
-  padding: 8px 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--popover-foreground);
-  user-select: none;
-  will-change: background, color;
-  transition: all 150ms ease;
-}
-
-[cmdk-item][data-selected="true"] {
-  background: var(--accent);
-  color: var(--accent-foreground);
-}
-
-[cmdk-item][data-disabled="true"] {
-  color: var(--muted-foreground);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-[cmdk-empty] {
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 64px;
-  white-space: pre-wrap;
-  color: var(--muted-foreground);
-}
-
-/* Ensure SearchableSelect PopoverContent has proper background */
-[data-radix-popper-content-wrapper] .bg-popover {
-  background-color: white !important;
-  /* Force white background for popovers */
-  border: 1px solid #e2e8f0;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.dark [data-radix-popper-content-wrapper] .bg-popover {
-  background-color: #1f2937 !important;
-  border-color: #374151;
-}
-
 /* ----------------------------------------------------
    Print helpers (hide WP chrome, expand canvas, labels)
    ---------------------------------------------------- */
@@ -229,7 +163,6 @@
   /* Hide WooNooW app shell - all nav, header, submenu elements */
   #woonoow-admin-app header,
   #woonoow-admin-app nav,
-  #woonoow-admin-app [data-mainmenu],
   #woonoow-admin-app [data-submenubar],
   #woonoow-admin-app [data-bottomnav],
   .woonoow-app-header,
diff --git a/admin-spa/src/routes/Orders/partials/OrderForm.tsx b/admin-spa/src/routes/Orders/partials/OrderForm.tsx
index 08952f0..1f273a8 100644
--- a/admin-spa/src/routes/Orders/partials/OrderForm.tsx
+++ b/admin-spa/src/routes/Orders/partials/OrderForm.tsx
@@ -530,7 +530,6 @@ export default function OrderForm({
                       onSearch={setSearchQ}
                       disabled={!itemsEditable}
                       showCheckIndicator={false}
-                      className="w-[200px] md:w-[300px]"
                     />
                   </div>
                 ) : (