From d8472f71e6a23244665ebe638d02e5aa7d0ff40b Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 30 Apr 2024 13:53:42 -0700
Subject: [PATCH] adjusted programmatic rendering of embed button, took out
 extra screensize breakpoint, modified embed css change

---
 react-common/components/share/ShareInfo.tsx       |  2 +-
 react-common/styles/controls/Modal.less           | 12 ------------
 react-common/styles/react-common-breakpoints.less |  8 +++-----
 react-common/styles/share/share.less              |  5 ++---
 4 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/react-common/components/share/ShareInfo.tsx b/react-common/components/share/ShareInfo.tsx
index bd8ab1434ab4..024ce2c44f21 100644
--- a/react-common/components/share/ShareInfo.tsx
+++ b/react-common/components/share/ShareInfo.tsx
@@ -72,7 +72,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const [ isAnonymous, setIsAnonymous ] = React.useState(!isLoggedIn || anonymousShareByDefault);
     const [ isShowingMultiConfirmation, setIsShowingMultiConfirmation ] = React.useState(false);
     // this is 854 because we have some dissonance between our styling and semantic ui's styling
-    const hideEmbed = useWindowWidth() <= 854;
+    const hideEmbed = useWindowWidth() <= 766;
 
     const { simScreenshot, simGif } = pxt.appTarget.appTheme;
     const showSimulator = (simScreenshot || simGif) && !!simRecorder;
diff --git a/react-common/styles/controls/Modal.less b/react-common/styles/controls/Modal.less
index e18ca26dc0f7..dd1fd2894cd8 100644
--- a/react-common/styles/controls/Modal.less
+++ b/react-common/styles/controls/Modal.less
@@ -155,18 +155,6 @@
     }
 }
 
-@media @mobileShare {
-    .common-modal-body {
-        padding-top: 0.5rem;
-        padding-bottom: 0;
-    }
-
-    .common-modal-header {
-        height: 2.5rem;
-        align-items: center;
-    }
-}
-
 @media @smallMobileShare {
     .wide>.common-modal {
         height: 95%;
diff --git a/react-common/styles/react-common-breakpoints.less b/react-common/styles/react-common-breakpoints.less
index 37e2d79a47bb..994d660a4735 100644
--- a/react-common/styles/react-common-breakpoints.less
+++ b/react-common/styles/react-common-breakpoints.less
@@ -1,22 +1,20 @@
 @mobileBreakpoint: 320px;
-@shareModalBreakpoint: 440px;
 @tabletBreakpoint: 768px;
 @computerBreakpoint: 992px;
 @largeMonitorBreakpoint: 1200px;
 @widescreenMonitorBreakpoint: 1920px;
 
-@smallShareScreen : (@mobileBreakpoint + 1px);
+@smallMobileScreen: (@mobileBreakpoint + 1px);
 @largestMobilePortraitScreen: (@mobileBreakpoint + 100px);
 @largestMobileScreen: (@tabletBreakpoint - 1px);
 @largestTabletScreen: (@computerBreakpoint - 1px);
-@shareScreen: (@shareModalBreakpoint + 1px);
 @largestSmallMonitor: (@largeMonitorBreakpoint - 1px);
 @largestLargeMonitor: (@widescreenMonitorBreakpoint - 1px);
 
 @portraitMobileAndBelow: ~"only screen and (max-width: @{largestMobilePortraitScreen})";
 @mobileAndBelow: ~"only screen and (max-width: @{largestMobileScreen})";
-@mobileShare: ~"only screen and (max-width: @{shareScreen})";
-@smallMobileShare: ~"only screen and (max-width: @{smallShareScreen}) and (max-height: 438px)";
+@mobileShare: ~"only screen and (max-width: @{largestMobilePortraitScreen})";
+@smallMobileShare: ~"only screen and (max-width: @{smallMobileScreen})";
 @tabletAndBelow: ~"only screen and (max-width: @{largestTabletScreen})";
 @computerAndBelow: ~"only screen and (max-width: @{largestSmallMonitor})";
 @largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";
diff --git a/react-common/styles/share/share.less b/react-common/styles/share/share.less
index 9e0339667609..f6e66717e8c0 100644
--- a/react-common/styles/share/share.less
+++ b/react-common/styles/share/share.less
@@ -313,11 +313,10 @@
     .gif-recorder-content .thumbnail-controls {
         padding: 0 2rem;
     }
-}
 
-@media only screen and (max-width: 854px) {
     .embed.mobile-portrait-hidden {
-        display: none !important;
+        color: #323130 !important;
+        background: #e0e1e2 !important;
     }
 }