From 27f1eeca0ba2ba6085d65592fdaed19751bb355f Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 21 Jun 2019 14:05:00 +0100
Subject: [PATCH] Restrict max width of org and service name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Service names can be quite long. Organisation names can be quite long.
Together they can be very long. This isn’t great because:
- sometimes they overflow the width of the container, which looks broken
- even if they’re not that long they can make the UI look quite
  cluttered

This commit restricts them to widths that should stop the above from
happening. In the case of the organisation name the width has
specifically been chosen to line up with the ¼ and ¾ column grid
used by the navigation.
---
 app/assets/stylesheets/components/navigation.scss | 12 ++++++++++++
 app/templates/withnav_template.html               | 14 +++++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index 4fef79cc5..108e3d5f1 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -12,6 +12,7 @@
     &-name {
       @include bold-19;
       margin: 0 0 0 0;
+      display: inline-block;
     }
 
     &-switch {
@@ -50,6 +51,17 @@
     background-repeat: no-repeat;
   }
 
+  &-organisation-link {
+    @include core-19;
+    display: inline-block;
+    max-width: 25%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: normal;
+    text-decoration: none;
+  }
+
   li {
     @include core-19;
     margin: 0;
diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html
index 235d779f2..b3af8dbe0 100644
--- a/app/templates/withnav_template.html
+++ b/app/templates/withnav_template.html
@@ -7,14 +7,14 @@
 {% block fullwidth_content %}
   <div id="content">
     <div class="navigation-service">
-      <div class="navigation-service-name">
-        {% if current_service.organisation_id %}
-          {% if current_user.platform_admin or
-            (current_user.belongs_to_organisation(current_service.organisation_id) and current_service.live) %}
-            <a href="{{ url_for('.organisation_dashboard', org_id=current_service.organisation.id) }}">{{ current_service.organisation.name }}</a>
-            <span class="navigation-breadcrumb"></span>
-          {% endif %}
+      {% if current_service.organisation_id %}
+        {% if current_user.platform_admin or
+          (current_user.belongs_to_organisation(current_service.organisation_id) and current_service.live) %}
+          <a href="{{ url_for('.organisation_dashboard', org_id=current_service.organisation.id) }}" class="navigation-organisation-link">{{ current_service.organisation.name }}</a>
+          <span class="navigation-breadcrumb"></span>
         {% endif %}
+      {% endif %}
+      <div class="navigation-service-name">
         {{ current_service.name }}
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="navigation-service-switch">Switch service</a>