From 768ddeb85ab0fc6b3a203d0cb220c9eca1b87130 Mon Sep 17 00:00:00 2001
From: John Scolaro <johnscolaro95@gmail.com>
Date: Sat, 21 Oct 2023 20:16:10 +1000
Subject: [PATCH] Charts actually fill screen.

What I mean by this is charts previously always had about 8px of
overflow which is infuriating. Now it's perfect. However, this
perfection then broke tables, so the tables needed to be fixed too.
---
 frontend/app/home/[key]/components/table/table.tsx | 6 +++---
 frontend/app/home/[key]/page.tsx                   | 4 ++--
 frontend/app/home/layout.tsx                       | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/app/home/[key]/components/table/table.tsx b/frontend/app/home/[key]/components/table/table.tsx
index 7c50bb3..5cd6fd4 100644
--- a/frontend/app/home/[key]/components/table/table.tsx
+++ b/frontend/app/home/[key]/components/table/table.tsx
@@ -11,13 +11,13 @@ export default function Table({
 }) {
   return (
     <>
-      <table className="bg-green-500 table-auto border-separate border-spacing-1 text-sm rounded-lg sm:text-base sm:border-spacing-2">
+      <table className="bg-green-500 table-auto border-separate border-spacing-1 text-sm rounded-lg sm:text-base sm:border-spacing-2 h-max">
         <thead>
           {show_headings && <tr>{column_info.map((column) => get_headings(column))}</tr>}
         </thead>
         <tbody>
           {table_data[column_info[0].column_name].map((_, index) =>
-            get_row(index, table_data, column_info),
+            get_row(index, table_data, column_info)
           )}
         </tbody>
       </table>
@@ -32,7 +32,7 @@ function get_headings(column: { column_name: string; column_type: string }) {
 function get_row(
   index: number,
   table_data: { [key: string]: any[] },
-  column_info: { column_name: string; column_type: string }[],
+  column_info: { column_name: string; column_type: string }[]
 ) {
   return (
     <tr className="bg-green-400 hover:bg-green-600" key={index}>
diff --git a/frontend/app/home/[key]/page.tsx b/frontend/app/home/[key]/page.tsx
index 8392712..ee7774c 100644
--- a/frontend/app/home/[key]/page.tsx
+++ b/frontend/app/home/[key]/page.tsx
@@ -44,7 +44,7 @@ function PageContentComponent({ params, data }: { params: { key: string }; data:
   if (data.type == "PlotTab") {
     return (
       <Plot
-        className="w-full h-full"
+        className="grow"
         data={data.chart_json.data}
         layout={data.chart_json.layout}
         config={{
@@ -60,7 +60,7 @@ function PageContentComponent({ params, data }: { params: { key: string }; data:
 
   if (data.type == "TriviaTab" || data.type == "TableTab") {
     return (
-      <div className="flex justify-center">
+      <div className="flex">
         <Table
           table_data={data.chart_json.table_data}
           show_headings={data.chart_json.show_headings}
diff --git a/frontend/app/home/layout.tsx b/frontend/app/home/layout.tsx
index f690c03..71ef836 100644
--- a/frontend/app/home/layout.tsx
+++ b/frontend/app/home/layout.tsx
@@ -270,7 +270,7 @@ export default function HomeLayout({ children }: { children: React.ReactNode })
             disabledSidebarSteps={disabledSidebarSteps}
           />
           {/* Content */}
-          <div className="bg-white rounded-lg p-2 h-full overflow-auto grow">
+          <div className="flex bg-white rounded-lg p-2 overflow-auto grow justify-center">
             {children}
           </div>
         </div>