Tweak chart design

tweedegolf · May 27, 2024 · 5b95e5c · 5b95e5c
1 parent f004fc2
commit 5b95e5c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/CompetenceResult.tsx b/src/CompetenceResult.tsx
@@ -39,7 +39,7 @@ export default function CompetenceResult({
               <div
                 className="bar"
                 style={{
-                  width: `${percentage}%`,
+                  width: `calc(${percentage}% - 0.5rem)`,
                 }}
               ></div>
             </td>

diff --git a/src/ThemeResult.tsx b/src/ThemeResult.tsx
@@ -32,7 +32,7 @@ export default function ThemeResult({ state }: { state: State }): JSX.Element {
                 className="bar"
                 style={{
                   backgroundColor: color,
-                  width: `${percentage}%`,
+                  width: `calc(${percentage}% - 0.5rem)`,
                 }}
               ></div>
             </td>
@@ -45,7 +45,7 @@ export default function ThemeResult({ state }: { state: State }): JSX.Element {
             <div
               className="bar"
               style={{
-                width: `${totalPercentage}%`,
+                width: `calc(${totalPercentage}% - 0.5rem)`,
               }}
             ></div>
           </td>

diff --git a/src/index.css b/src/index.css
@@ -208,7 +208,7 @@ table.form tr.selectable:hover {
   top: 0.5rem;
   content: '';
   display: block;
-  width: 100%;
+  width: calc(100% - 0.5rem);
   height: 1rem;
   background-color: #fafafa;
 }
@@ -225,12 +225,20 @@ table.form tr.selectable:hover {
   padding: 0.25rem
 }
 
+.result td {
+  vertical-align: top;
+}
+
 .result td:nth-child(2) {
   text-align: right;
   padding: 0.25rem 1rem;
 }
 
 @media screen and (max-width: 768px) {
+  .result table {
+    width: 100%;
+  }
+
   .result .progress {
     max-width: 40vw;
   }