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] 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 {