spec goal overflow

client/assets/styles/instance.less

@@ -57,7 +57,7 @@
 
 .instance .info svg {
     display: inline;
-    height: 1.25em;
+    height: 1em;
 }
 
 .instance .constructs {
@@ -384,7 +384,7 @@
     }
 
     .bonus {
-        justify-content: flex-end;
+        justify-content: center;
     }
 }
 

client/src/components/info.component.jsx

@@ -56,6 +56,8 @@ function InfoComponent(args) {
                     green: [],
                     blue: [],
                 };
+                const overFlow = [];
+
                 colours.forEach(c => {
                     const colourReq = bonus.req[c];
                     if (colourReqs === 0) return false;
@@ -67,15 +69,24 @@ function InfoComponent(args) {
                     const dots = range(start, colourReq).map(j => {
                         const unmet = teamColours[c] < j + 1;
 
+
                         const reqClass = unmet
                             ? 'unmet'
                             : '';
 
-                        colourGoals[c].push(
-                            <figure key={j} alt={c.colour} class={reqClass} >
-                                {shapes.vboxColour(c)}
-                            </figure>
-                        );
+                        if (j - start > 4) {
+                            overFlow.push(
+                                <figure key={j} alt={c.colour} class={reqClass} >
+                                    {shapes.vboxColour(c)}
+                                </figure>
+                            );
+                        } else {
+                            colourGoals[c].push(
+                                <figure key={j} alt={c.colour} class={reqClass} >
+                                    {shapes.vboxColour(c)}
+                                </figure>
+                            );
+                        }
 
                         return true;
                     });
@@ -97,10 +108,11 @@ function InfoComponent(args) {
                     }
                     return false;
                 });
-
+                const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
                 return (
                     <div key={i} class="spec-goal">
                         {goals}
+                        {overFlowObj}
                         <div class={`${reqClass} bonus`} >
                             + {bonus.bonus}
                         </div>