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

@@ -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}>

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}

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>