fix: ballot & resutls bugs

components/MeritProfile.tsx

@@ -167,9 +167,9 @@ const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
         left={proponentWidth + normalized[majorityValue] / 2}
       />
       <div className="d-flex">
+        {proponentWidth > 1e-5 ? (
           <div
-          className={`d-flex border border-${
-            proponentMajority ? 2 : 1
+            className={`d-flex border border-${proponentMajority ? 2 : 1
               } border-success`}
             style={{flexBasis: `${proponentWidth * 100}%`}}
           >
@@ -189,7 +189,12 @@ const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
                   />
                 );
               })}
-        </div>
+          </div>) : (
+          <div
+            className="d-flex"
+            style={{flexBasis: `${proponentWidth * 100}%`}}
+          >
+          </div>)}
         <div
           className="border border-2 border-primary"
           style={{flexBasis: `${normalized[majorityValue] * 100}%`}}
@@ -209,9 +214,9 @@ const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
               );
             })}
         </div>
+        {opponentWidth > 1e-5 ? (
           <div
-          className={`d-flex border border-${
-            proponentMajority ? 1 : 2
+            className={`d-flex border border-${proponentMajority ? 1 : 2
               } border-danger`}
             style={{flexBasis: `${opponentWidth * 100}%`}}
           >
@@ -231,7 +236,10 @@ const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
                   />
                 );
               })}
+          </div>) : (
+          <div className="d-flex" style={{flexBasis: `${opponentWidth * 100}%`}} >
           </div>
+        )}
       </div>
       {/* <div className='median dash'> </div> */}
     </>

components/ballot/BallotDesktop.tsx

@@ -33,7 +33,9 @@ const BallotDesktop = () => {
                 candidate={candidate}
               />
               <div className="d-flex">
-                {ballot.election.grades.map((_, gradeId) => {
+                {ballot.election.grades.sort(
+                  (a, b) => b.value - a.value
+                ).map((_, gradeId) => {
                   console.assert(gradeId < numGrades);
                   return (
                     <GradeInput

components/ballot/BallotMobile.tsx

@@ -56,7 +56,7 @@ const BallotMobile = () => {
                   <div className="ms-2" onClick={() => moveRight(true)}><FontAwesomeIcon color="#0A004C" icon={faChevronRight} /></div> : null}
               </div>
               <div className="d-flex mt-2 flex-column">
-                {ballot.election.grades.map((_, gradeId) => {
+                {ballot.election.grades.sort((a, b) => b.value - a.value).map((_, gradeId) => {
                   console.assert(gradeId < numGrades);
                   return (
                     <GradeInput

components/ballot/CandidateCard.tsx

@@ -23,7 +23,8 @@ const CandidateCard = ({candidate, onClick}: CandidateCardInterface) => {
     <div className="d-flex lh-sm flex-column justify-content-center ps-3">
       <span className="text-black fs-5 m-0 ">{candidate.name}</span>
       <br />
-      <span className="text-muted fs-6 m-0 fw-normal">{t("vote.more-details")}</span>
+      { //      <span className="text-muted fs-6 m-0 fw-normal">{t("vote.more-details")}</span>
+      }
     </div>
   </div>)
 }

components/ballot/GradeInput.tsx

@@ -32,7 +32,7 @@ const GradeInput = ({gradeId, candidateId}: GradeInputInterface) => {
   };
 
   const active = ballot.votes.some(b => b.gradeId === gradeId && b.candidateId === candidateId)
-  const color = active ? getGradeColor(gradeId, numGrades) : '#C3BFD8';
+  const color = active ? getGradeColor(grade.value, numGrades) : '#C3BFD8';
 
   return (<>
     <div