feat(actions): adiciona gap

src/pages/support/SupportPage.vue

@@ -11,8 +11,18 @@
       description="tickets"
       @on-add-item="openAddEditTicketDialog()"
     >
+      <template #body-cell-severity="{ row }">
+        <q-td align="left">
+          <q-badge
+            :color="severityColor(row.severity)"
+            :label="severityLabel(row.severity)"
+            style="padding: 6px 10px"
+          />
+        </q-td>
+      </template>
+
       <template #body-cell-status="{ row }">
-        <q-td align="center">
+        <q-td align="left">
           <q-badge
             :color="statusColor(row.status)"
             :label="statusLabel(row.status)"
@@ -22,28 +32,30 @@
       </template>
 
       <template #body-cell-actions="{ row }">
-        <q-btn
-          outline
-          icon="mdi-pencil-outline"
-          style="width: 36px"
-          @click.prevent.stop="handleEdit(row)"
-        />
-        <q-btn
-          v-if="row.status === 'in_progress'"
-          outline
-          icon="mdi-check-circle-outline"
-          style="width: 36px"
-          color="warning"
-          @click.prevent.stop="handleClose(row)"
-        />
-        <q-btn
-          v-if="row.status === 'in_progress'"
-          outline
-          icon="mdi-trash-can-outline"
-          style="width: 36px"
-          color="negative"
-          @click.prevent.stop="handleDelete(row)"
-        />
+        <q-td style="display: flex; gap: 4px; align-items: center; justify-content: center">
+          <q-btn
+            outline
+            icon="mdi-pencil-outline"
+            style="width: 36px"
+            @click.prevent.stop="handleEdit(row)"
+          />
+
+          <q-btn
+            v-if="row.status === 'in_progress'"
+            outline
+            icon="mdi-check-circle-outline"
+            style="width: 36px"
+            @click.prevent.stop="handleClose(row)"
+          />
+
+          <q-btn
+            v-if="row.status === 'in_progress'"
+            outline
+            icon="mdi-trash-can-outline"
+            style="width: 36px"
+            @click.prevent.stop="handleDelete(row)"
+          />
+        </q-td>
       </template>
     </DefaultTable>
   </div>
@@ -85,6 +97,7 @@ const columns = [
     align: "left",
     sortable: true,
     required: true,
+    style: "width: 5%",
   },
   {
     name: "severity",
@@ -92,6 +105,7 @@ const columns = [
     field: "severity",
     align: "left",
     sortable: true,
+    style: "width: 8%",
   },
   {
     name: "created_at",
@@ -99,6 +113,7 @@ const columns = [
     field: "created_at",
     align: "left",
     sortable: true,
+    style: "width: 10%",
   },
   {
     name: "sector",
@@ -106,19 +121,22 @@ const columns = [
     field: "sector",
     align: "left",
     sortable: true,
+    style: "width: 18%",
   },
   {
     name: "title",
     label: "Título",
     field: "title",
     align: "left",
+    style: "width: 34%",
   },
   {
     name: "status",
     label: "Status",
     field: "status",
-    align: "center",
+    align: "left",
     sortable: true,
+    style: "width: 10%",
   },
   {
     name: "actions",
@@ -126,9 +144,20 @@ const columns = [
     field: "actions",
     align: "center",
     required: true,
+    style: "width: 15%",
   },
 ];
 
+const severityLabel = (severity) => {
+  const map = { alta: "Alta", normal: "Normal", baixa: "Baixa" };
+  return map[severity] ?? severity;
+};
+
+const severityColor = (severity) => {
+  const map = { alta: "negative", normal: "warning", baixa: "positive" };
+  return map[severity] ?? "grey";
+};
+
 const statusLabel = (status) => {
   const map = {
     in_progress: "Em andamento",