Merge pull request #116 from TheRealOwenRees/feature/font-size

Fix display when font-size increased

app/[lang]/components/Footer.tsx

@@ -8,11 +8,11 @@ export default function Footer() {
 
   return (
     <footer
-      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
+      className="fixed bottom-0 z-30 flex h-20 w-[100vw] flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
       data-test="footer"
     >
-      <div>
+      <div className="text-center">
-        <p>&copy; {new Date().getFullYear()} - Owen Rees & Timothy Armes</p>
+        &copy; {new Date().getFullYear()} - Owen&nbsp;Rees & Timothy&nbsp;Armes
       </div>
 
       <div className="flex items-center py-2">

app/[lang]/page.tsx

@@ -8,8 +8,8 @@ export default function Home() {
   const t = useTranslations("Home");
 
   return (
-    <header className="relative flex h-content items-center justify-center">
+    <header className="relative mb-20 flex min-h-content items-center justify-center">
-      <div className="absolute h-full w-full brightness-[0.2]">
+      <div className="absolute h-full w-full py-4 brightness-[0.2]">
         <Image
           src={bgImage}
           alt="Background image of France"
@@ -17,7 +17,7 @@ export default function Home() {
           style={{ objectFit: "cover" }}
         />
       </div>
-      <div className="z-10 text-center text-white">
+      <div className="z-10 py-4 text-center text-white">
         <h1 className="p-5 font-title text-5xl" data-test="header1">
           {t("title")}
         </h1>
@@ -33,7 +33,7 @@ export default function Home() {
         </h3>
         <Link
           href="/tournois"
-          className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
+          className="mb-2 rounded-lg bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
         >
           {t("mapLink")}
         </Link>

app/[lang]/tournois/SearchBar.tsx

@@ -39,7 +39,7 @@ const SearchBar = () => {
         <input
           type="search"
           id="table-search"
-          className="block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          className="block rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
           placeholder={t("searchPlaceholder")}
           value={searchString}
           onChange={(e) => setSearchString(e.target.value)}

app/[lang]/tournois/TournamentTable.tsx

@@ -87,75 +87,81 @@ export default function TournamentTable() {
 
       <ScrollToTopButton />
 
-      <table
+      <div className="overflow-x-scroll">
-        className="relative w-full table-fixed text-center text-xs"
+        <table
-        data-test="tournament-table"
+          className="relative table-fixed text-center text-xs lg:w-full"
-      >
+          data-test="tournament-table"
-        <thead>
+        >
-          <tr>
+          <thead>
-            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
+            <tr>
-              {t("date")}
+              <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
-            </th>
+                {t("date")}
-            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
+              </th>
-              {t("town")}
+              <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
-            </th>
+                {t("town")}
-            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
+              </th>
-              {t("tournament")}
+              <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
-            </th>
+                {t("tournament")}
-            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
+              </th>
-              {t("timeControl")}
+              <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
-            </th>
+                {t("timeControl")}
-            <th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600"></th>
+              </th>
-          </tr>
+              <th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600"></th>
-        </thead>
-
-        <tbody>
-          {filteredTournaments.length === 0 ? (
-            <tr className="bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
-              <td colSpan={4} className="p-3">
-                {t("noneFound")}
-              </td>
             </tr>
-          ) : (
+          </thead>
-            filteredTournaments.map((tournament) => (
+
-              <tr
+          <tbody>
-                key={tournament.id}
+            {filteredTournaments.length === 0 ? (
-                id={tournament.id}
+              <tr className="bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
-                data-group-id={tournament.groupId}
+                <td colSpan={4} className="p-3">
-                onMouseEnter={() => setHoveredListTournamentId(tournament.id)}
+                  {t("noneFound")}
-                onMouseLeave={() => setHoveredListTournamentId(null)}
-                className={twMerge(
-                  "scroll-m-20 bg-white text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900",
-                  hoveredMapTournamentGroupId === tournament.groupId &&
-                    "bg-gray-200 dark:bg-gray-900",
-                )}
-              >
-                <td className="p-3">{tournament.date}</td>
-                <td className="p-3">{tournament.town}</td>
-                <td className="p-3">
-                  <span>
-                    {tournament.norm && (
-                      <FaTrophy
-                        className="mr-2 inline-block h-4 w-4"
-                        data-norm="norm"
-                      />
-                    )}
-                    {tournament.tournament}
-                  </span>
-                </td>
-                <td className="p-3">
-                  {t("timeControlEnum", { tc: tournament.timeControl })}
-                </td>
-                <td className="p-3">
-                  <a href={tournament.url} target="_blank">
-                    <FaExternalLinkAlt />
-                  </a>
                 </td>
               </tr>
-            ))
+            ) : (
-          )}
+              filteredTournaments.map((tournament) => (
-        </tbody>
+                <tr
-      </table>
+                  key={tournament.id}
+                  id={tournament.id}
+                  data-group-id={tournament.groupId}
+                  onMouseEnter={() => setHoveredListTournamentId(tournament.id)}
+                  onMouseLeave={() => setHoveredListTournamentId(null)}
+                  className={twMerge(
+                    "scroll-m-20 bg-white text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900",
+                    hoveredMapTournamentGroupId === tournament.groupId &&
+                      "bg-gray-200 dark:bg-gray-900",
+                  )}
+                >
+                  <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
+                    {tournament.date}
+                  </td>
+                  <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
+                    {tournament.town}
+                  </td>
+                  <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
+                    <span>
+                      {tournament.norm && (
+                        <FaTrophy
+                          className="mr-2 inline-block h-4 w-4"
+                          data-norm="norm"
+                        />
+                      )}
+                      {tournament.tournament}
+                    </span>
+                  </td>
+                  <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
+                    {t("timeControlEnum", { tc: tournament.timeControl })}
+                  </td>
+                  <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
+                    <a href={tournament.url} target="_blank">
+                      <FaExternalLinkAlt />
+                    </a>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
 
       <Tooltip anchorSelect="[data-norm='norm']">
         <div className="flex items-center">

tailwind.config.js

@@ -31,10 +31,10 @@ module.exports = {
       minHeight: {
         // We use 100svh, falling back to vh for old browsers
         // The 144px is for the header and footer
-        content: ["calc(100vh - 144px)", "calc(100svh - 144px)"],
+        content: ["calc(100vh - 9rem)", "calc(100svh - 9rem)"],
       },
       height: {
-        content: ["calc(100vh - 144px)", "calc(100svh - 144px)"],
+        content: ["calc(100vh - 9rem)", "calc(100svh - 9rem)"],
       },
     },
   },