version updates should use the whole width, and be placed under migrations

Author: jaimergp

src/components/StatusDashboard/index.jsx

@@ -35,7 +35,7 @@ export default function StatusDashboard() {
   const onLoadIncidents = incidents =>
     setState((prev) => ({ ...prev, incidents, loaded: prev.loaded + 1 }));
   return (
-    <main className="container">
+    <main className="container" style={{ paddingBottom: "1em" }}>
       <div className="row row--no-gutters">
         <div className="col col--2"><TOC /></div>
         <div className="col col--10">
@@ -59,6 +59,12 @@ export default function StatusDashboard() {
               <CurrentMigrations onLoad={onLoad} />
             </div>
           </div>
+          <div className="row row--no-gutters">
+            <div className="col col--12">
+              <div id="version" className={styles.toc_anchor}></div>
+              <VersionUpdates onLoad={onLoad} />
+            </div>
+          </div>
           <div className="row row--no-gutters">
             <div className="col col--12">
               <div id="azure" className={styles.toc_anchor}></div>
@@ -90,14 +96,10 @@ export default function StatusDashboard() {
             </div>
           </div>
           <div className="row row--no-gutters">
-            <div className="col col--6">
+            <div className="col col--12">
               <div id="incidents" className={styles.toc_anchor}></div>
               <Incidents onLoad={onLoadIncidents} />
             </div>
-            <div className="col col--6">
-              <div id="version" className={styles.toc_anchor}></div>
-              <VersionUpdates onLoad={onLoad} />
-            </div>
           </div>
         </div>
       </div>

src/components/StatusDashboard/toc.jsx

@@ -14,6 +14,9 @@ export default function TOC({ incident }) {
         <li className="menu__list-item">
           <a className="menu__link" href="#migrations">Current Migrations</a>
         </li>
+        <li className="menu__list-item">
+          <a className="menu__link" href="#version">Version Updates</a>
+        </li>
         <li className="menu__list-item">
           <a className="menu__link" href="#azure">Azure Pipelines Usage</a>
         </li>
@@ -26,9 +29,6 @@ export default function TOC({ incident }) {
         <li className="menu__list-item">
           <a className="menu__link" href="#incidents">Incidents</a>
         </li>
-        <li className="menu__list-item">
-          <a className="menu__link" href="#version">Version Updates</a>
-        </li>
       </ul>
     </aside>
   );

src/components/StatusDashboard/version_updates.jsx

@@ -6,7 +6,7 @@ import styles from "./styles.module.css";
 export default function VersionUpdates({ onLoad }) {
   const [{ collapsed, errored, expanded, errors, queued }, setState] =
     useState({
-      collapsed: { queued: true, errored: true },
+      collapsed: { queued: false, errored: true },
       expanded: {},
       errored: [],
       errors: {},

src/pages/status/index.jsx

@@ -8,7 +8,7 @@ export default function Home() {
       title="Status dashboard"
       description="Status dashboard for conda-forge"
     >
-      <StatusDashboard />
+      <StatusDashboard/>
     </Layout>
   );
 }