From 73329df47b596c68562fe19981995b308f2012a6 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@protonmail.com>
Date: Thu, 17 Nov 2022 20:12:31 +0000
Subject: [PATCH] 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 | 8 ++++----
 src/web/questions/components/HistoryChart/index.tsx      | 2 +-
 src/web/questions/components/QuestionTitle.tsx           | 2 +-
 src/web/questions/pages/EmbedQuestionPage.tsx            | 7 ++++---
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/web/questions/components/HistoryChart/InnerChart.tsx b/src/web/questions/components/HistoryChart/InnerChart.tsx
index 7713750..c82d435 100644
--- a/src/web/questions/components/HistoryChart/InnerChart.tsx
+++ b/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" }}
diff --git a/src/web/questions/components/HistoryChart/index.tsx b/src/web/questions/components/HistoryChart/index.tsx
index 3386711..fac6c95 100644
--- a/src/web/questions/components/HistoryChart/index.tsx
+++ b/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) => ({
diff --git a/src/web/questions/components/QuestionTitle.tsx b/src/web/questions/components/QuestionTitle.tsx
index 71400e8..06dedcf 100644
--- a/src/web/questions/components/QuestionTitle.tsx
+++ b/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={
diff --git a/src/web/questions/pages/EmbedQuestionPage.tsx b/src/web/questions/pages/EmbedQuestionPage.tsx
index f6c72a2..c6eba76 100644
--- a/src/web/questions/pages/EmbedQuestionPage.tsx
+++ b/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} />