Improve the news component

Change how the GUI computes its height to so that it can handle
the extra menu bar height easily

Author: GarboMuffin

src/components/gui/gui.css

@@ -4,10 +4,12 @@
 
 .page-wrapper {
     height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .body-wrapper {
-    height: calc(100% - $menu-bar-height);
+    flex-grow: 1;
     background-color: $ui-primary;
 }
 

src/components/menu-bar/tw-news.css

@@ -1,12 +1,13 @@
 @import "../../css/colors.css";
 
 .news {
-    background: $pen-primary;
+    background: $motion-tertiary;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding: 0.375rem 0;
+    gap: 0.5rem;
 }
 
 .text {
@@ -20,5 +21,6 @@
 }
 
 .close {
+    flex-shrink: 0;
     margin-right: 0.5rem;
 }

src/components/menu-bar/tw-news.jsx

@@ -36,6 +36,7 @@ class TWNews extends React.Component {
         this.setState({
             closed: true
         });
+        window.dispatchEvent(new Event('resize'));
     }
     render () {
         if (this.state.closed || isScratchDesktop()) {