From 93aa3cf7d6bd4376566a4fb28ad24f771b52240f Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Thu, 2 Nov 2023 11:21:16 -0700
Subject: [PATCH 1/2] Restyling templates settings page

---
 .../src/document/template/TemplateTable.vue   | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue b/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue
index 8753469f9161..d3a81e40de59 100644
--- a/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue
+++ b/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue
@@ -7,17 +7,24 @@
         <settings-breadcrumbs v-model="project" />
       </v-col>
     </v-row>
-    <v-row no-gutters>
+    <v-row no-gutters class="justify-space-between">
       <v-col v-for="document in templateDocumentTypes" :key="document.resource_type">
-        <v-card @click.stop="createEditShow({ resource_type: document.resource_type })">
-          <div class="d-flex flex-no-wrap justify-space-between">
+        <v-card
+          @click.stop="createEditShow({ resource_type: document.resource_type })"
+          outlined
+          elevation="0"
+          style="border: 1px solid rgb(var(--v-borderline))"
+        >
+          <div>
             <div>
-              <v-card-title class="text-h5">{{ document.title }}</v-card-title>
-              <v-card-subtitle>{{ document.description }}</v-card-subtitle>
+              <v-card-title class="text-h5">
+                {{ document.title }}
+                <v-avatar class="ma-3" tile>
+                  <v-icon>{{ document.icon }}</v-icon>
+                </v-avatar>
+              </v-card-title>
+              <v-card-subtitle class="wrap-text">{{ document.description }}</v-card-subtitle>
             </div>
-            <v-avatar class="ma-3" tile>
-              <v-icon size="x-large">{{ document.icon }}</v-icon>
-            </v-avatar>
           </div>
         </v-card>
       </v-col>
@@ -161,3 +168,9 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="css">
+.wrap-text {
+  white-space: normal;
+}
+</style>

From f2a0a8331a878b4f4535ac669b82b2c5204f2803 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 3 Nov 2023 12:13:04 -0700
Subject: [PATCH 2/2] Fixing lint errors

---
 .../static/dispatch/src/document/template/TemplateTable.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue b/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue
index d3a81e40de59..89c4617feaac 100644
--- a/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue
+++ b/src/dispatch/static/dispatch/src/document/template/TemplateTable.vue
@@ -11,7 +11,7 @@
       <v-col v-for="document in templateDocumentTypes" :key="document.resource_type">
         <v-card
           @click.stop="createEditShow({ resource_type: document.resource_type })"
-          outlined
+          variant="outlined"
           elevation="0"
           style="border: 1px solid rgb(var(--v-borderline))"
         >
@@ -23,7 +23,7 @@
                   <v-icon>{{ document.icon }}</v-icon>
                 </v-avatar>
               </v-card-title>
-              <v-card-subtitle class="wrap-text">{{ document.description }}</v-card-subtitle>
+              <v-card-subtitle class="wrap-text mb-2">{{ document.description }}</v-card-subtitle>
             </div>
           </div>
         </v-card>