diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
index 4663dfd42..6540ef1f6 100644
--- a/frontend/src/components/Table.tsx
+++ b/frontend/src/components/Table.tsx
@@ -29,15 +29,15 @@ function Table<T>({
   bottomElement,
 }: TableProps<T>): React.ReactElement {
   return (
-    <div className="pl-50 w-full overflow-auto rounded-lg shadow-md">
+    <div className="pl-50 w-full rounded-lg shadow-md">
       {/* MOBILE PAGINATION */}
-      <div className="rounded-t-lg border-b-2 border-cyan-700 bg-gray-50 md:hidden">
+      <div className="w-full rounded-t-lg border-b-2 border-cyan-700 bg-gray-50 md:hidden">
         {bottomElement}
       </div>
 
       {/* MOBILE TABLE */}
       <div className="flex w-full flex-col md:hidden">
-        <table className="w-full border-collapse overflow-hidden rounded-b-lg border-b-0 text-left text-sm text-gray-500">
+        <table className="w-full border-collapse rounded-b-lg border-b-0 text-left text-sm text-gray-500">
           {!loading &&
             data.map((row, rowIdx) => (
               <tbody
@@ -52,6 +52,7 @@ function Table<T>({
               >
                 {columns.map((col, colIdx) => (
                   <tr
+                    className="grid w-full grid-cols-2"
                     key={
                       "mobile" + "row" + col.key + keyFromValue(row).toString()
                     }
@@ -59,7 +60,7 @@ function Table<T>({
                     <th
                       key={"mobile" + "header" + col.key}
                       scope="col"
-                      className={`bg-cyan-700 py-3 pl-4 pr-3 font-bold text-white ${
+                      className={`max-w-32 text-ellipsis bg-cyan-700 py-3 pl-4 pr-0 font-bold text-white ${
                         colIdx === columns.length - 1 &&
                         rowIdx < data.length - 1
                           ? "border-b border-white"
@@ -76,7 +77,7 @@ function Table<T>({
                         keyFromValue(row).toString()
                       }
                       scope="row"
-                      className="text-ellipsis whitespace-normal px-8 py-3 font-medium text-gray-900"
+                      className="min-w-0 place-items-center overflow-hidden text-ellipsis text-wrap py-3 pr-2 font-medium text-gray-900"
                     >
                       {col.value(row)}
                     </td>
@@ -132,7 +133,9 @@ function Table<T>({
           <Spinner size="xl" />
         </div>
       )}
-      <div className="hidden rounded-b-lg bg-white md:flex">
+
+      {/* WIDESCREEN PAGINATION */}
+      <div className="hidden w-full rounded-b-lg bg-white md:flex">
         {bottomElement}
       </div>
     </div>
diff --git a/frontend/src/components/tables/RankingsTable.tsx b/frontend/src/components/tables/RankingsTable.tsx
index 1e9fb6e18..33ca09e50 100644
--- a/frontend/src/components/tables/RankingsTable.tsx
+++ b/frontend/src/components/tables/RankingsTable.tsx
@@ -19,13 +19,6 @@ interface RankingsTableProps {
   handlePage: (page: number) => void;
 }
 
-function trimString(str: string, maxLength: number): string {
-  if (str.length > maxLength) {
-    return str.slice(0, maxLength - 1) + "...";
-  }
-  return str;
-}
-
 const RankingsTable: React.FC<RankingsTableProps> = ({
   data,
   loading,
@@ -35,8 +28,6 @@ const RankingsTable: React.FC<RankingsTableProps> = ({
   const { episodeId } = useEpisodeId();
   const episode = useEpisodeInfo({ id: episodeId });
 
-  const MAX_NAME_LENGTH = 20;
-
   return (
     <Table
       data={data?.results ?? []}
@@ -75,16 +66,14 @@ const RankingsTable: React.FC<RankingsTableProps> = ({
           key: "members",
           value: (team) =>
             team.members.map((member, idx) => (
-              <>
-                <NavLink
-                  key={member.id}
-                  to={`/user/${member.id}`}
-                  className="hover:underline"
-                >
-                  {trimString(member.username, MAX_NAME_LENGTH)}
-                </NavLink>
-                {idx !== team.members.length - 1 ? ", " : ""}
-              </>
+              <NavLink
+                key={member.id}
+                to={`/user/${member.id}`}
+                className="hover:underline"
+              >
+                {member.username +
+                  (idx !== team.members.length - 1 ? ", " : "")}
+              </NavLink>
             )),
         },
         {
diff --git a/frontend/src/components/tables/TournamentsTable.tsx b/frontend/src/components/tables/TournamentsTable.tsx
index 231651944..b5dd88996 100644
--- a/frontend/src/components/tables/TournamentsTable.tsx
+++ b/frontend/src/components/tables/TournamentsTable.tsx
@@ -45,7 +45,7 @@ const TournamentsTable: React.FC<TournamentsTableProps> = ({
           header: "Tournament",
           key: "name_long",
           value: (tour) => (
-            <span className="hover:underline">{tour.name_long}</span>
+            <span className="text-wrap hover:underline">{tour.name_long}</span>
           ),
         },
         {
@@ -66,7 +66,9 @@ const TournamentsTable: React.FC<TournamentsTableProps> = ({
         {
           header: "About",
           key: "blurb",
-          value: (tour) => <div className="max-w-80">{tour.blurb}</div>,
+          value: (tour) => (
+            <div className="max-w-80 text-wrap">{tour.blurb}</div>
+          ),
         },
       ]}
     />
diff --git a/frontend/src/components/tables/scrimmaging/TeamsTable.tsx b/frontend/src/components/tables/scrimmaging/TeamsTable.tsx
index 21609dd2b..2b470e2ea 100644
--- a/frontend/src/components/tables/scrimmaging/TeamsTable.tsx
+++ b/frontend/src/components/tables/scrimmaging/TeamsTable.tsx
@@ -19,21 +19,12 @@ interface TeamsTableProps {
   handleSearch: (search: string) => void;
 }
 
-function trimString(str: string, maxLength: number): string {
-  if (str.length > maxLength) {
-    return str.slice(0, maxLength - 1) + "...";
-  }
-  return str;
-}
-
 const TeamsTable: React.FC<TeamsTableProps> = ({
   search,
   teamsPage,
   handlePage,
   handleSearch,
 }) => {
-  const MAX_NAME_LENGTH = 13;
-
   const { episodeId } = useEpisodeId();
   const episodeInfo = useEpisodeInfo({ id: episodeId });
   const queryClient = useQueryClient();
@@ -128,7 +119,7 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
                 to={`/${episodeId}/team/${team.id}`}
                 className="hover:underline"
               >
-                {trimString(team.name, MAX_NAME_LENGTH)}
+                {team.name}
               </NavLink>
             ),
           },
@@ -137,16 +128,14 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
             key: "members",
             value: (team) =>
               team.members.map((member, idx) => (
-                <>
-                  <NavLink
-                    key={idx}
-                    to={`/user/${member.id}`}
-                    className="hover:underline"
-                  >
-                    {trimString(member.username, MAX_NAME_LENGTH)}
-                  </NavLink>
-                  {idx !== team.members.length - 1 ? ", " : ""}
-                </>
+                <NavLink
+                  key={member.id}
+                  to={`/user/${member.id}`}
+                  className="hover:underline"
+                >
+                  {member.username +
+                    (idx !== team.members.length - 1 ? ", " : "")}
+                </NavLink>
               )),
           },
           {