Let project include and global project select share the same styles so that they look the same

frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.template.html

@@ -2,6 +2,7 @@
   [open]="dropModalOpen"
   (closed)="close()"
   alignment="bottom-left"
+  class="op-project-list-modal"
 >
   <a id="projects-menu"
      accesskey="5"
@@ -18,12 +19,14 @@
   </a>
 
   <ng-container slot="body">
-    <h1
-      class="spot-subheader-big"
-      [textContent]="text.project.plural"
-    ></h1>
+    <div class="op-project-list-modal--header">
+      <h1
+        class="op-project-list-modal--title"
+        [textContent]="text.project.plural"
+      ></h1>
+    </div>
     <div
-      class="spot-container"
+      class="op-project-list-modal--body spot-container"
     >
       <spot-text-field
         [placeholder]="text.search_placeholder"

frontend/src/app/shared/components/project-include/project-include.component.html

@@ -2,6 +2,7 @@
   [open]="opened"
   alignment="bottom-right"
   (closed)="opened = false"
+  class="op-project-list-modal"
 >
   <button
     slot="trigger"
@@ -20,8 +21,8 @@
   </button>
 
   <ng-container slot="body">
-    <div class="op-project-include--header">
-      <h1 class="op-project-include--title">{{ text.title }}</h1>
+    <div class="op-project-list-modal--header op-project-include--header">
+      <h1 class="op-project-list-modal--title">{{ text.title }}</h1>
       <spot-toggle
         [options]="displayModeOptions"
         [(ngModel)]="displayMode"
@@ -29,7 +30,7 @@
     </div>
     <form
       (submit)="onSubmit($event)"
-      class="spot-container op-project-include--body"
+      class="spot-container op-project-list-modal--body"
     >
       <spot-text-field
         [disabled]="(loading$ | async)"
@@ -57,7 +58,7 @@
           (update)="selectedProjects = $event"
           data-qa-selector="project-include-list"
         ></ul>
-      </ng-container> 
+      </ng-container>
 
       <div class="spot-action-bar">
         <div class="spot-action-bar--left">
@@ -79,7 +80,7 @@
           >
             {{ text.clear_selection }}
           </button>
-          <button 
+          <button
             [disabled]="(loading$ | async)"
             class="button -highlight"
           >

frontend/src/app/shared/components/project-include/project-include.component.sass

@@ -1,37 +1,6 @@
 @import '../../../spot/styles/sass/variables'
-@import 'helpers'
-
-\::ng-deep .spot-drop-modal--body
-
-  @media screen and #{$spot-mq-drop-modal-in-context}
-    width: 460px
 
 .op-project-include
-  &--header
-    display: flex
-    justify-content: space-between
-    align-items: center
-    margin: $spot-spacing-1
-
-  &--title
-    margin: 0
-    padding: 0
-    @include spot-subheader-big 
-
-  &--body
-    flex-shrink: 1
-    flex-basis: 100%
-    overflow: hidden
-
-    @media screen and #{$spot-mq-drop-modal-in-context}
-      max-height: 70vh
-
-  &--list
-    @include styled-scroll-bar
-    overflow-y: auto
-    flex-shrink: 1
-    flex-basis: 100%
-
   &--loading
     padding: $spot-spacing-1
 

frontend/src/app/shared/components/project-list/project-list.component.sass

@@ -1,6 +1,13 @@
 @import '../../app/spot/styles/sass/variables'
+@import 'helpers'
 
+:host,
 .op-project-list
+  @include styled-scroll-bar
+  overflow-y: auto
+  flex-shrink: 1
+  flex-basis: 100%
+
   &--item-action
     display: flex
 
@@ -23,6 +30,7 @@
     text-overflow: ellipsis
     white-space: nowrap
     overflow: hidden
+    max-width: 100%
     color: $spot-color-basic-gray-1
 
     &_link:hover

frontend/src/global_styles/content/_index.sass

@@ -56,6 +56,7 @@
 @import autocomplete
 @import diff
 @import projects_list
+@import project_list_modal
 @import datepicker
 @import focus_within
 @import help_texts

frontend/src/global_styles/content/_project_list_modal.sass

@@ -0,0 +1,20 @@
+.op-project-list-modal
+  &--header
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin: $spot-spacing-1 $spot-spacing-1 0 $spot-spacing-1
+
+  &--title
+    padding: 0
+    margin: 0
+    @include spot-subheader-big
+
+  &--body
+    flex-shrink: 1
+    flex-basis: 100%
+    overflow: hidden
+
+    @media screen and #{$spot-mq-drop-modal-in-context}
+      width: 460px
+      max-height: 70vh