diff --git a/app/assets/stylesheets/experiment/show.scss b/app/assets/stylesheets/experiment/show.scss
index f4f2599d8..bf4e3b6c4 100644
--- a/app/assets/stylesheets/experiment/show.scss
+++ b/app/assets/stylesheets/experiment/show.scss
@@ -1,5 +1,12 @@
 // scss-lint:disable SelectorDepth NestingDepth IdSelector
 
+#experimentTable,
+#experiment-canvas {
+  .experimnet-name {
+    max-width: calc(100% - 300px);
+  }
+}
+
 #experiment-canvas {
   [data-view-mode="archived"] {
     display: none;
diff --git a/app/views/experiments/_show_header.html.erb b/app/views/experiments/_show_header.html.erb
index cfe8abc63..580043cc4 100644
--- a/app/views/experiments/_show_header.html.erb
+++ b/app/views/experiments/_show_header.html.erb
@@ -3,7 +3,7 @@
     <%= render partial: 'projects/index/breadcrumbs', locals: {target_folder: @experiment.project.project_folder, project: @experiment.project, experiment: @experiment} %>
   </div>
   <div class="title-row">
-    <h1 class="project-name" data-toggle="tooltip" data-placement="bottom" title="<%= @experiment.name %>">
+    <h1 class="experimnet-name" data-toggle="tooltip" data-placement="bottom" title="<%= @experiment.name %>">
       <% if @experiment.archived? %>
         <i class="fas fa-archive" data-view-mode="archived"></i>
       <% end %>