Fix contributions bar overflowing

molly · Aug 4, 2024 · 7b42ca0 · 7b42ca0
1 parent d0c5306
commit 7b42ca0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/src/components/DonationsBar.js b/src/components/DonationsBar.js
@@ -27,19 +27,21 @@ export default function DonationsBar({
     0
   );
 
-  let denominator;
-  if (remainingDonations >= 0 || remainingCredits > 0) {
-    denominator = totalExpenses + remainingDonations + remainingCredits;
-  } else {
-    denominator = totalExpenses;
-  }
+  const denominator = totalExpenses + remainingDonations + remainingCredits;
 
-  const usedCreditsWidth = (usedCredits / denominator) * 100;
-  const paidWidth =
-    (Math.min(expensesAfterCredits, donations) / denominator) * 100;
-  const remainingCreditsWidth = (remainingCredits / denominator) * 100;
-  const remainingDonationsWidth = (remainingDonations / denominator) * 100;
-  const remainingExpensesWidth = (remainingExpenses / denominator) * 100;
+  const usedCreditsWidth = Math.floor((usedCredits / denominator) * 100);
+  const paidWidth = Math.floor(
+    (Math.min(expensesAfterCredits, donations) / denominator) * 100
+  );
+  const remainingCreditsWidth = Math.floor(
+    (remainingCredits / denominator) * 100
+  );
+  const remainingDonationsWidth = Math.floor(
+    (remainingDonations / denominator) * 100
+  );
+  const remainingExpensesWidth = Math.floor(
+    (remainingExpenses / denominator) * 100
+  );
 
   return (
     <div className="donations-bar-wrapper">

diff --git a/src/pages/contribute.js b/src/pages/contribute.js
@@ -1,20 +1,20 @@
-import React, { useMemo } from "react";
 import PropTypes from "prop-types";
+import React, { useMemo } from "react";
 import useGA from "../hooks/useGA";
 
-import { add, sub, isPast, startOfMonth } from "date-fns";
+import { add, isPast, startOfMonth, sub } from "date-fns";
 import filter from "lodash.filter";
 import find from "lodash.find";
 import { formatDollarString } from "../js/utilities";
 
 import { getMoney } from "../db/money";
 
-import CustomHead from "../components/CustomHead";
-import SimpleHeader from "../components/SimpleHeader";
 import BackBar from "../components/BackBar";
+import CustomHead from "../components/CustomHead";
+import DonationsBar from "../components/DonationsBar";
 import ExternalLink from "../components/ExternalLink";
 import Footer from "../components/Footer";
-import DonationsBar from "../components/DonationsBar";
+import SimpleHeader from "../components/SimpleHeader";
 
 export async function getServerSideProps() {
   return {
@@ -192,6 +192,19 @@ export default function Contribute({ money }) {
                   )}
                 </td>
               </tr>
+              <tr>
+                <td colSpan={2}>
+                  Remaining expenses (after donations and credits)
+                </td>
+                <td className="number">
+                  {formatDollarString(
+                    Math.max(
+                      totalExpenses - money.usedCredits - money.donations,
+                      0
+                    )
+                  )}
+                </td>
+              </tr>
             </tbody>
           </table>
           <DonationsBar