in progress: enable collapse for gameboard components

src/components/Card/CardRow.scss

@@ -7,6 +7,10 @@
     margin: 1rem 0;
     width: 55vw;
 
+    &.collapsed {
+        width: 15vw;
+    }
+
     .card-row-top-bar {
         display: flex;
         align-items: center;

src/components/Card/CardRow.tsx

@@ -27,7 +27,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
     }
 
     return (
-        <div className={`card-row tier-${tier}`}>
+        <div className={`card-row tier-${tier} ${collapsed && 'collapsed'}`}>
             <div className="card-row-top-bar">
                 <p>Tier: {tier}</p>
                 <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>

src/components/Gameboard/Gameboard.scss

@@ -1,7 +1,7 @@
 .gameboard {
     display: flex;
     flex-flow: row nowrap;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
 
     background-color: rgb(57, 57, 65);
@@ -11,18 +11,18 @@
         display: flex;
         flex-flow: column nowrap;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: center;
         margin: 1rem;
+        padding: 1rem;
     }
 
     .gameboard-left {
-        min-width: 50vw;
-        padding: 1rem;
+        align-items: flex-start;
     }
 
     .gameboard-right {
-        min-width: 35vw;
-        padding: 1rem;
+        max-width: 30vw;
+        align-items: flex-end;
     }
 
     .round-marker {

src/components/Gameboard/Gameboard.tsx

@@ -88,7 +88,7 @@ export default function Gameboard({ state, setState }: StateProps) {
             setView(
                 <div className="gameboard">
                     <section className="gameboard-left">
-                        <h1 className="round-marker">Round: {state.round}</h1>
+                        <h2>Round: {state.round}</h2>
                         <Nobles state={state} setState={setState} />
                         <CardRow tier={3} state={state} setState={setState} />
                         <CardRow tier={2} state={state} setState={setState} />

src/components/Nobles/Nobles.scss

@@ -6,7 +6,11 @@
     background-color: rgb(212, 196, 152);
     color: black;
     padding: 1rem 0;
-    min-width: 55vw;
+    width: 55vw;
+
+    &.collapsed {
+        width: 15vw;
+    }
 
     .nobles-topbar {
         display: flex;

src/components/Nobles/Nobles.tsx

@@ -17,7 +17,7 @@ export default function Nobles({ state }: StateProps) {
     }
 
     return (
-        <div className="nobles-panel">
+        <div className={`nobles-panel ${collapsed && 'collapsed'}`}>
             <div className="nobles-topbar">
                 <strong className="nobles-header">NOBLES</strong>
                 <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>