From 3b307e8383f404cc91776ceb9c5d3d5bbcc866de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@posteo.net>
Date: Tue, 14 Jan 2020 11:11:19 +0100
Subject: [PATCH] Resolve "long instance name overlapping next column in
 footer"

---
 changes/changelog.d/1012.enhancement |  1 +
 front/src/components/Footer.vue      | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 changes/changelog.d/1012.enhancement

diff --git a/changes/changelog.d/1012.enhancement b/changes/changelog.d/1012.enhancement
new file mode 100644
index 000000000..ae47d6dc6
--- /dev/null
+++ b/changes/changelog.d/1012.enhancement
@@ -0,0 +1 @@
+Changed footer to use instance name if available, and append ellipses if instance URL/Name is too long (#1012)
\ No newline at end of file
diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue
index d758b456b..3b2442831 100644
--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -3,8 +3,11 @@
     <div class="ui container">
       <div class="ui stackable equal height stackable grid">
         <section class="four wide column">
-          <h4 class="ui header">
-            <translate translate-context="Footer/About/Title" :translate-params="{instanceName: instanceHostname}" >About %{instanceName}</translate>
+          <h4 v-if="podName" class="ui header ellipsis">
+            <translate translate-context="Footer/About/Title" :translate-params="{instanceName: podName}" >About %{instanceName}</translate>
+          </h4>
+          <h4 v-else class="ui header ellipsis">
+            <translate translate-context="Footer/About/Title" :translate-params="{instanceUrl: instanceHostname}" >About %{instanceUrl}</translate>
           </h4>
           <div class="ui link list">
             <router-link class="item" to="/about">
@@ -71,13 +74,18 @@
 import Vue from "vue"
 import { mapState } from "vuex"
 import axios from 'axios'
+import _ from '@/lodash'
 
 export default {
   props: ["version"],
   computed: {
     ...mapState({
-      messages: state => state.ui.messages
+      messages: state => state.ui.messages,
+      nodeinfo: state => state.instance.nodeinfo,
     }),
+    podName() {
+      return _.get(this.nodeinfo, 'metadata.nodeName')
+    },
     instanceHostname() {
       let url = this.$store.state.instance.instanceUrl
       let parser = document.createElement("a")