Explorar o código

fix(permissions): ações fixas e conteúdo rolável no dialog

Card vira flex column de altura cheia: header e botões ficam fixos e as
listas de Menu/SubCategorias ocupam o espaço restante, rolando de forma
independente quando necessário.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ebagabee hai 2 semanas
pai
achega
db50b57c3e
Modificáronse 1 ficheiros con 11 adicións e 8 borrados
  1. 11 8
      src/pages/permissions/components/PermissionGroupDialog.vue

+ 11 - 8
src/pages/permissions/components/PermissionGroupDialog.vue

@@ -1,15 +1,18 @@
 <template>
-  <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card style="width: 1100px; max-width: 95vw">
+  <q-dialog ref="dialogRef" full-height @hide="onDialogHide">
+    <q-card
+      class="column no-wrap"
+      style="width: 100%; max-width: 95vw; height: 100%"
+    >
       <DefaultDialogHeader
-        :title="`Permissões — ${group.label}`"
+        :title="`Permissões: ${group.label}`"
         @close="onDialogCancel"
       />
 
-      <q-card-section class="q-pa-none">
-        <div class="row items-stretch" style="min-height: 440px">
+      <q-card-section class="col column no-wrap q-pa-none" style="min-height: 0">
+        <div class="row items-stretch col no-wrap" style="min-height: 0">
           <!-- Menu -->
-          <div class="col-12 col-md-6 column">
+          <div class="col-12 col-md-6 column no-wrap" style="min-height: 0">
             <div class="text-center text-subtitle1 text-weight-medium q-pa-sm">
               Menu
             </div>
@@ -68,7 +71,7 @@
           <q-separator vertical />
 
           <!-- SubCategorias -->
-          <div class="col column">
+          <div class="col column no-wrap" style="min-height: 0">
             <div class="text-center text-subtitle1 text-weight-medium q-pa-sm">
               SubCategorias
             </div>
@@ -130,7 +133,7 @@
 
       <q-separator />
 
-      <q-card-actions align="right">
+      <q-card-actions align="right" class="col-auto q-pa-md">
         <q-btn
           label="Cancelar"
           color="primary"