Fix: Render map/table on Firefox mobile

Author: shuklaayush

package.json

@@ -12,7 +12,7 @@
     "corejs-typeahead": "^1.3.1",
     "d3-array": "^3.0.1",
     "d3-axis": "^3.0.0",
-    "d3-brush": "^2.1.0",
+    "d3-brush": "^3.0.0",
     "d3-fetch": "^3.0.1",
     "d3-format": "^3.0.0",
     "d3-geo": "^3.0.1",
@@ -22,7 +22,7 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.0.1",
-    "d3-transition": "^3.0.0",
+    "d3-transition": "^3.0.1",
     "date-fns": "^2.22.1",
     "date-fns-tz": "^1.1.4",
     "fast-deep-equal": "^3.1.3",

src/App.scss

@@ -1187,6 +1187,7 @@ h6 {
       fill: #a6abb0;
       stroke: #a6abb0;
       stroke-width: 0.5;
+      user-select: none;
       width: 16px;
 
       &:hover {
@@ -1749,16 +1750,10 @@ h6 {
     background: $pink-light;
     border-radius: 5px;
     color: $pink;
-    cursor: pointer;
     display: flex;
     flex-direction: row;
     margin-bottom: 0.5rem;
     padding: 0.5rem;
-    user-select: none;
-
-    &:hover {
-      background: $pink-hover;
-    }
 
     div {
       font-size: 13px;
@@ -1910,6 +1905,7 @@ abbr {
     height: 2.5rem;
     justify-content: center;
     margin-right: 0.25rem;
+    user-select: none;
     width: 2.5rem;
 
     svg {
@@ -2501,6 +2497,7 @@ abbr {
   cursor: pointer;
   position: absolute;
   right: 0;
+  user-select: none;
   z-index: 999;
 
   svg {
@@ -2838,6 +2835,7 @@ abbr {
           height: 2.5rem;
           justify-content: center;
           margin-left: 0.25rem;
+          user-select: none;
           width: 2.5rem;
 
           &.back {

src/components/Home.js

@@ -174,7 +174,7 @@ function Home() {
         <div
           className={classnames('home-right', {expanded: expandTable})}
           ref={homeRightElement}
-          style={{minHeight: '2rem'}}
+          style={{minHeight: '4rem'}}
         >
           {(isVisible || location.hash) && (
             <>

src/components/MapExplorer.js

@@ -301,7 +301,7 @@ function MapExplorer({
             </Tooltip>
 
             {mapMeta.mapType === MAP_TYPES.COUNTRY && (
-              <Tooltip message={'Toggle districts/states'} hold>
+              <Tooltip message={'Toggle between states/districts'} hold>
                 <div
                   className={classnames('toggle', 'boundary fadeInUp', {
                     'is-highlighted': isDistrictView,

src/components/Table.js

@@ -241,7 +241,7 @@ function Table({
     <div className="Table">
       <div className="table-top">
         <div className="table-top-left">
-          <Tooltip message={'Toggle districts/states'} hold>
+          <Tooltip message={'Toggle between states/districts'} hold>
             <animated.div
               className={classnames('toggle', 'option-toggle', {
                 'is-highlighted': showDistricts,