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>
-        <p>&copy; {new Date().getFullYear()} - Owen Rees & Timothy Armes</p>
+      <div className="text-center">
+        &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">
-      <div className="absolute h-full w-full brightness-[0.2]">
+    <header className="relative mb-20 flex min-h-content items-center justify-center">
+      <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,8 +87,9 @@ export default function TournamentTable() {
 
       <ScrollToTopButton />
 
+      <div className="overflow-x-scroll">
         <table
-        className="relative w-full table-fixed text-center text-xs"
+          className="relative table-fixed text-center text-xs lg:w-full"
           data-test="tournament-table"
         >
           <thead>
@@ -130,9 +131,13 @@ export default function TournamentTable() {
                       "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">
+                  <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
@@ -143,10 +148,10 @@ export default function TournamentTable() {
                       {tournament.tournament}
                     </span>
                   </td>
-                <td className="p-3">
+                  <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="p-3">
+                  <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>
@@ -156,6 +161,7 @@ export default function TournamentTable() {
             )}
           </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)"],
       },
     },
   },