fix: minor media print improvements

Author: RomanHotsiy

src/common-elements/panels.ts

@@ -5,7 +5,7 @@ export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium', true)`
     width: 100%;
     padding: ${props =>
       `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
@@ -19,7 +19,7 @@ export const Section = withProps<{ underlined?: boolean }>(
 )`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;
 
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium', true)`
     padding: 0;
   `}
   ${props =>
@@ -45,7 +45,7 @@ export const RightPanel = styled.div`
   background-color: ${props => props.theme.rightPanel.backgroundColor};
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium', true)`
     width: 100%;
     padding: ${props =>
       `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
@@ -61,7 +61,7 @@ export const Row = styled.div`
   width: 100%;
   padding: 0;
 
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium', true)`
     flex-direction: column;
   `};
 `;

src/components/Redoc/styled.elements.tsx

@@ -30,9 +30,10 @@ export const ApiContentWrap = styled.div`
   position: relative;
   overflow: hidden;
   width: calc(100% - ${props => props.theme.menu.width});
-  ${media.lessThan('small')`
+  ${media.lessThan('small', true)`
     width: 100%;
   `};
+
   contain: layout;
 `;
 
@@ -43,7 +44,7 @@ export const BackgroundStub = styled.div`
   bottom: 0;
   right: 0;
   width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4);
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium', true)`
     display: none;
   `};
 `;

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -43,6 +43,10 @@ const StyledStickySidebar = withProps<{ open?: boolean }>(styled.div)`
     background: #ffffff;
     display: ${props => (props.open ? 'flex' : 'none')};
   `};
+
+  @media print {
+    display: none;
+  }
 `;
 
 const FloatingButton = styled.div`
@@ -60,11 +64,16 @@ const FloatingButton = styled.div`
   ${media.lessThan('small')`
     display: flex;
   `};
+
   bottom: 44px;
 
   width: 60px;
   height: 60px;
   padding: 0 20px;
+
+  @media print {
+    display: none;
+  }
 `;
 
 @observer

src/styled-components.ts

@@ -26,9 +26,10 @@ const {
 >;
 
 export const media = {
-  lessThan(breakpoint) {
+  lessThan(breakpoint, print?: boolean) {
     return (...args) => css`
-      @media (max-width: ${props => props.theme.breakpoints[breakpoint]}) {
+      @media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
+          props.theme.breakpoints[breakpoint]}) {
         ${(css as any)(...args)};
       }
     `;