fix: user edit dialog style and user policy display

components/user/edit-form.vue

@@ -75,7 +75,7 @@ const refreshUser = async () => {
   user.value = {
     accessKey: user.value.accessKey,
     memberOf: latest.memberOf ?? [],
-    policy: latest.policy ?? [],
+    policy: latest.policyName?.split(',') ?? [],
     status: latest.status ?? 'enabled',
   }
 }

components/user/groups.vue

@@ -16,7 +16,12 @@
         <FieldContent class="space-y-2">
           <Popover v-model:open="groupSelectorOpen">
             <PopoverTrigger as-child>
-              <Button type="button" variant="outline" class="min-h-10 justify-between gap-2" :aria-label="t('Select Group')">
+              <Button
+                type="button"
+                variant="outline"
+                class="min-h-10 justify-between gap-2"
+                :aria-label="t('Select Group')"
+              >
                 <span class="truncate">
                   {{ selectedGroupLabels.length ? selectedGroupLabels.join(', ') : t('Select Group') }}
                 </span>
@@ -29,8 +34,17 @@
                 <CommandList>
                   <CommandEmpty>{{ t('No Data') }}</CommandEmpty>
                   <CommandGroup>
-                    <CommandItem v-for="option in groups" :key="option.value" :value="option.label" @select="() => toggleGroup(option.value)">
-                      <Icon name="ri:check-line" class="mr-2 size-4" :class="selectedGroups.includes(option.value) ? 'opacity-100' : 'opacity-0'" />
+                    <CommandItem
+                      v-for="option in groups"
+                      :key="option.value"
+                      :value="option.label"
+                      @select="() => toggleGroup(option.value)"
+                    >
+                      <Icon
+                        name="ri:check-line"
+                        class="mr-2 size-4"
+                        :class="selectedGroups.includes(option.value) ? 'opacity-100' : 'opacity-0'"
+                      />
                       <span>{{ option.label }}</span>
                     </CommandItem>
                   </CommandGroup>
@@ -38,12 +52,9 @@
               </Command>
             </PopoverContent>
           </Popover>
-          <div v-if="selectedGroups.length" class="flex flex-wrap gap-2">
-            <Badge v-for="value in selectedGroups" :key="value" variant="secondary">{{ value }}</Badge>
-          </div>
         </FieldContent>
       </Field>
-      <div class="flex items-center gap-2 sm:self-start">
+      <div class="flex items-center gap-2 sm:self-end">
         <Button variant="ghost" @click="cancelEditing">
           {{ t('Cancel') }}
         </Button>
@@ -52,6 +63,9 @@
         </Button>
       </div>
     </div>
+    <div v-if="selectedGroups.length" class="flex flex-wrap gap-2">
+      <Badge v-for="value in selectedGroups" :key="value" variant="secondary">{{ value }}</Badge>
+    </div>
 
     <DataTable :table="table" />
   </div>

components/user/policies.vue

@@ -16,7 +16,12 @@
         <FieldContent class="space-y-2">
           <Popover v-model:open="policySelectorOpen">
             <PopoverTrigger as-child>
-              <Button type="button" variant="outline" class="min-h-10 justify-between gap-2" :aria-label="t('Select Group')">
+              <Button
+                type="button"
+                variant="outline"
+                class="min-h-10 justify-between gap-2"
+                :aria-label="t('Select Group')"
+              >
                 <span class="truncate">
                   {{ selectedPolicyLabels.length ? selectedPolicyLabels.join(', ') : t('Select user group policies') }}
                 </span>
@@ -29,8 +34,17 @@
                 <CommandList>
                   <CommandEmpty>{{ t('No Data') }}</CommandEmpty>
                   <CommandGroup>
-                    <CommandItem v-for="option in policies" :key="option.value" :value="option.label" @select="() => togglePolicy(option.value)">
-                      <Icon name="ri:check-line" class="mr-2 size-4" :class="selectedPolicies.includes(option.value) ? 'opacity-100' : 'opacity-0'" />
+                    <CommandItem
+                      v-for="option in policies"
+                      :key="option.value"
+                      :value="option.label"
+                      @select="() => togglePolicy(option.value)"
+                    >
+                      <Icon
+                        name="ri:check-line"
+                        class="mr-2 size-4"
+                        :class="selectedPolicies.includes(option.value) ? 'opacity-100' : 'opacity-0'"
+                      />
                       <span>{{ option.label }}</span>
                     </CommandItem>
                   </CommandGroup>
@@ -38,12 +52,9 @@
               </Command>
             </PopoverContent>
           </Popover>
-          <div v-if="selectedPolicies.length" class="flex flex-wrap gap-2">
-            <Badge v-for="value in selectedPolicies" :key="value" variant="secondary">{{ value }}</Badge>
-          </div>
         </FieldContent>
       </Field>
-      <div class="flex items-center gap-2 sm:self-start">
+      <div class="flex items-center gap-2 sm:self-end">
         <Button variant="ghost" @click="cancelEditing">
           {{ t('Cancel') }}
         </Button>
@@ -52,6 +63,9 @@
         </Button>
       </div>
     </div>
+    <div v-if="selectedPolicies.length" class="flex flex-wrap gap-2">
+      <Badge v-for="value in selectedPolicies" :key="value" variant="secondary">{{ value }}</Badge>
+    </div>
 
     <DataTable :table="table" />
   </div>