Update results screen to look better on smaller screens

Equal-Vote · Jul 24, 2024 · 4ec2638 · 4ec2638
1 parent 290885a
commit 4ec2638
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/frontend/src/components/util.tsx b/packages/frontend/src/components/util.tsx
@@ -287,8 +287,15 @@ export const ResultsBarChart = ({
           legendType="none"
           style={{overflow: 'visible'}}
         >
-          <LabelList dataKey="left" position="insideRight" fill="black" />
-          <LabelList dataKey="right" position="right" fill="black" />
+          {/* corresponds to mui md size */}
+          {/* also this won't dynamically adjust with resizing the screen  */}
+          {window.innerWidth > 900 ? <> 
+            <LabelList dataKey="left" position="insideRight" fill="black" />
+            <LabelList dataKey="right" position="right" fill="black" />
+          </>:<>
+            <LabelList dataKey="left" position="insideLeft" fill="black" />
+            <LabelList dataKey="right" position="insideLeft" fill="black" />
+          </>}
           {data.map((entry, index) => (
             <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
           ))}
@@ -427,11 +434,11 @@ export const ResultsTable = ({ className, data, minCellWidth = "120px" }) => {
         width: "100%",
       }}
     >
-      <table className={c}>
+      <table className={c} style={{minWidth: '100%'}}>
         <thead className={c}>
           <tr>
             {data[0].map((header, i) => (
-              <th key={i} className={c}>
+              <th key={i} className={c} style={{minWidth: i == 0 ? '125px' : '75px'}} >
                 {header}
               </th>
             ))}
@@ -444,7 +451,9 @@ export const ResultsTable = ({ className, data, minCellWidth = "120px" }) => {
                 <td
                   key={j}
                   className={c}
-                  style={{ paddingLeft: j == 0 ? "8px" : "0" }}
+                  style={{
+                    paddingLeft: j == 0 ? "8px" : "0",
+                  }}
                 >
                   {value}
                 </td>

diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
@@ -68,7 +68,6 @@ code {
 }
 
 .resultTable{
-  width: 100%;
   border: 1px solid black;
   margin: 0;
   border-collapse: collapse;