adjusted programmatic rendering of embed button, took out extra scree…

…nsize breakpoint, modified embed css change
microsoft · Apr 30, 2024 · d8472f7 · d8472f7
1 parent c584e8f
commit d8472f7
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
     }
 }