[60619] Add relation dialog is overflowing when the ticket name is ra…

…ther long (opf#17645)

* hide the the overflowed text

* fix append to in project autocompleter and set width of it correctly since it has a search icon too

* add a comment to clarify the value we use for calculating width of ng-value-container

frontend/src/global_styles/content/_forms.sass

@@ -967,3 +967,6 @@ input[type=date], input[type=time]
     display: inline-block
     width: 100%
     overflow: auto
+
+.form-autocompleter-container
+  overflow: hidden

frontend/src/global_styles/content/_projects_autocomplete_with_search_icon.sass

@@ -10,3 +10,6 @@
       &:before
         @include icon-font-common
         padding-left: 10px
+    // Reduce width of search icon from width of ng-container value which is calc(100% - 30px)
+    .ng-value-container
+      width: calc(100% - 60px)

lib/primer/open_project/forms/autocompleter.html.erb

@@ -1,6 +1,6 @@
 <%= render(FormControl.new(input: @input, data: @wrapper_data_attributes)) do %>
   <%= content_tag(:div, **@field_wrap_arguments) do %>
-    <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @with_search_icon)) do %>
+    <%= content_tag(:div, class: ["form-autocompleter-container", ("projects-autocomplete-with-search-icon" if @with_search_icon)]) do %>
       <%= angular_component_tag(@autocomplete_component,
                                 data: @autocomplete_data,
                                 inputs: @autocomplete_inputs) %>

modules/meeting/app/forms/meeting/project_autocompleter.rb

@@ -43,6 +43,7 @@ class Meeting::ProjectAutocompleter < ApplicationForm
         dropdownPosition: "bottom",
         inputName: "project_id",
         inputValue: @project&.id,
+        appendTo: "#new-meeting-dialog",
         filters: [{ name: "user_action", operator: "=", values: ["meetings/create"] }]
       }
     )