move styles out of components

app/assets/javascripts/ide/components/merge_requests/dropdown.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <div class="dropdown-menu ide-merge-requests-dropdown">
+  <div class="dropdown-menu ide-merge-requests-dropdown p-0">
     <tabs stop-propagation>
       <tab active>
         <template slot="title">
@@ -56,11 +56,3 @@ export default {
     </tabs>
   </div>
 </template>
-
-<style scoped>
-.dropdown-menu {
-  width: 350px;
-  padding: 0;
-  max-height: initial !important;
-}
-</style>

app/assets/javascripts/ide/components/merge_requests/item.vue

@@ -44,10 +44,7 @@ export default {
     class="btn-link d-flex align-items-center"
     @click.prevent.stop="clickItem"
   >
-    <span
-      class="d-flex append-right-default"
-      style="min-width: 18px"
-    >
+    <span class="d-flex append-right-default ide-merge-request-current-icon">
       <icon
         v-if="isActive"
         name="mobile-issue-close"

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -132,14 +132,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped>
-.ide-merge-requests-empty {
-  height: 230px;
-}
-
-.ide-merge-requests-dropdown-content {
-  min-height: 230px;
-  max-height: 470px;
-}
-</style>

app/assets/javascripts/ide/index.js

@@ -9,7 +9,6 @@ Vue.use(Translate);
 
 export function initIde(el) {
   if (!el) return null;
-  window.store = store;
 
   return new Vue({
     el,

app/assets/stylesheets/pages/repo.scss

@@ -1135,6 +1135,11 @@
   .avatar {
     flex: 0 0 40px;
   }
+
+  .ide-merge-requests-dropdown.dropdown-menu {
+    width: 350px;
+    max-height: initial;
+  }
 }
 
 .ide-sidebar-project-title {
@@ -1294,3 +1299,16 @@
     }
   }
 }
+
+.ide-merge-request-current-icon {
+  min-width: 18px;
+}
+
+.ide-merge-requests-empty {
+  height: 230px;
+}
+
+.ide-merge-requests-dropdown-content {
+  min-height: 230px;
+  max-height: 470px;
+}