Fixed balance card text wrapping for big values and charts modebar po…

…sotion
HackerSchool · Feb 11, 2024 · 608b548 · 608b548
1 parent 4de321a
commit 608b548
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/frontend/src/components/DashboardCard.jsx b/frontend/src/components/DashboardCard.jsx
@@ -10,18 +10,18 @@ function DashboardCard({
   smallerMain = false,
 }) {
   return (
-    <div className={`dashboard-card ${green && "green"}`}>
-      <div className={`dashboard-card-text ${subText && "align-top"}`}>
-        <div className="dashboard-card-heading">{headingText}</div>
+    <div className={`dashboard-card ${green ? "green" : ""}`}>
+      <div className={`dashboard-card-text ${subText ? "align-top" : ""}`}>
+        {headingText && <div className="dashboard-card-heading">{headingText}</div>}
         <div
-          className={`dashboard-card-main ${bolderMain && "bolder"} ${smallerMain && "smaller"}`}
+          className={`dashboard-card-main ${bolderMain ? "bolder" : ""} ${smallerMain ? "smaller" : ""}`}
         >
           {mainText}
-          <div className="dashboard-card-sub">{subText}</div>
+          {subText && <div className="dashboard-card-sub">{subText}</div>}
         </div>
       </div>
 
-      <div className="dashboard-card-icon">{icon}</div>
+      {icon && <div className="dashboard-card-icon">{icon}</div>}
     </div>
   );
 }

diff --git a/frontend/src/styles/Charts.css b/frontend/src/styles/Charts.css
@@ -125,7 +125,7 @@ rect.selector-rect:where([style*="fill: rgb(212, 212, 212)"]) {
 
 .js-plotly-plot .plotly .modebar {
   position: absolute;
-  top: 50%;
+  top: 0;
   transform: translateY(-50%);
   margin: 0.5rem;
 }

diff --git a/frontend/src/styles/Dashboard.css b/frontend/src/styles/Dashboard.css
@@ -89,6 +89,7 @@
   align-items: center;
   justify-content: space-between;
   box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
 }
 
 .dashboard-card.green {
@@ -100,6 +101,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
+  text-wrap: nowrap;
 }
 
 .dashboard-card-text.align-top {
@@ -120,7 +122,7 @@
 
 .dashboard-card-main.bolder {
   font-weight: 500;
-  font-size: 2.5rem;
+  font-size: 2.35rem;
 }
 
 .dashboard-card-main.smaller {