Skip to content

Commit 010b345

Browse files
authored
Table Scrolling (#957)
1 parent c65759d commit 010b345

23 files changed

+97
-60
lines changed

frontend/src/components/Table.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function Table<T>({
3232
const getKey = (data: T): string => uniqueId(keyFromValue(data));
3333

3434
return (
35-
<div className="pl-50 w-full rounded-lg shadow-md">
35+
<div className="w-full min-w-0 overflow-hidden rounded-lg shadow-md">
3636
{/* MOBILE PAGINATION */}
3737
<div className="w-full rounded-t-lg border-b-2 border-cyan-700 bg-gray-50 md:hidden">
3838
{bottomElement}
@@ -85,12 +85,16 @@ function Table<T>({
8585
</div>
8686

8787
{/* WIDESCREEN TABLE */}
88-
<div className="hidden w-full md:flex md:flex-col">
88+
<div className="hidden w-full overflow-x-auto md:flex md:flex-col">
8989
<table className="w-full border-collapse overflow-hidden rounded-t-lg text-left text-sm text-gray-500">
9090
<thead className="bg-cyan-700 font-bold text-white">
9191
<tr>
9292
{columns.map((col) => (
93-
<th key={"header" + col.key} scope="col" className="px-8 py-3">
93+
<th
94+
key={"header" + col.key}
95+
scope="col"
96+
className="whitespace-nowrap px-8 py-3"
97+
>
9498
{col.header}
9599
</th>
96100
))}
@@ -113,7 +117,7 @@ function Table<T>({
113117
<td
114118
key={"cell" + col.key + getKey(row)}
115119
scope="row"
116-
className="text-ellipsis whitespace-normal px-8 py-3 font-medium text-gray-900"
120+
className="whitespace-nowrap px-8 py-3 font-medium text-gray-900"
117121
>
118122
{col.value(row)}
119123
</td>

frontend/src/components/elements/BattlecodeStyle.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,17 @@ export const PageTitle: React.FC<PageTitleProps> = ({
1111
{children}
1212
</h1>
1313
);
14+
15+
interface PageContainerProps {
16+
children?: React.ReactNode;
17+
className?: string;
18+
}
19+
20+
export const PageContainer: React.FC<PageContainerProps> = ({
21+
children,
22+
className = "",
23+
}: PageContainerProps) => (
24+
<div className={`flex h-full w-full flex-col overflow-auto p-6 ${className}`}>
25+
{children}
26+
</div>
27+
);

frontend/src/views/Account.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import type React from "react";
22
import { useState } from "react";
3-
import { PageTitle } from "../components/elements/BattlecodeStyle";
3+
import {
4+
PageTitle,
5+
PageContainer,
6+
} from "../components/elements/BattlecodeStyle";
47
import Input from "../components/elements/Input";
58
import TextArea from "../components/elements/TextArea";
69
import { AuthStateEnum, useCurrentUser } from "../contexts/CurrentUserContext";
@@ -57,7 +60,7 @@ const Account: React.FC = () => {
5760
};
5861

5962
return (
60-
<div className="p-6">
63+
<PageContainer>
6164
<PageTitle>User Settings</PageTitle>
6265
<div className="flex flex-1 flex-col gap-8 xl:max-w-4xl">
6366
<ProfileForm episodeId={episodeId} queryClient={queryClient} />
@@ -138,7 +141,7 @@ const Account: React.FC = () => {
138141
>
139142
{user.isSuccess && <UserChart userId={user.data.id} />}
140143
</SectionCard>
141-
</div>
144+
</PageContainer>
142145
);
143146
};
144147

frontend/src/views/AdminTournament.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
useTournamentRoundList,
2121
} from "api/episode/useEpisode";
2222
import { buildKey, classNames } from "api/helpers";
23-
import { PageTitle } from "components/elements/BattlecodeStyle";
23+
import { PageContainer, PageTitle } from "components/elements/BattlecodeStyle";
2424
import Button from "components/elements/Button";
2525
import Icon from "components/elements/Icon";
2626
import SelectMultipleMenu from "components/elements/SelectMultipleMenu";
@@ -197,7 +197,7 @@ const AdminTournament: React.FC = () => {
197197
);
198198

199199
return (
200-
<div className="flex h-full w-full flex-col gap-4 p-6">
200+
<PageContainer className="gap-4">
201201
<PageTitle>
202202
Admin Settings{" "}
203203
{tournament.isSuccess ? `for ${tournament.data.name_long}` : ""}
@@ -314,7 +314,7 @@ const AdminTournament: React.FC = () => {
314314
</div>
315315
</div>
316316
</Modal>
317-
</div>
317+
</PageContainer>
318318
);
319319
};
320320

frontend/src/views/Client.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useEpisodeId } from "contexts/EpisodeContext";
55
import { useUserScrimmageList } from "api/compete/useCompete";
66
import { useQueryClient } from "@tanstack/react-query";
77
import SelectMenu from "components/elements/SelectMenu";
8+
import { PageContainer } from "components/elements/BattlecodeStyle";
89
import { StatusBccEnum, type Match } from "api/_autogen";
910
import MatchScore from "components/compete/MatchScore";
1011
import { dateTime } from "utils/dateTime";
@@ -73,7 +74,7 @@ const Client: React.FC = () => {
7374
}, [matches]);
7475

7576
return (
76-
<div className="flex h-full min-h-screen w-full flex-col gap-2 p-6">
77+
<PageContainer className="min-h-screen gap-2">
7778
<div className="flex max-h-min w-full flex-1 flex-col items-center gap-4 md:flex-row md:gap-2">
7879
<SelectMenu
7980
loading={matches.isLoading || userTeam.isLoading}
@@ -102,7 +103,7 @@ const Client: React.FC = () => {
102103
</div>
103104

104105
<ResponsiveIframe url={clientUrl ?? ""} className="flex flex-1" />
105-
</div>
106+
</PageContainer>
106107
);
107108
};
108109

frontend/src/views/CodeOfConduct.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Markdown from "components/elements/Markdown";
22
import SectionCard from "components/SectionCard";
3+
import { PageContainer } from "components/elements/BattlecodeStyle";
34

45
const ENVIRONMENT = `
56
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
3132
`;
3233

3334
const CodeOfConduct: React.FC = () => (
34-
<div className="flex h-full w-full flex-col overflow-y-auto p-6">
35+
<PageContainer>
3536
<div className="flex flex-1 flex-col gap-8">
3637
<SectionCard title="Environment">
3738
<Markdown text={ENVIRONMENT} />
@@ -49,7 +50,7 @@ const CodeOfConduct: React.FC = () => (
4950
<Markdown text={ACADEMIC_MISCONDUCT} />
5051
</SectionCard>
5152
</div>
52-
</div>
53+
</PageContainer>
5354
);
5455

5556
export default CodeOfConduct;

frontend/src/views/CommonIssues.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useEpisodeId } from "../contexts/EpisodeContext";
55
import OptionalSectionCardMarkdown from "../components/OptionalSectionCardMarkdown";
66
import { CommonIssuesPage } from "../content/ContentStruct";
77
import NoContentFound from "./NoContentFound";
8+
import { PageContainer } from "components/elements/BattlecodeStyle";
89
import { isNil } from "lodash";
910
const CommmonIssues: React.FC = () => {
1011
const { episodeId } = useEpisodeId();
@@ -19,7 +20,7 @@ const CommmonIssues: React.FC = () => {
1920
}
2021

2122
return (
22-
<div className="flex h-full w-full flex-col overflow-y-auto p-6">
23+
<PageContainer>
2324
<div className="flex flex-1 flex-col gap-8">
2425
<OptionalSectionCardMarkdown
2526
title={CommonIssuesPage.INSTALLATION_ISSUES}
@@ -41,7 +42,7 @@ const CommmonIssues: React.FC = () => {
4142
textRecord={currentCommonIssuesText}
4243
/>
4344
</div>
44-
</div>
45+
</PageContainer>
4546
);
4647
};
4748

frontend/src/views/DebuggingTips.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useEpisodeId } from "../contexts/EpisodeContext";
44
import OptionalSectionCardMarkdown from "../components/OptionalSectionCardMarkdown";
55
import { DebuggingTipsPage } from "../content/ContentStruct";
66
import NoContentFound from "./NoContentFound";
7+
import { PageContainer } from "components/elements/BattlecodeStyle";
78
import { isNil } from "lodash";
89
const DebuggingTips: React.FC = () => {
910
const { episodeId } = useEpisodeId();
@@ -18,7 +19,7 @@ const DebuggingTips: React.FC = () => {
1819
}
1920

2021
return (
21-
<div className="flex h-full w-full flex-col overflow-y-auto p-6">
22+
<PageContainer>
2223
<div className="flex flex-1 flex-col gap-8">
2324
<OptionalSectionCardMarkdown
2425
title={DebuggingTipsPage.DEBUGGING}
@@ -40,7 +41,7 @@ const DebuggingTips: React.FC = () => {
4041
textRecord={currentDebuggingTipsText}
4142
/>
4243
</div>
43-
</div>
44+
</PageContainer>
4445
);
4546
};
4647

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import type React from "react";
22
import { Link } from "react-router-dom";
33
import { DEFAULT_EPISODE } from "utils/constants";
4+
import { PageContainer } from "components/elements/BattlecodeStyle";
45

56
const EpisodeNotFound: React.FC = () => (
6-
<div className="flex h-full w-full flex-col overflow-auto p-6">
7+
<PageContainer>
78
<p>
89
That episode was not found.{" "}
910
<Link to={`/${DEFAULT_EPISODE}/home`} className="hover:underline">
1011
Go Home?
1112
</Link>
1213
</p>
13-
</div>
14+
</PageContainer>
1415
);
1516

1617
export default EpisodeNotFound;

frontend/src/views/Home.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useUserTeam } from "api/team/useTeam";
99
import { useTopRatingHistoryList } from "api/compete/useCompete";
1010
import UserChart from "components/compete/chart/UserChart";
1111
import { useCurrentUser } from "contexts/CurrentUserContext";
12+
import { PageContainer } from "components/elements/BattlecodeStyle";
1213
import { isPresent } from "utils/utilTypes";
1314
import { dateTime } from "utils/dateTime";
1415
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
4243
}
4344

4445
return (
45-
<div className="p-6">
46+
<PageContainer>
4647
<div className="flex flex-col gap-6 xl:flex-row">
4748
<div className="flex w-full flex-col gap-6 xl:w-1/2">
4849
<SectionCard
@@ -114,7 +115,7 @@ In the meantime, [create or join a team](/${episodeId}/my_team) and check out th
114115
</SectionCard>
115116
</div>
116117
</div>
117-
</div>
118+
</PageContainer>
118119
);
119120
};
120121

0 commit comments

Comments
 (0)