Merge pull request #1098 from PrefectHQ/issue-1082

Feature: Expand space in the title bars to account for longer names
PrefectHQ · Nov 11, 2021 · f28aa79 · f28aa79
2 parents 196f413 + ca9ba29
commit f28aa79
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 21 deletions.
diff --git a/src/components/Card-Title.vue b/src/components/Card-Title.vue
@@ -52,12 +52,12 @@ export default {
         </v-icon>
       </v-list-item-avatar>
       <v-list-item-content class="position: relative;">
-        <v-list-item-title class="text-h6 pb-1">
-          <div v-if="$slots['title']">
+        <v-list-item-title class="text-h6 pb-1 " style="max-width: 23vw;">
+          <div v-if="$slots['title']" class="text-truncate">
             <slot name="title" />
           </div>
           <div v-else>
-            <div v-if="!loading">
+            <div v-if="!loading" class="text-truncate">
               {{ title }}
             </div>
             <v-skeleton-loader v-else type="heading" tile></v-skeleton-loader>

diff --git a/src/pages/Flow/Flow.vue b/src/pages/Flow/Flow.vue
@@ -157,6 +157,14 @@ export default {
       versions.unshift({ text: 'All', value: null })
 
       return versions
+    },
+    titleBarMaxWidth() {
+      if (this.$vuetify.breakpoint.lgAndUp) {
+        return '60vw'
+      } else if (this.$vuetify.breakpoint.mdAndDown) {
+        return '40vw'
+      }
+      return '30vw'
     }
   },
   watch: {
@@ -261,7 +269,14 @@ export default {
             : $vuetify.breakpoint.smAndDown && { display: 'inline' }
         "
       >
-        <div v-if="flowGroup">
+        <div
+          v-if="flowGroup"
+          class="text-truncate"
+          :style="{
+            width: selectedFlow.name.length + 'ch',
+            maxWidth: titleBarMaxWidth
+          }"
+        >
           {{ selectedFlow.name }}
           <span
             v-if="selectedFlow.archived"

diff --git a/src/pages/FlowRun/FlowRun.vue b/src/pages/FlowRun/FlowRun.vue
@@ -99,6 +99,17 @@ export default {
     },
     loading() {
       return this.loadingKey > 0
+    },
+    flowRunNameLength() {
+      return this.flowRun?.name?.length
+    },
+    titleBarMaxWidth() {
+      if (this.$vuetify.breakpoint.lgAndUp) {
+        return '70vw'
+      } else if (this.$vuetify.breakpoint.mdAndDown) {
+        return '40vw'
+      }
+      return '30vw'
     }
   },
   watch: {
@@ -233,14 +244,11 @@ export default {
     <SubPageNav icon="pi-flow-run" page-type="Flow Run">
       <span
         slot="page-title"
-        style="
-        max-width: 100%;
-        min-width: 300px;
-        width: auto;
-        "
-        :style="[
-          { display: $vuetify.breakpoint.smAndDown ? 'inline' : 'block' }
-        ]"
+        :style="{
+          display: $vuetify.breakpoint.smAndDown ? 'inline' : 'block',
+          width: flowRunNameLength + 'ch',
+          maxWidth: titleBarMaxWidth
+        }"
       >
         <EditableTextField
           :content="flowRun.name"

diff --git a/src/pages/TaskRun/TaskRun.vue b/src/pages/TaskRun/TaskRun.vue
@@ -58,6 +58,9 @@ export default {
   },
   computed: {
     ...mapGetters('tenant', ['tenant']),
+    taskRunNameLength() {
+      return this.taskRun?.name?.length
+    },
     taskRunId() {
       return this.$route.params.id
     },
@@ -100,6 +103,14 @@ export default {
           cardLinkText: 'Artifacts API Docs'
         }
       ]
+    },
+    titleBarMaxWidth() {
+      if (this.$vuetify.breakpoint.lgAndUp) {
+        return '70vw'
+      } else if (this.$vuetify.breakpoint.mdAndDown) {
+        return '40vw'
+      }
+      return '30vw'
     }
   },
   watch: {
@@ -198,14 +209,11 @@ export default {
     <SubPageNav icon="pi-task-run" page-type="Task Run">
       <span
         slot="page-title"
-        style="
-          max-width: 100%;
-          min-width: 300px;
-          width: auto;
-          "
-        :style="[
-          { display: $vuetify.breakpoint.smAndDown ? 'inline' : 'block' }
-        ]"
+        :style="{
+          display: $vuetify.breakpoint.smAndDown ? 'inline' : 'block',
+          width: taskRunNameLength + 'ch',
+          maxWidth: titleBarMaxWidth
+        }"
       >
         <EditableTextField
           :content="

diff --git a/src/pages/UserSettings/Teams.vue b/src/pages/UserSettings/Teams.vue
@@ -313,7 +313,7 @@ export default {
               >You'll no longer be able to access your run data associated with
               {{ removeTenant.name }}.</div
             >
-            <div class="mt-2" v-show="isLastTenant">
+            <div v-show="isLastTenant" class="mt-2">
               <div class="deepRed--text text-subtitle-1 font-weight-medium">
                 This is the last team you are part of. If you remove it you will
                 not be able to log back in to Prefect Cloud.