diff --git a/tgui/packages/tgui/components/Box.js b/tgui/packages/tgui/components/Box.js index 9d5e71c78a7..63fac6cd339 100644 --- a/tgui/packages/tgui/components/Box.js +++ b/tgui/packages/tgui/components/Box.js @@ -68,6 +68,7 @@ const mapColorPropTo = attrName => (style, value) => { const styleMapperByPropName = { // Direct mapping + display: mapRawPropTo('display'), position: mapRawPropTo('position'), overflow: mapRawPropTo('overflow'), overflowX: mapRawPropTo('overflow-x'), @@ -125,6 +126,15 @@ const styleMapperByPropName = { color: mapColorPropTo('color'), textColor: mapColorPropTo('color'), backgroundColor: mapColorPropTo('background-color'), + // Flex props + order: mapRawPropTo('order'), + flexDirection: mapRawPropTo('flex-direction'), + flexGrow: mapRawPropTo('flex-grow'), + flexShrink: mapRawPropTo('flex-shrink'), + flexWrap: mapRawPropTo('flex-wrap'), + flexFlow: mapRawPropTo('flex-flow'), + flexBasis: mapRawPropTo('flex-basis'), + flex: mapRawPropTo('flex'), // Utility props fillPositionedParent: (style, value) => { if (value) { diff --git a/tgui/packages/tgui/components/Section.js b/tgui/packages/tgui/components/Section.js index a9e60a54d98..be58a2cf386 100644 --- a/tgui/packages/tgui/components/Section.js +++ b/tgui/packages/tgui/components/Section.js @@ -9,6 +9,7 @@ export const Section = props => { buttons, content, children, + scrollable, ...rest } = props; const hasTitle = !isFalsy(title) || !isFalsy(buttons); @@ -18,6 +19,7 @@ export const Section = props => { className={classes([ 'Section', 'Section--level--' + level, + props.flexGrow && 'Section--flex', className, ])} {...rest}> @@ -32,10 +34,15 @@ export const Section = props => { )} {hasContent && ( -