fix: max with for ecogram and better label placement

geops · Apr 16, 2020 · 55c8d51 · 55c8d51
1 parent 0b30ae3
commit 55c8d51
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/components/Ecogram.js b/src/components/Ecogram.js
@@ -10,7 +10,7 @@ function Ecogram({ data, selectForestType }) {
   const { t } = useTranslation();
 
   return (
-    <svg x="0px" y="0px" viewBox="0 0 1050 1050">
+    <svg x="0px" y="0px" viewBox="0 0 1050 1050" className={styles.svg}>
       <EcogramPopup
         forestTypes={popup.forestTypes}
         onClose={() => setPopup({ forestTypes: [] })}
@@ -84,10 +84,10 @@ function Ecogram({ data, selectForestType }) {
       >
         {t('ecogram.wet')}
       </text>
-      <text x="180" y="1040" className={styles.label}>
+      <text x="150" y="1040" className={styles.label}>
         {t('ecogram.acid')}
       </text>
-      <text x="1000" y="1040" className={styles.label}>
+      <text x="940" y="1040" className={styles.label}>
         {t('ecogram.alkaline')}
       </text>
     </svg>

diff --git a/src/components/Ecogram.module.css b/src/components/Ecogram.module.css
@@ -34,3 +34,7 @@
   font-size: 2em;
   text-anchor: middle;
 }
+
+.svg {
+  max-width: 525px;
+}