From 40b5b2406b8a78a40572ab35a4e263c10b148dfd Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Wed, 11 Sep 2019 15:44:38 +0200
Subject: [PATCH] Fix big inventory names (#2046)

---
 .../stylesheets/partials/_inline_editing.scss |  1 +
 app/assets/stylesheets/repositories.scss      | 26 +++++++++++++------
 app/views/repositories/show.html.erb          | 17 ++++++------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/partials/_inline_editing.scss b/app/assets/stylesheets/partials/_inline_editing.scss
index 6f19a0a07..40e81a93c 100644
--- a/app/assets/stylesheets/partials/_inline_editing.scss
+++ b/app/assets/stylesheets/partials/_inline_editing.scss
@@ -5,6 +5,7 @@
 .inline-editing-container {
   display: flex;
   flex-grow: 1;
+  max-width: 100%;
   position: relative;
 
   .button-container {
diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss
index 9028b65cd..adc13e5eb 100644
--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@@ -97,13 +97,9 @@
     }
   }
 
-  .repository-title-container {
+  .repository-title-name {
     display: flex;
     flex-direction: column;
-    width: calc(100% + 40px);
-  }
-
-  .repository-title-name {
     flex-grow: 1;
     font-size: 18px;
     line-height: 32px;
@@ -113,8 +109,23 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    .inline-editing-container {
-      width: 100%;
+    .name-container {
+      align-items: center;
+      display: inline-flex;
+      height: 32px;
+
+      .read-only-name {
+        display: inline-block;
+        line-height: 32px;
+        max-width: calc(100% - 30px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .inline-editing-container {
+        width: 100%;
+      }
     }
   }
 
@@ -122,7 +133,6 @@
     color: $color-silver-chalice;
     font-size: 12px;
     line-height: 12px;
-    padding-left: 5px;
   }
 
   .datatables-buttons {
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index 0ae6e9cbd..c8f49c0c3 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -11,27 +11,26 @@
 
 <div class="content-pane repository-show">
   <div id="repository-toolbar">
-    <div class="repository-title-container">
-
-      <div class="repository-title-name">
+    <div class="repository-title-name">
+      <span class="name-container">
         <% if @inline_editable_title_config.present? %>
           <%= render partial: "shared/inline_editing",
-                       locals: { initial_value: @repository.name } %>
+                     locals: { initial_value: @repository.name } %>
         <% else %>
-          <%= @repository.name %>
+          <div class="read-only-name">
+            <%= @repository.name %>
+          </div>
           <span class="repository-share-icon">
             <%= inventory_shared_status_icon(@repository, current_team) %>
           </span>
         <% end %>
-      </div>
-
+      </span>
       <% if @repository.shared_with_anybody? %>
         <% team_name = @repository.team == current_team ? 'your Team' : @repository.team.name %>
         <div class="repository-subtitle"><%= t('repositories.subtitle', team_name: team_name) %></div>
       <% end %>
     </div>
-
-    <div id="datatables-buttons" class="datatables-buttons" style="display: inline;">
+    <div id="datatables-buttons" class="datatables-buttons">
       <div class="new-repository-button">
         <% if can_share_repository?(@repository) && current_user.teams.count > 1 %>
           <%= link_to team_repository_share_modal_path(current_team, repository_id: @repository),