From e94f832c8ab0a76b555f2c1fd482c40d9b82465e Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Wed, 15 Jul 2026 12:47:42 +0330
Subject: [PATCH] fix: adjust styles for PermissionAccordions component for
 better usability

---
 assets/admin/pages/MySecretariesPage.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/assets/admin/pages/MySecretariesPage.tsx b/assets/admin/pages/MySecretariesPage.tsx
index 18900b70..a53441c7 100644
--- a/assets/admin/pages/MySecretariesPage.tsx
+++ b/assets/admin/pages/MySecretariesPage.tsx
@@ -169,19 +169,19 @@ function PermissionAccordions({
             <p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] font-bold mb-[16px]">
                 مجوزهای دسترسی
             </p>
-            <div className="flex flex-col gap-[8px]">
+            <div className="flex flex-col gap-[8px] w-full items-stretch">
                 {PERMISSION_SECTIONS.map((section) => {
                     const open = openKeys.has(section.key);
                     const sectionPerm = permissions[section.key] as Record<string, boolean>;
                     return (
                         <div
                             key={section.key}
-                            className="border border-[#DBDBDB] dark:border-[#343645] rounded-[8px] overflow-hidden"
+                            className="w-full border border-[#DBDBDB] dark:border-[#343645] rounded-[8px] overflow-hidden"
                         >
                             <button
                                 type="button"
                                 onClick={() => toggleOpen(section.key)}
-                                className="w-full flex items-center justify-between px-[16px] min-h-[48px] cursor-pointer"
+                                className="w-full flex items-center justify-between px-[16px] min-h-[64px] cursor-pointer"
                             >
                                 <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">
                                     {section.title}
@@ -189,12 +189,12 @@ function PermissionAccordions({
                                 <ChevronDown open={open} />
                             </button>
                             {open && (
-                                <div className="px-[16px] pb-[16px]">
-                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-[8px]">
+                                <div className="px-[16px] pt-[8px] pb-[16px]">
+                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[16px] gap-y-0">
                                         {section.items.map((item) => (
                                             <label
                                                 key={item.key}
-                                                className="flex items-center gap-[8px] cursor-pointer"
+                                                className="flex items-center gap-[11px] cursor-pointer py-[9px] min-h-[42px]"
                                             >
                                                 <input
                                                     type="checkbox"
@@ -203,7 +203,7 @@ function PermissionAccordions({
                                                     onChange={(e) =>
                                                         onChange(section.key, item.key, e.target.checked)
                                                     }
-                                                    className="w-[18px] h-[18px]"
+                                                    className="w-[20px] h-[20px] shrink-0"
                                                     style={{ accentColor: "#5559CE", cursor: "pointer" }}
                                                 />
                                                 <span className="text-[#616161] dark:text-[#A1A1A1] text-[14px]">
@@ -395,11 +395,11 @@ function SecretaryModal({
                     </p>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
                         <div className="flex w-full flex-col items-start justify-start gap-[12px]">
-                            <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام</p>
+                            <p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام</p>
                             <DefaultTextField placeholder="نام" value={form.name} onChange={(v) => setField("name", v)} disabled={disabled} />
                         </div>
                         <div className="flex w-full flex-col items-start justify-start gap-[12px]">
-                            <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام خانوادگی</p>
+                            <p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام خانوادگی</p>
                             <DefaultTextField placeholder="نام خانوادگی" value={form.family} onChange={(v) => setField("family", v)} disabled={disabled} />
                         </div>
                     </div>
@@ -407,17 +407,17 @@ function SecretaryModal({
 
                 <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-[16px]">
                     <div className="flex w-full flex-col items-start justify-start gap-[12px]">
-                        <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">شماره موبایل</p>
+                        <p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">شماره موبایل</p>
                         <DefaultTextField placeholder="09121234567" value={form.telephone} onChange={(v) => setField("telephone", v)} disabled={disabled || mode === "edit"} />
                     </div>
                     <div className="flex w-full flex-col items-start justify-start gap-[12px]">
-                        <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">کد ملی</p>
+                        <p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">کد ملی</p>
                         <DefaultTextField placeholder="کد ملی" value={form.national_code} onChange={(v) => setField("national_code", v)} disabled={disabled} />
                     </div>
                 </div>
 
                 <div className="flex w-full flex-col items-start justify-start gap-[12px]">
-                    <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">آدرس</p>
+                    <p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">آدرس</p>
                     <DefaultTextField placeholder="آدرس" value={form.address} onChange={(v) => setField("address", v)} disabled={disabled} multiline rows={2} />
                 </div>