feat: Fix embeds so that they are a bit more compressible.

Also remove the title, which is variable width & thus
very annoying to account for.

src/web/questions/components/HistoryChart/InnerChart.tsx

@@ -16,7 +16,7 @@ import {
 import { chartColors, ChartData, ChartSeries, goldenRatio } from "./utils";
 
 const height = 200
-const width = height * goldenRatio
+const width = 200 * goldenRatio
 let dateFormat = "dd/MM/yy"; // "yyyy-MM-dd" // "MMM do yy"
 
 // can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children
@@ -73,8 +73,8 @@ export const InnerChart: React.FC<Props> = ({
   const domainMax =
     maxProbability < 0.5 ? Math.round(10 * (maxProbability + 0.05)) / 10 : 1;
   const padding = {
-    top: 15,
-    bottom: 50,
+    top: 12,
+    bottom: 33,
     left: 30,
     right: 17,
   };
@@ -164,7 +164,7 @@ export const InnerChart: React.FC<Props> = ({
             dx={-10}
             dy={0}
             angle={-30}
-            style={{ fontSize: 10, fill: "#777" }}
+            style={{ fontSize: 9, fill: "#777" }}
           />
         }
         scale={{ x: "time" }}

src/web/questions/components/HistoryChart/index.tsx

@@ -23,7 +23,7 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
   const data = useMemo(() => buildChartData(question), [question]);
 
   return (
-    <div className="flex items-center space-y-4 sm:flex-row sm:space-y-0">
+    <div className="flex items-center space-y-4 sm:flex-row sm:space-y-0 ">
       <InnerChart data={data} highlight={highlight} />
       <Legend
         items={data.seriesNames.map((name, i) => ({

src/web/questions/components/QuestionTitle.tsx

@@ -10,7 +10,7 @@ export const QuestionTitle: React.FC<Props> = ({
   question,
   linkToMetaforecast,
 }) => (
-  <h1 className="sm:text-3xl text-xl">
+  <h1 className="sm:text-3xl text-lg">
     <a
       className="text-black no-underline hover:text-gray-700"
       href={

src/web/questions/pages/EmbedQuestionPage.tsx

@@ -30,18 +30,19 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
     props: {
       urqlState: ssrCache.extractData(),
       id,
+      question
     },
   };
 };
 
 const EmbedQuestionPage: NextPage<Props> = ({ id }) => {
   return (
-    <div className="bg-white min-h-screen">
+    <div className="block bg-white min-h-screen">
       <Query document={QuestionPageDocument} variables={{ id }}>
         {({ data: { result: question } }) =>
           question ? (
-            <div className="flex flex-col pl-4 pt-2 ">
-              <QuestionTitle question={question} linkToMetaforecast={true} />
+            <div className="flex flex-col p-2 w-full h-12/12">
+              {/*<QuestionTitle question={question} linkToMetaforecast={true} /> */}
 
               <div className="mb-1 mt-1">
                 <QuestionInfoRow question={question} />