Ajuste de layout

src/routes/videos/index.vue

@@ -1,15 +1,22 @@
 <template>
   <div class="user-list q-pa-md">
-    <q-card flat bordered class="q-pa-sm q-mb-lg">
-      <div class="row q-pa-sm q-gutter-sm">
+    <q-card
+      flat
+      bordered
+      class="q-pa-sm q-mb-lg"
+      :class="{
+        'bg-grey-2': !$q.dark.isActive,
+      }"
+    >
+      <div class="row q-pa-sm q-gutter-md">
         <div class="col-3">
           <TextField label="Título" />
         </div>
         <div class="col-3">
-          <TextField label="URL" />
+          <TextField label="Video ID" />
         </div>
         <div class="col-3">
-          <TextField label="VideoID" />
+          <q-select outlined :options="['Ativo', 'Inativo']" label="Situação" />
         </div>
       </div>
 
@@ -30,7 +37,7 @@
       :rows="rows"
       :pagination="pagination"
       :loading="loading"
-      row-key="id"
+      key="table-videos"
       @update:pagination="updatePagination"
     >
       <template #no-data>
@@ -84,19 +91,6 @@ const columns = [
   },
 ];
 
-/*
-{
-    "id": 195,
-    "title": "VIDA EXTRATERRESTRE: FINALMENTE ENCONTRADA A EVIDÊNCIA + AGUARDADA...",
-    "url": "https://www.youtube.com/watch?v=2iU7oAmQROQ",
-    "situation": "CONCLUIDO",
-    "clips_quantity": 3,
-    "videoid": "2iU7oAmQROQ",
-    "filename": "VIDA_EXTRATERRESTRE_FINALMENTE_ENCONTRADA_A_EVIDENCIA_AGUARDADA_medium.mp4",
-    "datetime_download": "Invalid Date"
-}
-*/
-
 export default {
   name: "UserList",
   components: {