Fix big inventory names (#2046)

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 {

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,16 +109,30 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 
+    .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%;
       }
     }
+  }
 
   .repository-subtitle {
     color: $color-silver-chalice;
     font-size: 12px;
     line-height: 12px;
-    padding-left: 5px;
   }
 
   .datatables-buttons {

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">
+      <span class="name-container">
         <% if @inline_editable_title_config.present? %>
           <%= render partial: "shared/inline_editing",
                      locals: { initial_value: @repository.name } %>
         <% else %>
+          <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),