diff --git a/src/components/Heading.js b/src/components/Heading.js index 47ac473f2..15293fdd5 100644 --- a/src/components/Heading.js +++ b/src/components/Heading.js @@ -58,7 +58,7 @@ const Heading = ({ sectionDepth, nodeData, className, as, ...rest }) => { const asHeadingNumber = as ?? sectionDepth; const asHeading = asHeadingNumber >= 1 && asHeadingNumber <= 6 ? `h${asHeadingNumber}` : 'h6'; const isPageTitle = sectionDepth === 1; - const { isMobile, isTabletOrMobile } = useScreenSize(); + const { isTabletOrMobile } = useScreenSize(); const { selectors } = useContext(TabContext); const { hasDrawer, isOpen, setIsOpen } = useContext(InstruqtContext); const hasSelectors = selectors && Object.keys(selectors).length > 0; @@ -72,9 +72,9 @@ const Heading = ({ sectionDepth, nodeData, className, as, ...rest }) => { ( - + {children} - {hasSelectors && !tabsMainColumn && } + {hasSelectors && !tabsMainColumn && } )} > @@ -117,19 +117,25 @@ const Heading = ({ sectionDepth, nodeData, className, as, ...rest }) => { const HeadingContainer = styled.div` display: flex; - flex-direction: ${(props) => (props.stackVertically ? 'column' : 'row')}; + flex-direction: row; justify-content: space-between; -`; -const ChildContainer = styled.div( - ({ isStacked }) => css` - ${isStacked && 'margin: 4px 0 16px 0;'} - display: flex; + @media ${theme.screenSize.upToLarge} { flex-direction: column; - justify-content: center; - align-items: ${isStacked ? 'flex-start' : 'center'}; - ` -); + } +`; + +const ChildContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @media ${theme.screenSize.upToLarge} { + margin: 4px 0 16px 0; + align-items: flex-start; + } +`; Heading.propTypes = { sectionDepth: PropTypes.number.isRequired, diff --git a/src/components/Tabs/TabSelectors.js b/src/components/Tabs/TabSelectors.js index 5204ea7fb..10715e6f9 100644 --- a/src/components/Tabs/TabSelectors.js +++ b/src/components/Tabs/TabSelectors.js @@ -18,7 +18,12 @@ const selectStyle = css` @media ${theme.screenSize.smallAndUp} { /* Min width of right panel */ - max-width: 180px; + max-width: 140px; + } + + @media ${theme.screenSize.upToLarge} { + /* Supports the alignment when on tablet or mobile */ + max-width: 300px; } `;