Restrict max width of org and service name

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,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;

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>