fix: dialogs da tela inicial de aprovacoes pendentes

src/pages/dashboard/components/ProfileMediaApprovalDialog.vue

@@ -1,16 +1,13 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card
-      class="q-dialog-plugin column"
-      style="width: 700px; max-width: 95vw"
-    >
+    <q-card class="q-dialog-plugin profile-media-dialog">
       <DefaultDialogHeader
         :title="() => $t('profile_media_approval.dialog_title')"
         @close="onDialogCancel"
       />
 
       <q-card-section>
-        <div class="row q-col-gutter-md q-mb-md">
+        <div class="row profile-media-dialog__details q-col-gutter-md q-mb-md">
           <div class="col-4">
             <div class="text-caption text-grey-7">
               {{ $t("profile_media_approval.profile_type") }}
@@ -52,7 +49,10 @@
       </q-card-section>
 
       <q-separator />
-      <q-card-actions align="right" class="q-pa-md">
+      <q-card-actions
+        align="right"
+        class="profile-media-dialog__actions q-pa-md"
+      >
         <q-btn
           outline
           color="primary"
@@ -117,6 +117,19 @@ const onApprove = async () => {
 </script>
 
 <style scoped>
+.profile-media-dialog {
+  display: flex;
+  flex-direction: column !important;
+  flex-wrap: nowrap;
+  width: 700px;
+  max-width: 95vw;
+}
+
+.profile-media-dialog__details,
+.profile-media-dialog__actions {
+  flex-direction: row !important;
+}
+
 .profile-media-link {
   display: block;
   border: 1px solid #e0e0e0;

src/pages/dashboard/components/ProviderApprovalDialog.vue

@@ -1,17 +1,13 @@
 <template>
-  <q-dialog
-    ref="dialogRef"
-    @hide="onDialogHide"
-  >
-    <q-card class="q-dialog-plugin column approval-dialog">
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin approval-dialog">
       <DefaultDialogHeader
         :title="() => $t('provider.approval.dialog_title')"
         @close="onDialogCancel"
       />
 
       <div class="col scroll q-pa-md">
-
-        <div class="row items-center q-mb-md">
+        <div class="row approval-dialog__status items-center q-mb-md">
           <q-badge
             :color="statusColor"
             :label="$t(`provider.approval_status.${provider.approval_status}`)"
@@ -19,19 +15,14 @@
           />
         </div>
 
-        <div class="row q-col-gutter-md">
-
+        <div class="row approval-dialog__content q-col-gutter-md">
           <!-- Dados pessoais -->
           <div class="col-12 col-lg-4">
             <div class="text-subtitle1 text-weight-bold q-mb-sm">
               {{ $t("provider.approval.section_personal") }}
             </div>
 
-            <q-list
-              bordered
-              separator
-              class="rounded-borders"
-            >
+            <q-list bordered separator class="rounded-borders">
               <q-item>
                 <q-item-section>
                   <q-item-label caption>
@@ -100,11 +91,7 @@
               {{ $t("provider.approval.section_pricing") }}
             </div>
 
-            <q-list
-              bordered
-              separator
-              class="rounded-borders"
-            >
+            <q-list bordered separator class="rounded-borders">
               <q-item>
                 <q-item-section>
                   <q-item-label caption>
@@ -155,7 +142,7 @@
             </q-list>
           </div>
 
-        <!-- Documentos -->
+          <!-- Documentos -->
           <div class="col-12 col-lg-4">
             <div class="text-subtitle1 text-weight-bold q-mb-sm">
               {{ $t("provider.approval.section_documents") }}
@@ -176,17 +163,11 @@
                   v-if="avatarPreview"
                   :src="avatarPreview"
                   fit="cover"
-                  style="width: 100%; height: 100%;"
+                  style="width: 100%; height: 100%"
                 />
 
-                <div
-                  v-else
-                  class="column flex-center text-grey-5"
-                >
-                  <q-icon
-                    name="mdi-account"
-                    size="40px"
-                  />
+                <div v-else class="column flex-center text-grey-5">
+                  <q-icon name="mdi-account" size="40px" />
                 </div>
               </div>
             </div>
@@ -206,17 +187,11 @@
                   v-if="documentFrontUrl"
                   :src="documentFrontUrl"
                   fit="contain"
-                  style="width:100%;height:100%;"
+                  style="width: 100%; height: 100%"
                 />
 
-                <div
-                  v-else
-                  class="column flex-center text-grey-5"
-                >
-                  <q-icon
-                    name="mdi-image-off-outline"
-                    size="36px"
-                  />
+                <div v-else class="column flex-center text-grey-5">
+                  <q-icon name="mdi-image-off-outline" size="36px" />
                 </div>
               </div>
             </div>
@@ -236,32 +211,25 @@
                   v-if="documentBackUrl"
                   :src="documentBackUrl"
                   fit="contain"
-                  style="width:100%;height:100%;"
+                  style="width: 100%; height: 100%"
                 />
 
-                <div
-                  v-else
-                  class="column flex-center text-grey-5"
-                >
-                  <q-icon
-                    name="mdi-image-off-outline"
-                    size="36px"
-                  />
+                <div v-else class="column flex-center text-grey-5">
+                  <q-icon name="mdi-image-off-outline" size="36px" />
                 </div>
               </div>
             </div>
           </div>
-
         </div>
 
         <div class="text-caption text-grey-6 q-mt-md">
           {{ provider.created_at || "—" }}
         </div>
-
       </div>
 
-      <q-card-actions class="q-pa-md row q-col-gutter-sm">
-
+      <q-card-actions
+        class="q-pa-md row approval-dialog__actions q-col-gutter-sm"
+      >
         <div class="col-12 col-sm-auto">
           <q-btn
             class="full-width"
@@ -299,24 +267,20 @@
             @click="onApprove"
           />
         </div>
-
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <q-dialog
-    v-model="docLightboxOpen"
-    maximized
-  >
+  <q-dialog v-model="docLightboxOpen" maximized>
     <div
       class="flex flex-center bg-black"
-      style="height:100%;"
+      style="height: 100%"
       @click="docLightbox = null"
     >
       <q-img
         :src="docLightbox"
         fit="contain"
-        style="max-width:100vw;max-height:100vh;"
+        style="max-width: 100vw; max-height: 100vh"
       />
 
       <q-btn
@@ -335,11 +299,7 @@
 import { computed, ref, onMounted } from "vue";
 import { useDialogPluginComponent, useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
-import {
-  approveProvider,
-  rejectProvider,
-  getProvider,
-} from "src/api/provider";
+import { approveProvider, rejectProvider, getProvider } from "src/api/provider";
 import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
 
 const props = defineProps({
@@ -351,12 +311,8 @@ const props = defineProps({
 
 defineEmits([...useDialogPluginComponent.emits]);
 
-const {
-  dialogRef,
-  onDialogHide,
-  onDialogOK,
-  onDialogCancel,
-} = useDialogPluginComponent();
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -456,11 +412,24 @@ const onReject = async () => {
 
 <style scoped>
 .approval-dialog {
+  display: flex;
+  flex-direction: column !important;
+  flex-wrap: nowrap;
   width: 700px;
   max-width: 95vw;
   max-height: 90vh;
 }
 
+.approval-dialog__status,
+.approval-dialog__content,
+.approval-dialog__actions {
+  flex-direction: row !important;
+}
+
+.approval-dialog__actions {
+  justify-content: flex-end;
+}
+
 @media (max-width: 768px) {
   .approval-dialog {
     width: 100vw;