From 95e7b9eda3ebb576ff433d465eb1958600204928 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Wed, 7 Jun 2023 12:00:02 -0400
Subject: [PATCH] Fleet UI: Improvements to Sandbox mode styling (#12195)

---
 changes/12065-sandbox-styling-improvements            |  1 +
 .../PremiumFeatureMessage/PremiumFeatureMessage.tsx   |  7 +++++--
 .../Sandbox/SandboxExpiryMessage/_styles.scss         |  2 ++
 frontend/pages/admin/_styles.scss                     | 11 -----------
 .../pages/schedule/ManageSchedulePage/_styles.scss    |  4 ++++
 5 files changed, 12 insertions(+), 13 deletions(-)
 create mode 100644 changes/12065-sandbox-styling-improvements

diff --git a/changes/12065-sandbox-styling-improvements b/changes/12065-sandbox-styling-improvements
new file mode 100644
index 0000000000..73e959d06d
--- /dev/null
+++ b/changes/12065-sandbox-styling-improvements
@@ -0,0 +1 @@
+- Improvements to styling in Sandbox mode
diff --git a/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx b/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx
index e49ede9110..40a7fbf775 100644
--- a/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx
+++ b/frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx
@@ -17,8 +17,11 @@ const PremiumFeatureMessage = ({ className }: IPremiumFeatureMessage) => {
         <Icon name="premium-feature" />
         <p>This feature is included in Fleet Premium.</p>
         <div className="external-link-and-icon">
-          <CustomLink url="https://fleetdm.com/upgrade" text="Learn more" />
-          <Icon name="external-link" />
+          <CustomLink
+            url="https://fleetdm.com/upgrade"
+            text="Learn more"
+            newTab
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss b/frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss
index 1352603a53..b19dd14b30 100644
--- a/frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss
+++ b/frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss
@@ -10,6 +10,8 @@
   font-size: $x-small;
   color: $core-fleet-black;
   font-weight: $regular;
+  position: relative; // Position in front of settings sticky header space
+  z-index: 9; // Position in front of settings sticky header space
 
   p {
     margin: 0;
diff --git a/frontend/pages/admin/_styles.scss b/frontend/pages/admin/_styles.scss
index 138a687053..f8fdb0e44b 100644
--- a/frontend/pages/admin/_styles.scss
+++ b/frontend/pages/admin/_styles.scss
@@ -22,17 +22,6 @@
     }
   }
 
-  // These styles are here to make the sticky header and nav work correctly
-  // with the sandbox mode expiry message.
-  &.sandbox-mode {
-    h1 {
-      &::before {
-        height: 0;
-        top: 0;
-      }
-    }
-  }
-
   .component__tabs-wrapper {
     top: $pad-xxlarge; // for sticky
     z-index: 3;
diff --git a/frontend/pages/schedule/ManageSchedulePage/_styles.scss b/frontend/pages/schedule/ManageSchedulePage/_styles.scss
index 3d22a89ec4..62195284b1 100644
--- a/frontend/pages/schedule/ManageSchedulePage/_styles.scss
+++ b/frontend/pages/schedule/ManageSchedulePage/_styles.scss
@@ -108,6 +108,10 @@
         }
       }
     }
+
+    .empty-table__container {
+      max-width: 465px; // Fixes wider font causing orphaned word on all teams empty state
+    }
   }
 
   .no-team-schedule {