midterms: posititoning, make mobile friendly

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
+    <div className="flex w-full">
-      className={className}
+      <svg
-      xmlns="http://www.w3.org/2000/svg"
+        className={className}
-      width={width}
+        xmlns="http://www.w3.org/2000/svg"
-      height={height}
+        viewBox="0 0 959 593"
-      viewBox="0 0 959 593"
+      >
-    >
+        <title>{title}</title>
-      <title>{title}</title>
+        <g className="outlines">
-      <g className="outlines">
+          {States({
-        {States({
+            hideStateTitle,
-          hideStateTitle,
+            fillStateColor,
-          fillStateColor,
+            stateClickHandler,
-          stateClickHandler,
+          })}
-        })}
+          <g className="DC state">
-        <g className="DC state">
+            <path
-          <path
+              className="DC1"
-            className="DC1"
+              fill={fillStateColor('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"
-            d="M801.8,253.8 l-1.1-1.6 -1-0.8 1.1-1.6 2.2,1.5z"
+            />
-          />
+            <circle
-          <circle
+              className="DC2"
-            className="DC2"
+              onClick={onClick}
-            onClick={onClick}
+              data-name={'DC'}
-            data-name={'DC'}
+              fill={fillStateColor('DC2')}
-            fill={fillStateColor('DC2')}
+              stroke="#FFFFFF"
-            stroke="#FFFFFF"
+              strokeWidth="1.5"
-            strokeWidth="1.5"
+              cx="801.3"
-            cx="801.3"
+              cy="251.8"
-            cy="251.8"
+              r="5"
-            r="5"
+              opacity="1"
-            opacity="1"
+            />
-          />
+          </g>
         </g>
-      </g>
+      </svg>
-    </svg>
+    </div>
   )
 }

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}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></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}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></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}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></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}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></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}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></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}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></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}
+          className="mt-8 flex h-96 w-full"
-          height={400}
-          className="mt-8"
         ></iframe>
       </Col>
     </Page>