Prevent overflow of long instance urls during Project creation

app/assets/stylesheets/pages/projects.scss

@@ -9,7 +9,6 @@
 .new_project,
 .edit-project,
 .import-project {
-
   .help-block {
     margin-bottom: 10px;
   }
@@ -18,18 +17,25 @@
     border-radius: $border-radius-base;
   }
-  .input-group > div {
-    &:last-child {
-      padding-right: 0;
+  .input-group {
+    display: flex;
+    .select2-container {
+      display: unset;
+      max-width: unset;
+      width: unset !important;
+      flex-grow: 1;
+    }
+
+    > div {
+      &:last-child {
+        padding-right: 0;
+      }
     }
   }
   @media (max-width: $screen-xs-max) {
     .input-group > div {
-
-      margin-bottom: 14px;
-
       &:last-child {
         margin-bottom: 0;
       }
@@ -41,17 +47,24 @@
   }
   .input-group-addon {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: unset;
+    width: unset;
+    max-width: 50%;
+    text-align: left;
     &.static-namespace {
       height: 35px;
       border-radius: 3px;
       border: 1px solid $border-color;
+      max-width: 100%;
+      flex-grow: 1;
     }
     + .select2 a,
     + .btn-default {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      border-radius: 0 $border-radius-base $border-radius-base 0;
     }
   }
 }
@@ -290,7 +303,7 @@
       font-size: 13px;
       font-weight: $gl-font-weight-bold;
       line-height: 13px;
-      letter-spacing: .4px;
+      letter-spacing: 0.4px;
       padding: 6px 14px;
       text-align: center;
       vertical-align: middle;
@@ -443,7 +456,7 @@ a.deploy-project-label {
     text-decoration: none;
     &.disabled {
-      opacity: .3;
+      opacity: 0.3;
       cursor: not-allowed;
     }
   }
@@ -600,26 +613,26 @@ a.deploy-project-label {
   }
   .first-column {
-    @media(min-width: $screen-xs-min) {
+    @media (min-width: $screen-xs-min) {
       max-width: 50%;
       padding-right: 30px;
     }
-    @media(max-width: $screen-xs-max) {
+    @media (max-width: $screen-xs-max) {
       max-width: 100%;
       width: 100%;
     }
   }
   .second-column {
-    @media(min-width: $screen-xs-min) {
+    @media (min-width: $screen-xs-min) {
       width: 50%;
       flex: 1;
       padding-left: 30px;
       position: relative;
     }
-    @media(max-width: $screen-xs-max) {
+    @media (max-width: $screen-xs-max) {
       max-width: 100%;
       width: 100%;
       padding-left: 0;
@@ -632,7 +645,7 @@ a.deploy-project-label {
     }
     &::before {
-      content: "OR";
+      content: 'OR';
       position: absolute;
       left: -10px;
       top: 50%;
@@ -656,7 +669,7 @@ a.deploy-project-label {
     }
     &::after {
-      content: "";
+      content: '';
       position: absolute;
       background-color: $border-color;
       bottom: 0;
@@ -921,10 +934,7 @@ pre.light-well {
       border-right: solid 1px transparent;
     }
   }
-}
-.protected-tags-list,
-.protected-branches-list {
   .dropdown-menu-toggle {
     width: 100%;
     max-width: 300px;

app/views/import/gitlab_projects/new.html.haml

@@ -13,13 +13,13 @@
       .form-group
         .input-group
           - if current_user.can_select_namespace?
-            .input-group-addon
+            .input-group-addon.has-tooltip{ title: root_url }
               = root_url
             = select_tag :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), class: 'select2 js-select-namespace', tabindex: 1
           - else
-            .input-group-addon.static-namespace
-              #{root_url}#{current_user.username}/
+            .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
+              #{user_url(current_user.username)}/
             = hidden_field_tag :namespace_id, value: current_user.namespace_id
     .form-group.col-xs-12.col-sm-6.project-path
       = label_tag :path, 'Project name', class: 'label-light'

app/views/projects/_new_project_fields.html.haml

@@ -9,12 +9,12 @@
         Project path
     .input-group
       - if current_user.can_select_namespace?
-        .input-group-addon
+        .input-group-addon.has-tooltip{ title: root_url }
           = root_url
         = f.select :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), {}, { class: 'select2 js-select-namespace qa-project-namespace-select', tabindex: 1}
       - else
-        .input-group-addon.static-namespace
+        .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
           #{user_url(current_user.username)}/
         = f.hidden_field :namespace_id, value: current_user.namespace_id
   .form-group.project-path.col-sm-6

changelogs/unreleased/42037-long-instance-names-group-names-covers-namespace-dropdown.yml

+---
+title: Long instance urls do not overflow anymore during project creation
+merge_request: 17717
+author:
+type: fixed