Table Scrolling (#957)

Author: lowtorola

frontend/src/components/Table.tsx

@@ -32,7 +32,7 @@ function Table<T>({
   const getKey = (data: T): string => uniqueId(keyFromValue(data));
 
   return (
-    <div className="pl-50 w-full rounded-lg shadow-md">
+    <div className="w-full min-w-0 overflow-hidden rounded-lg shadow-md">
       {/* MOBILE PAGINATION */}
       <div className="w-full rounded-t-lg border-b-2 border-cyan-700 bg-gray-50 md:hidden">
         {bottomElement}
@@ -85,12 +85,16 @@ function Table<T>({
       </div>
 
       {/* WIDESCREEN TABLE */}
-      <div className="hidden w-full md:flex md:flex-col">
+      <div className="hidden w-full overflow-x-auto md:flex md:flex-col">
         <table className="w-full border-collapse overflow-hidden rounded-t-lg text-left text-sm text-gray-500">
           <thead className="bg-cyan-700 font-bold text-white">
             <tr>
               {columns.map((col) => (
-                <th key={"header" + col.key} scope="col" className="px-8 py-3">
+                <th
+                  key={"header" + col.key}
+                  scope="col"
+                  className="whitespace-nowrap px-8 py-3"
+                >
                   {col.header}
                 </th>
               ))}
@@ -113,7 +117,7 @@ function Table<T>({
                     <td
                       key={"cell" + col.key + getKey(row)}
                       scope="row"
-                      className="text-ellipsis whitespace-normal px-8 py-3 font-medium text-gray-900"
+                      className="whitespace-nowrap px-8 py-3 font-medium text-gray-900"
                     >
                       {col.value(row)}
                     </td>

frontend/src/components/elements/BattlecodeStyle.tsx

@@ -11,3 +11,17 @@ export const PageTitle: React.FC<PageTitleProps> = ({
     {children}
   </h1>
 );
+
+interface PageContainerProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const PageContainer: React.FC<PageContainerProps> = ({
+  children,
+  className = "",
+}: PageContainerProps) => (
+  <div className={`flex h-full w-full flex-col overflow-auto p-6 ${className}`}>
+    {children}
+  </div>
+);

frontend/src/views/Account.tsx

@@ -1,6 +1,9 @@
 import type React from "react";
 import { useState } from "react";
-import { PageTitle } from "../components/elements/BattlecodeStyle";
+import {
+  PageTitle,
+  PageContainer,
+} from "../components/elements/BattlecodeStyle";
 import Input from "../components/elements/Input";
 import TextArea from "../components/elements/TextArea";
 import { AuthStateEnum, useCurrentUser } from "../contexts/CurrentUserContext";
@@ -57,7 +60,7 @@ const Account: React.FC = () => {
   };
 
   return (
-    <div className="p-6">
+    <PageContainer>
       <PageTitle>User Settings</PageTitle>
       <div className="flex flex-1 flex-col gap-8 xl:max-w-4xl">
         <ProfileForm episodeId={episodeId} queryClient={queryClient} />
@@ -138,7 +141,7 @@ const Account: React.FC = () => {
       >
         {user.isSuccess && <UserChart userId={user.data.id} />}
       </SectionCard>
-    </div>
+    </PageContainer>
   );
 };
 

frontend/src/views/AdminTournament.tsx

@@ -20,7 +20,7 @@ import {
   useTournamentRoundList,
 } from "api/episode/useEpisode";
 import { buildKey, classNames } from "api/helpers";
-import { PageTitle } from "components/elements/BattlecodeStyle";
+import { PageContainer, PageTitle } from "components/elements/BattlecodeStyle";
 import Button from "components/elements/Button";
 import Icon from "components/elements/Icon";
 import SelectMultipleMenu from "components/elements/SelectMultipleMenu";
@@ -197,7 +197,7 @@ const AdminTournament: React.FC = () => {
   );
 
   return (
-    <div className="flex h-full w-full flex-col gap-4 p-6">
+    <PageContainer className="gap-4">
       <PageTitle>
         Admin Settings{" "}
         {tournament.isSuccess ? `for ${tournament.data.name_long}` : ""}
@@ -314,7 +314,7 @@ const AdminTournament: React.FC = () => {
           </div>
         </div>
       </Modal>
-    </div>
+    </PageContainer>
   );
 };
 

frontend/src/views/Client.tsx

@@ -5,6 +5,7 @@ import { useEpisodeId } from "contexts/EpisodeContext";
 import { useUserScrimmageList } from "api/compete/useCompete";
 import { useQueryClient } from "@tanstack/react-query";
 import SelectMenu from "components/elements/SelectMenu";
+import { PageContainer } from "components/elements/BattlecodeStyle";
 import { StatusBccEnum, type Match } from "api/_autogen";
 import MatchScore from "components/compete/MatchScore";
 import { dateTime } from "utils/dateTime";
@@ -73,7 +74,7 @@ const Client: React.FC = () => {
   }, [matches]);
 
   return (
-    <div className="flex h-full min-h-screen w-full flex-col gap-2 p-6">
+    <PageContainer className="min-h-screen gap-2">
       <div className="flex max-h-min w-full flex-1 flex-col items-center gap-4 md:flex-row md:gap-2">
         <SelectMenu
           loading={matches.isLoading || userTeam.isLoading}
@@ -102,7 +103,7 @@ const Client: React.FC = () => {
       </div>
 
       <ResponsiveIframe url={clientUrl ?? ""} className="flex flex-1" />
-    </div>
+    </PageContainer>
   );
 };
 

frontend/src/views/CodeOfConduct.tsx

@@ -1,5 +1,6 @@
 import Markdown from "components/elements/Markdown";
 import SectionCard from "components/SectionCard";
+import { PageContainer } from "components/elements/BattlecodeStyle";
 
 const ENVIRONMENT = `
 Maintaining a safe and inclusive environment for competitors is a top priority for Battlecode.
@@ -31,7 +32,7 @@ Particularly, sharing bot code between teams falls under this clause, and is thu
 `;
 
 const CodeOfConduct: React.FC = () => (
-  <div className="flex h-full w-full flex-col overflow-y-auto p-6">
+  <PageContainer>
     <div className="flex flex-1 flex-col gap-8">
       <SectionCard title="Environment">
         <Markdown text={ENVIRONMENT} />
@@ -49,7 +50,7 @@ const CodeOfConduct: React.FC = () => (
         <Markdown text={ACADEMIC_MISCONDUCT} />
       </SectionCard>
     </div>
-  </div>
+  </PageContainer>
 );
 
 export default CodeOfConduct;

frontend/src/views/CommonIssues.tsx

@@ -5,6 +5,7 @@ import { useEpisodeId } from "../contexts/EpisodeContext";
 import OptionalSectionCardMarkdown from "../components/OptionalSectionCardMarkdown";
 import { CommonIssuesPage } from "../content/ContentStruct";
 import NoContentFound from "./NoContentFound";
+import { PageContainer } from "components/elements/BattlecodeStyle";
 import { isNil } from "lodash";
 const CommmonIssues: React.FC = () => {
   const { episodeId } = useEpisodeId();
@@ -19,7 +20,7 @@ const CommmonIssues: React.FC = () => {
   }
 
   return (
-    <div className="flex h-full w-full flex-col overflow-y-auto p-6">
+    <PageContainer>
       <div className="flex flex-1 flex-col gap-8">
         <OptionalSectionCardMarkdown
           title={CommonIssuesPage.INSTALLATION_ISSUES}
@@ -41,7 +42,7 @@ const CommmonIssues: React.FC = () => {
           textRecord={currentCommonIssuesText}
         />
       </div>
-    </div>
+    </PageContainer>
   );
 };
 

frontend/src/views/DebuggingTips.tsx

@@ -4,6 +4,7 @@ import { useEpisodeId } from "../contexts/EpisodeContext";
 import OptionalSectionCardMarkdown from "../components/OptionalSectionCardMarkdown";
 import { DebuggingTipsPage } from "../content/ContentStruct";
 import NoContentFound from "./NoContentFound";
+import { PageContainer } from "components/elements/BattlecodeStyle";
 import { isNil } from "lodash";
 const DebuggingTips: React.FC = () => {
   const { episodeId } = useEpisodeId();
@@ -18,7 +19,7 @@ const DebuggingTips: React.FC = () => {
   }
 
   return (
-    <div className="flex h-full w-full flex-col overflow-y-auto p-6">
+    <PageContainer>
       <div className="flex flex-1 flex-col gap-8">
         <OptionalSectionCardMarkdown
           title={DebuggingTipsPage.DEBUGGING}
@@ -40,7 +41,7 @@ const DebuggingTips: React.FC = () => {
           textRecord={currentDebuggingTipsText}
         />
       </div>
-    </div>
+    </PageContainer>
   );
 };
 

frontend/src/views/EpisodeNotFound.tsx

@@ -1,16 +1,17 @@
 import type React from "react";
 import { Link } from "react-router-dom";
 import { DEFAULT_EPISODE } from "utils/constants";
+import { PageContainer } from "components/elements/BattlecodeStyle";
 
 const EpisodeNotFound: React.FC = () => (
-  <div className="flex h-full w-full flex-col overflow-auto p-6">
+  <PageContainer>
     <p>
       That episode was not found.{" "}
       <Link to={`/${DEFAULT_EPISODE}/home`} className="hover:underline">
         Go Home?
       </Link>
     </p>
-  </div>
+  </PageContainer>
 );
 
 export default EpisodeNotFound;

frontend/src/views/Home.tsx

@@ -9,6 +9,7 @@ import { useUserTeam } from "api/team/useTeam";
 import { useTopRatingHistoryList } from "api/compete/useCompete";
 import UserChart from "components/compete/chart/UserChart";
 import { useCurrentUser } from "contexts/CurrentUserContext";
+import { PageContainer } from "components/elements/BattlecodeStyle";
 import { isPresent } from "utils/utilTypes";
 import { dateTime } from "utils/dateTime";
 import Markdown from "components/elements/Markdown";
@@ -42,7 +43,7 @@ In the meantime, [create or join a team](/${episodeId}/my_team) and check out th
   }
 
   return (
-    <div className="p-6">
+    <PageContainer>
       <div className="flex flex-col gap-6 xl:flex-row">
         <div className="flex w-full flex-col gap-6 xl:w-1/2">
           <SectionCard
@@ -114,7 +115,7 @@ In the meantime, [create or join a team](/${episodeId}/my_team) and check out th
           </SectionCard>
         </div>
       </div>
-    </div>
+    </PageContainer>
   );
 };