From acc41c21d96ae46702b9b1602edb1aada89bdf2e Mon Sep 17 00:00:00 2001
From: "s.esmaeili" <s.esmaeili@feep.ir>
Date: Mon, 14 Sep 2026 17:22:46 +0330
Subject: [PATCH] admin-panel: import ant-design-vue 4 reset.css (fixes
 unstyled page)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ADV4 upgrade dropped the old `ant-design-vue/dist/antd.less` import but
never added its replacement. ADV4 injects each COMPONENT's styles at runtime
via CSS-in-JS, but NOT the global baseline — that ships separately as
dist/reset.css and must be imported explicitly. Without it the page lost
box-sizing, the body margin reset and the browser default list/heading
resets, so the layout rendered unstyled.

Verified in a real headless browser this time, not just a green build:
reset.css now resolves through LESS and its rules are present in the built
CSS, the CSS-in-JS engine injects component styles (14 <style> tags on the
login page), and buttons/inputs/cards compute real ant metrics with dir=rtl.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/admin-panel/src/assets/styles/main.less | 28 ++++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/admin-panel/src/assets/styles/main.less b/apps/admin-panel/src/assets/styles/main.less
index 9794eae..cb012f5 100644
--- a/apps/admin-panel/src/assets/styles/main.less
+++ b/apps/admin-panel/src/assets/styles/main.less
@@ -1,21 +1,27 @@
 // Style entry for admin-panel.
 //
 // ant-design-vue 4 removed its LESS theme entirely (CSS-in-JS design tokens
-// replace modifyVars) — `ant-design-vue/dist/antd.less` no longer exists, so
-// it is no longer imported here; ADV4's runtime styles are injected by the
-// library itself. Primary/link/radius tokens now live in App.vue's
-// <a-config-provider :theme>.
+// replace modifyVars) — `ant-design-vue/dist/antd.less` no longer exists.
+// Each COMPONENT's styles are injected at runtime by the library, but the
+// global BASELINE is not: ADV4 ships it separately as dist/reset.css and
+// requires you to import it yourself. It carries box-sizing, the body margin
+// reset and — critically — the list-style reset the menu depends on. Without
+// it the sidebar renders as raw <ul> bullets and the whole panel stacks
+// vertically, so this import MUST come first.
+// Primary/link/radius tokens live in App.vue's <a-config-provider :theme>.
 //
 // `ara/ant.less` (426 lines of hand-written RTL flips for float/margin/
-// transform) is also gone: ADV4 renders RTL natively via CSS logical
-// properties when direction="rtl" is set, which App.vue already does. The
-// small residue ADV4 does not cover lives in ./rtl-overrides.css.
+// transform) is gone: ADV4 renders RTL natively via CSS logical properties
+// when direction="rtl" is set, which App.vue already does. The small residue
+// ADV4 does not cover lives in ./rtl-overrides.css.
 //
-// Remaining order:
-//   1. farsi.less     -> font faces + global reset
-//   2. rtl-overrides.css -> the few RTL rules ADV4 doesn't provide natively
-//   3. utilities.less -> the global utility layer replacing legacy's Tailwind
+// Order:
+//   1. ant-design-vue reset -> the global baseline ADV4 no longer auto-injects
+//   2. farsi.less     -> font faces + global reset
+//   3. rtl-overrides.css -> the few RTL rules ADV4 doesn't provide natively
+//   4. utilities.less -> the global utility layer replacing legacy's Tailwind
 //      build. Must come last so its card chrome layers over ant's own styles.
+@import 'ant-design-vue/dist/reset.css';
 @import './farsi.less';
 @import './rtl-overrides.css';
 @import './utilities.less';