Simplify Window.Content, add flexibility

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) {

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 => {
         </div>
       )}
       {hasContent && (
-        <div className="Section__content">
+        <Box
+          className={classes([
+            'Section__content',
+            scrollable && 'Section__content--scrollable',
+            (props.flexBasis === 'content') && 'Section__content--noFlex',
+          ])}>
           {content}
           {children}
-        </div>
+        </Box>
       )}
     </Box>
   );

tgui/packages/tgui/layouts/Window.js

@@ -73,15 +73,10 @@ export class Window extends Component {
 }
 
 const WindowContent = props => {
-  const { scrollable, children } = props;
-  // A bit lazy to actually write styles for it,
-  // so we simply include a Box with margins.
+  const { scrollable, className, children } = props;
   return (
-    <Layout.Content
-      scrollable={scrollable}>
-      <Box m={1}>
-        {children}
-      </Box>
+    <Layout.Content className={className} scrollable={scrollable}>
+      {children}
     </Layout.Content>
   );
 };

tgui/packages/tgui/styles/components/Section.scss

@@ -23,8 +23,17 @@ $color-separator: colors.$primary !default;
   }
 }
 
+.Section--flex {
+  display: flex;
+  flex-flow: column;
+}
+
+.Section--flex .Section__content {
+  overflow: auto;
+  flex: 1;
+}
+
 .Section__title {
-  position: relative;
   padding: 6px;
   border-bottom: 2px solid $color-separator;
 }

tgui/packages/tgui/styles/layouts/Layout.scss

@@ -7,9 +7,8 @@
   bottom: 0;
   left: 0;
   right: 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  margin-bottom: -6px;
+  overflow: hidden;
+  margin: 6px;
 
   // Fancy scrollbar
   scrollbar-base-color: color.scale(
@@ -35,7 +34,16 @@
     $lightness: 10%);
 }
 
-.Layout__content--scrollable {
-  overflow-y: scroll;
-  margin-bottom: 0;
+.Layout__content--flexRow {
+  display: flex;
+  flex-flow: row;
+}
+
+.Layout__content--flexColumn {
+  display: flex;
+  flex-flow: column;
+}
+
+.Layout__content--scrollable {
+  overflow-y: auto;
 }