From 05a66a09e8e0f5451f586f1f01cadc8c32aa6c85 Mon Sep 17 00:00:00 2001
From: Simon Knox <simon@gitlab.com>
Date: Thu, 28 Jun 2018 21:56:31 +0000
Subject: [PATCH] Resolve "SQL Queries are not shown from the Performance Bar
 in Safari"

---
 .../performance_bar/components/performance_bar_app.vue       | 3 ++-
 .../performance_bar/components/request_selector.vue          | 5 +----
 app/assets/stylesheets/performance_bar.scss                  | 3 +--
 ...ries-are-not-shown-from-the-performance-bar-in-safari.yml | 5 +++++
 4 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 changelogs/unreleased/48515-sql-queries-are-not-shown-from-the-performance-bar-in-safari.yml

diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 8ffaa52d9e8..b76965f280b 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -113,7 +113,7 @@ export default {
   >
     <div
       v-if="currentRequest"
-      class="container-fluid container-limited"
+      class="d-flex container-fluid container-limited"
     >
       <div
         id="peek-view-host"
@@ -179,6 +179,7 @@ export default {
         v-if="currentRequest"
         :current-request="currentRequest"
         :requests="requests"
+        class="ml-auto"
         @change-current-request="changeCurrentRequest"
       />
     </div>
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index dd9578a6c7f..ad74f7b38f9 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -35,10 +35,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    id="peek-request-selector"
-    class="float-right"
-  >
+  <div id="peek-request-selector">
     <select v-model="currentRequestId">
       <option
         v-for="request in requests"
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 5127ddfde6e..7a93c4dfa28 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -7,7 +7,6 @@
   top: 0;
   width: 100%;
   z-index: 2000;
-  overflow-x: hidden;
 
   height: $performance-bar-height;
   background: $black;
@@ -82,7 +81,7 @@
 
   .view {
     margin-right: 15px;
-    float: left;
+    flex-shrink: 0;
 
     &:last-child {
       margin-right: 0;
diff --git a/changelogs/unreleased/48515-sql-queries-are-not-shown-from-the-performance-bar-in-safari.yml b/changelogs/unreleased/48515-sql-queries-are-not-shown-from-the-performance-bar-in-safari.yml
new file mode 100644
index 00000000000..65c59dbf31f
--- /dev/null
+++ b/changelogs/unreleased/48515-sql-queries-are-not-shown-from-the-performance-bar-in-safari.yml
@@ -0,0 +1,5 @@
+---
+title: Fix performance bar modal visibility in Safari
+merge_request:
+author:
+type: fixed