From a3b841423f5d3ccc7d538349273dd393152aea6e Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Wed, 5 Oct 2022 17:12:42 -0500
Subject: [PATCH] midterms: posititoning, make mobile friendly

---
 web/components/usa-map/usa-map.tsx | 70 +++++++++++++++---------------
 web/pages/midterms.tsx             | 33 +++-----------
 2 files changed, 41 insertions(+), 62 deletions(-)

diff --git a/web/components/usa-map/usa-map.tsx b/web/components/usa-map/usa-map.tsx
index 2841e04c..c372397e 100644
--- a/web/components/usa-map/usa-map.tsx
+++ b/web/components/usa-map/usa-map.tsx
@@ -53,8 +53,6 @@ export const USAMap = ({
   onClick = (e) => {
     console.log(e.currentTarget.dataset.name)
   },
-  width = 959,
-  height = 593,
   title = 'US states map',
   defaultFill = '#d3d3d3',
   customize,
@@ -67,40 +65,40 @@ export const USAMap = ({
   const stateClickHandler = (state: string) => customize?.[state]?.clickHandler
 
   return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      viewBox="0 0 959 593"
-    >
-      <title>{title}</title>
-      <g className="outlines">
-        {States({
-          hideStateTitle,
-          fillStateColor,
-          stateClickHandler,
-        })}
-        <g className="DC state">
-          <path
-            className="DC1"
-            fill={fillStateColor('DC1')}
-            d="M801.8,253.8 l-1.1-1.6 -1-0.8 1.1-1.6 2.2,1.5z"
-          />
-          <circle
-            className="DC2"
-            onClick={onClick}
-            data-name={'DC'}
-            fill={fillStateColor('DC2')}
-            stroke="#FFFFFF"
-            strokeWidth="1.5"
-            cx="801.3"
-            cy="251.8"
-            r="5"
-            opacity="1"
-          />
+    <div className="flex w-full">
+      <svg
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 959 593"
+      >
+        <title>{title}</title>
+        <g className="outlines">
+          {States({
+            hideStateTitle,
+            fillStateColor,
+            stateClickHandler,
+          })}
+          <g className="DC state">
+            <path
+              className="DC1"
+              fill={fillStateColor('DC1')}
+              d="M801.8,253.8 l-1.1-1.6 -1-0.8 1.1-1.6 2.2,1.5z"
+            />
+            <circle
+              className="DC2"
+              onClick={onClick}
+              data-name={'DC'}
+              fill={fillStateColor('DC2')}
+              stroke="#FFFFFF"
+              strokeWidth="1.5"
+              cx="801.3"
+              cy="251.8"
+              r="5"
+              opacity="1"
+            />
+          </g>
         </g>
-      </g>
-    </svg>
+      </svg>
+    </div>
   )
 }
diff --git a/web/pages/midterms.tsx b/web/pages/midterms.tsx
index d1dfb509..47930bc1 100644
--- a/web/pages/midterms.tsx
+++ b/web/pages/midterms.tsx
@@ -184,67 +184,48 @@ const App = () => {
         <StateElectionMap markets={senateMidterms} />
         <iframe
           src="https://manifold.markets/TomShlomi/will-the-gop-control-the-us-senate"
-          title="Will the Democrats control the Senate after the Midterms?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <Spacer h={8} />
         <div className="mt-8 text-2xl">Governors</div>
         <StateElectionMap markets={governorMidterms} />
         <iframe
           src="https://manifold.markets/ManifoldMarkets/democrats-go-down-at-least-one-gove"
-          title="Democrats go down at least one governor on net in 2022"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <Spacer h={8} />
         <div className="mt-8 text-2xl">House</div>
         <iframe
           src="https://manifold.markets/BoltonBailey/will-democrats-maintain-control-of"
-          title="Will the Democrats control the House after the Midterms?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <Spacer h={8} />
         <div className="mt-8 text-2xl">Related markets</div>
         <iframe
           src="https://manifold.markets/BoltonBailey/balance-of-power-in-us-congress-aft"
-          title="Balance of Power in US Congress after 2022 Midterms"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <iframe
           src="https://manifold.markets/SG/will-a-democrat-win-the-2024-us-pre"
-          title="Will a Democrat win the 2024 US presidential election?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <iframe
           src="https://manifold.markets/Ibozz91/will-the-2022-alaska-house-general"
           title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
 
         <iframe
           src="https://manifold.markets/NathanpmYoung/how-many-supreme-court-justices-wil-1e597c3853ad"
           title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
       </Col>
     </Page>