From 894da25461c1dc30800a9bc7aa8f4fbc102dc260 Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Tue, 14 Jul 2020 18:42:52 -0700
Subject: [PATCH 1/5] Fix Safari display issues #3192

- Fix Inspector `__content` to properly use flex column layout;
- Change `u-angular-object-view-wrapper` to `display: contents`;
- Fix `gl-plot` to properly use `flex: 1 1 auto` instead of width and
height;
---
 src/styles/_legacy-plots.scss       |  4 +---
 src/ui/components/object-frame.scss | 13 ++++---------
 src/ui/inspector/inspector.scss     |  4 +++-
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss
index e02e449204..bd8c12710d 100644
--- a/src/styles/_legacy-plots.scss
+++ b/src/styles/_legacy-plots.scss
@@ -118,9 +118,7 @@ mct-plot {
 
 .gl-plot {
     display: flex;
-    position: relative;
-    width: 100%;
-    height: 100%;
+    flex: 1 1 auto;
 
     /*********************** AXIS AND DISPLAY AREA */
     .plot-wrapper-axis-and-display-area {
diff --git a/src/ui/components/object-frame.scss b/src/ui/components/object-frame.scss
index dd1d17f654..f36eb6e678 100644
--- a/src/ui/components/object-frame.scss
+++ b/src/ui/components/object-frame.scss
@@ -74,11 +74,9 @@
         height: 0; // Chrome 73 overflow bug fix
         overflow: auto;
 
-        .u-angular-object-view-wrapper {
-            .u-fills-container {
-                // Expand component types that fill a container
-                @include abs();
-            }
+        .u-fills-container {
+            // Expand component types that fill a container
+            @include abs();
         }
     }
 
@@ -91,8 +89,5 @@
 }
 
 .u-angular-object-view-wrapper {
-    flex: 1 1 auto;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
+    display: contents;
 }
diff --git a/src/ui/inspector/inspector.scss b/src/ui/inspector/inspector.scss
index cd5b56107a..528e6ead24 100644
--- a/src/ui/inspector/inspector.scss
+++ b/src/ui/inspector/inspector.scss
@@ -4,7 +4,7 @@
     flex-direction: column;
 
     > * {
-        // Thi is on purpose: want extra margin on top object-name element
+        // This is on purpose: want extra margin on top object-name element
         margin-top: $interiorMargin;
     }
 
@@ -41,6 +41,8 @@
 
     &__content {
         flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
     }
 
     &__elements {

From 8b088b7a2c1df097eb4c47506c69df662b9c1b9b Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Tue, 14 Jul 2020 18:53:30 -0700
Subject: [PATCH 2/5] Fix Safari display issues #3192

- Fix Status area indicators width problem;
- Also fixes collapsing-status-area-indicator-bubbles transition problem
 as well!;
---
 src/ui/layout/status-bar/indicators.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ui/layout/status-bar/indicators.scss b/src/ui/layout/status-bar/indicators.scss
index 67001aeb73..10955bc94d 100644
--- a/src/ui/layout/status-bar/indicators.scss
+++ b/src/ui/layout/status-bar/indicators.scss
@@ -76,8 +76,12 @@
 [class*='minify-indicators'] {
     // All styles for minified Indicators should go in here
     .c-indicator:not(.no-minify) {
+        overflow: hidden; // Solves width problem in Safari as well as collapsing bubbles problem
+
         @include hover() {
             background: $colorIndicatorBgHov;
+            overflow: visible;
+
             .c-indicator__label {
                 box-shadow: $colorIndicatorMenuBgShdw;
                 transform: scale(1.0);

From 73b81e38e736ec7fc435958e8abf92f7f9e4bd0c Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Tue, 14 Jul 2020 19:22:18 -0700
Subject: [PATCH 3/5] Fix Safari display issues #3192

- Fix collapsed Status area indicators width problem;
---
 src/ui/layout/status-bar/indicators.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/ui/layout/status-bar/indicators.scss b/src/ui/layout/status-bar/indicators.scss
index 10955bc94d..1d33692662 100644
--- a/src/ui/layout/status-bar/indicators.scss
+++ b/src/ui/layout/status-bar/indicators.scss
@@ -76,16 +76,19 @@
 [class*='minify-indicators'] {
     // All styles for minified Indicators should go in here
     .c-indicator:not(.no-minify) {
-        overflow: hidden; // Solves width problem in Safari as well as collapsing bubbles problem
+        border: 1px solid transparent; // Hack to make minified sizing work in Safari. Have no idea why this works.
+        overflow: visible;
+        transition: all;
 
         @include hover() {
             background: $colorIndicatorBgHov;
-            overflow: visible;
+            transition: all 250ms ease-in 200ms;
 
             .c-indicator__label {
                 box-shadow: $colorIndicatorMenuBgShdw;
                 transform: scale(1.0);
-                transition: all 100ms ease-out 100ms;
+                overflow: visible;
+                //transition: all 100ms ease-out 100ms;
             }
         }
         .c-indicator__label {
@@ -99,7 +102,7 @@
             position: absolute;
             transform-origin: 90% 0;
             transform: scale(0.0);
-            overflow: visible;
+            overflow: hidden;
             z-index: 50;
 
             &:before {

From baa7c0bc584a22162e6c2d972346670bb8851a1d Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Tue, 14 Jul 2020 21:51:22 -0700
Subject: [PATCH 4/5] Fix Safari display issues #3192

- Tweak to Status area indicator hover bubbles;
---
 src/ui/layout/status-bar/indicators.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui/layout/status-bar/indicators.scss b/src/ui/layout/status-bar/indicators.scss
index 1d33692662..ce334d3c24 100644
--- a/src/ui/layout/status-bar/indicators.scss
+++ b/src/ui/layout/status-bar/indicators.scss
@@ -78,21 +78,21 @@
     .c-indicator:not(.no-minify) {
         border: 1px solid transparent; // Hack to make minified sizing work in Safari. Have no idea why this works.
         overflow: visible;
-        transition: all;
+        transition: transform;
 
         @include hover() {
             background: $colorIndicatorBgHov;
-            transition: all 250ms ease-in 200ms;
+            transition: transform 250ms ease-in 200ms; // Go-away transition
 
             .c-indicator__label {
                 box-shadow: $colorIndicatorMenuBgShdw;
                 transform: scale(1.0);
                 overflow: visible;
-                //transition: all 100ms ease-out 100ms;
+                transition: transform 100ms ease-out 100ms; // Appear transition
             }
         }
         .c-indicator__label {
-            transition: all 250ms ease-in 200ms;
+            transition: transform 250ms ease-in 200ms; // Go-away transition
             background: $colorIndicatorMenuBg;
             color: $colorIndicatorMenuFg;
             border-radius: $controlCr;

From b1467548da489c9a8176b47f70fd2adc1cf71179 Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Tue, 14 Jul 2020 23:40:42 -0700
Subject: [PATCH 5/5] Fix Safari display issues #3192

- Tweaks to fix `c-tab` elements, fix clip-path for webkit;
- Fix Notebook Snapshots header;
---
 .../notebook-snapshot-container.vue           | 17 +++++++------
 src/styles/_controls.scss                     | 24 ++++++++++---------
 src/ui/components/object-label.scss           |  3 +--
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/plugins/notebook/components/notebook-snapshot-container.vue b/src/plugins/notebook/components/notebook-snapshot-container.vue
index 950f655ba3..8dcbba0f64 100644
--- a/src/plugins/notebook/components/notebook-snapshot-container.vue
+++ b/src/plugins/notebook/components/notebook-snapshot-container.vue
@@ -2,13 +2,16 @@
 <div class="c-snapshots-h">
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
-            <div class="l-browse-bar__object-name--w icon-notebook">
-                <div class="l-browse-bar__object-name">
-                    Notebook Snapshots
-                    <span v-if="snapshots.length"
-                          class="l-browse-bar__object-details"
-                    >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
-                    </span>
+            <div class="l-browse-bar__object-name--w">
+                <div class="l-browse-bar__object-name c-object-label">
+                    <div class="c-object-label__type-icon icon-notebook"></div>
+                    <div class="c-object-label__name">
+                        Notebook Snapshots
+                        <span v-if="snapshots.length"
+                              class="l-browse-bar__object-details"
+                        >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
+                        </span>
+                    </div>
                 </div>
                 <PopupMenu v-if="snapshots.length > 0"
                            :popup-menu-items="popupMenuItems"
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index f31fb39c62..5dc8bfa673 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -411,7 +411,17 @@ select {
 
 .c-tab {
     // Used in Tab View, generic tabs
-    background: $colorBtnBg;
+    $notchSize: 7px;
+    $clipPath:
+        polygon(
+            0% 0%,
+            calc(100% - #{$notchSize}) 0%,
+            100% #{$notchSize},
+            100% calc(100% - #{$notchSize}),
+            100% 100%,
+            0% 100%
+        );
+    background: rgba($colorBtnBg, 0.7);
     color: $colorBtnFg;
     cursor: pointer;
     display: flex;
@@ -420,16 +430,8 @@ select {
     margin: 1px 1px 0 0;
     padding: $interiorMargin $interiorMarginLg;
     white-space: nowrap;
-    --notchSize: 7px;
-    clip-path:
-        polygon(
-            0% 0%,
-            calc(100% - var(--notchSize)) 0%,
-            100% var(--notchSize),
-            100% calc(100% - var(--notchSize)),
-            100% 100%,
-            0% 100%
-        );
+    clip-path: $clipPath;
+    -webkit-clip-path: $clipPath; // Safari
 
     > * + * {
         margin-left: $interiorMargin;
diff --git a/src/ui/components/object-label.scss b/src/ui/components/object-label.scss
index 3181f23a31..395c223086 100644
--- a/src/ui/components/object-label.scss
+++ b/src/ui/components/object-label.scss
@@ -3,7 +3,7 @@
     // Used mostly in trees and lists
     display: flex;
     align-items: center;
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     overflow: hidden;
     white-space: nowrap;
 
@@ -19,7 +19,6 @@
         display: block;
         flex: 0 0 auto;
         font-size: 1.1em;
-        //margin-right: $interiorMargin;
     }
 
     &.is-missing {