From bcbc6f7307bf31e89929068f11f72af29d136327 Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Fri, 21 Aug 2026 15:31:30 -0700
Subject: [PATCH 1/2] fix(ux): fit problem and contest tables to narrow screens

Both tables forced a 900px minimum width, so they overflowed horizontally on
laptop and phone viewports. Lower the base minimum to 340px and restore the
full width at xl (problems) and lg (contests), drop lower-priority columns
progressively (Topic below xl, Recommender below md, Duration below lg),
widen the remaining columns to reclaim the freed space, and tighten cell
padding and feedback button spacing below md. Move the scroll affordance
breakpoint to 767px so it appears exactly where overflow now begins.
---
 src/lib/components/ContestTable.svelte        | 48 +++++++++----------
 src/lib/components/ProblemTable.svelte        | 48 +++++++++++--------
 .../ResponsiveTableContainer.svelte           |  2 +-
 3 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/ContestTable.svelte b/src/lib/components/ContestTable.svelte
index 006ad51..f36cc71 100644
--- a/src/lib/components/ContestTable.svelte
+++ b/src/lib/components/ContestTable.svelte
@@ -82,17 +82,17 @@
 
 <ResponsiveTableContainer variant="contest">
   <table
-    class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
+    class="w-full min-w-[340px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm lg:min-w-[900px]"
   >
     <thead>
       <tr>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
+          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[8%] lg:w-[5%]"
         >
           <button
             type="button"
-            class="flex w-full cursor-pointer items-center justify-center gap-1 p-3 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)]"
+            class="flex w-full cursor-pointer items-center justify-center gap-1 p-2 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)] md:p-3"
             on:click={onParticipatedFilter}
             aria-label={participatedFilterLabel}
             title={participatedFilterLabel}
@@ -151,12 +151,12 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[6%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
-          style="min-width: 50px;"
+          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[9%] lg:w-[6%]"
+          style="min-width: 44px;"
         >
           <button
             type="button"
-            class="flex w-full cursor-pointer items-center justify-center gap-1 p-3 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)]"
+            class="flex w-full cursor-pointer items-center justify-center gap-1 p-2 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)] md:p-3"
             on:click={onTypeFilter}
             aria-label={typeFilterLabel}
             title={typeFilterLabel}
@@ -200,23 +200,23 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[34%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          class="sticky top-0 z-10 w-[26%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:w-[31%] md:p-3 lg:w-[34%]"
         >
           Contest
         </th>
         <th
-          class="sticky top-0 z-10 w-[12%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold"
+          class="sticky top-0 z-10 hidden w-[12%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold lg:table-cell"
         >
           Duration
         </th>
         <th
           scope="col"
           aria-sort={difficultyAriaSort}
-          class="sticky top-0 z-10 w-[15%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
+          class="sticky top-0 z-10 w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[17%] lg:w-[15%]"
         >
           <button
             type="button"
-            class="flex w-full cursor-pointer items-center justify-center gap-2 p-3 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)]"
+            class="flex w-full cursor-pointer items-center justify-center gap-1 p-2 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)] md:gap-2 md:p-3"
             on:click={onDifficultySort}
             aria-label={difficultySortLabel}
             title={difficultySortLabel}
@@ -234,23 +234,23 @@
                 <span>▼</span>
               </span>
             {/if}
-            <span>Difficulty</span>
+            <span class="hidden lg:inline">Difficulty</span>
           </button>
         </th>
         <th
-          class="sticky top-0 z-10 w-[21%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          class="sticky top-0 z-10 hidden w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold md:table-cell lg:w-[21%]"
         >
-          <div class="flex items-center gap-2">
+          <div class="flex w-full items-center gap-2">
             <RecommendersFilter
               authors={allAuthors}
               selectedAuthor={authorFilter}
-              width="w-auto min-w-[160px]"
+              width="w-full"
               onAuthorChange={onAuthorFilter}
             />
           </div>
         </th>
         <th
-          class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-right font-bold"
+          class="sticky top-0 z-10 w-[32%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-right font-bold md:w-[15%] md:p-3 lg:w-[5%]"
         ></th>
       </tr>
     </thead>
@@ -264,7 +264,7 @@
                 : 'hover:bg-[var(--color-tertiary)]/30'
             }`}
         >
-          <td class="p-3 text-center">
+          <td class="p-2 text-center md:p-3">
             {#if contest.id}
               {@const hasParticipated = userParticipation.has(contest.id)}
               <button
@@ -296,7 +296,7 @@
               </button>
             {/if}
           </td>
-          <td class="p-3 text-center" style="min-width: 50px;">
+          <td class="p-2 text-center md:p-3" style="min-width: 44px;">
             <span class="flex items-center justify-center">
               {#if contest.type === 'ICPC'}
                 <img src={icpcLogo} alt="ICPC" class="h-8 w-8 object-contain" />
@@ -305,7 +305,7 @@
               {/if}
             </span>
           </td>
-          <td class="truncate p-3">
+          <td class="truncate p-2 md:p-3">
             <a
               href={contest.url}
               target="_blank"
@@ -316,15 +316,15 @@
               {contest.name}
             </a>
           </td>
-          <td class="p-3 text-center">
+          <td class="hidden p-3 text-center lg:table-cell">
             <span class="font-mono text-sm font-medium">
               {formatDuration(contest.durationSeconds)}
             </span>
           </td>
-          <td class="p-3 text-center">
+          <td class="p-2 text-center md:p-3">
             {#if contest.difficulty !== undefined}
               <span
-                class={`text-2xl font-bold ${getDifficultyColorClass(contest.difficulty)}`}
+                class={`text-base font-bold md:text-2xl ${getDifficultyColorClass(contest.difficulty)}`}
                 role="img"
                 aria-label={getDifficultyLabel(contest.difficulty)}
               >
@@ -337,7 +337,7 @@
               >
             {/if}
           </td>
-          <td class="p-3 text-left">
+          <td class="hidden truncate p-2 text-left md:table-cell md:p-3">
             <a
               href={contest.addedByUrl}
               target="_blank"
@@ -348,8 +348,8 @@
               @{contest.addedBy}
             </a>
           </td>
-          <td class="p-3 text-right">
-            <div class="flex justify-end gap-2">
+          <td class="p-2 text-right md:p-3">
+            <div class="flex justify-end gap-1 md:gap-2">
               {#if contest.id}
                 <TableFeedbackButtons
                   likes={contest.likes}
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index 5429cd5..949adcb 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -82,17 +82,17 @@
 
 <ResponsiveTableContainer variant="problem">
   <table
-    class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
+    class="w-full min-w-[340px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm xl:min-w-[900px]"
   >
     <thead>
       <tr>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
+          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[8%] xl:w-[5%]"
         >
           <button
             type="button"
-            class="flex w-full cursor-pointer items-center justify-center gap-1 p-3 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)]"
+            class="flex w-full cursor-pointer items-center justify-center gap-1 p-2 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)] md:p-3"
             on:click={onSolvedFilter}
             aria-label={solvedFilterLabel}
             title={solvedFilterLabel}
@@ -153,11 +153,11 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
+          class="sticky top-0 z-10 w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[8%] xl:w-[5%]"
         >
           <button
             type="button"
-            class="flex w-full cursor-pointer items-center justify-center gap-1 p-3 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)]"
+            class="flex w-full cursor-pointer items-center justify-center gap-1 p-2 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)] md:p-3"
             on:click={onSourceFilter}
             aria-label={sourceFilterLabel}
             title={sourceFilterLabel}
@@ -201,17 +201,17 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[25%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          class="sticky top-0 z-10 w-[30%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:w-[29%] md:p-3 xl:w-[25%]"
           >Problem</th
         >
         <th
           scope="col"
           aria-sort={difficultyAriaSort}
-          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
+          class="sticky top-0 z-10 w-[17%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[14%] xl:w-[11%]"
         >
           <button
             type="button"
-            class="flex w-full cursor-pointer items-center justify-center gap-2 p-3 py-4 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)]"
+            class="flex w-full cursor-pointer items-center justify-center gap-1 p-2 py-3 font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--color-accent)] md:gap-2 md:p-3 md:py-4"
             on:click={onDifficultySort}
             aria-label={difficultySortLabel}
             title={difficultySortLabel}
@@ -229,15 +229,15 @@
                 <span>▼</span>
               </span>
             {/if}
-            <span class="font-bold">Difficulty</span>
+            <span class="hidden font-bold lg:inline">Difficulty</span>
           </button>
         </th>
         <th
-          class="sticky top-0 z-10 w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          class="sticky top-0 z-10 hidden w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold xl:table-cell"
           >Topic</th
         >
         <th
-          class="sticky top-0 z-10 w-[24%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          class="sticky top-0 z-10 hidden w-[22%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold md:table-cell xl:w-[24%]"
         >
           <div class="flex w-full items-center gap-2">
             <RecommendersFilter
@@ -249,7 +249,7 @@
           </div>
         </th>
         <th
-          class="sticky top-0 z-10 w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-right font-bold"
+          class="sticky top-0 z-10 w-[32%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-right font-bold md:w-[19%] md:p-3 xl:w-[20%]"
         ></th>
       </tr>
     </thead>
@@ -259,7 +259,7 @@
           class="problem-row"
           class:problem-row-solved={!!problem.id && userSolvedProblems.has(problem.id)}
         >
-          <td class="p-3 text-center">
+          <td class="p-2 text-center md:p-3">
             {#if problem.id}
               {@const isSolved = userSolvedProblems.has(problem.id)}
               <button
@@ -295,7 +295,7 @@
               </button>
             {/if}
           </td>
-          <td class="p-3 text-center">
+          <td class="p-2 text-center md:p-3">
             <span class="flex items-center justify-center">
               <img
                 src={problem.source === 'codeforces' ? codeforcesLogo : kattisLogo}
@@ -304,7 +304,7 @@
               />
             </span>
           </td>
-          <td class="truncate p-3">
+          <td class="truncate p-2 md:p-3">
             <a
               href={problem.url}
               target="_blank"
@@ -315,7 +315,7 @@
               {problem.name}
             </a>
           </td>
-          <td class="p-3 text-center">
+          <td class="p-2 text-center md:p-3">
             <span
               class="group relative inline-block rounded border px-2 py-1 font-bold
                   text-white
@@ -333,7 +333,7 @@
               </span>
             </span>
           </td>
-          <td class="p-3">
+          <td class="hidden p-3 xl:table-cell">
             {#if problem.type}
               <span
                 class="inline-block rounded border border-[var(--color-border)] bg-[var(--color-tertiary)] px-2 py-1 text-sm text-[var(--color-text)]"
@@ -348,7 +348,7 @@
               </span>
             {/if}
           </td>
-          <td class="truncate p-3">
+          <td class="hidden truncate p-3 md:table-cell">
             <a
               href={problem.addedByUrl}
               target="_blank"
@@ -359,8 +359,8 @@
               @{problem.addedBy}
             </a>
           </td>
-          <td class="p-3 text-right">
-            <div class="flex justify-end gap-2">
+          <td class="p-2 text-right md:p-3">
+            <div class="flex justify-end gap-1 md:gap-2">
               {#if problem.id}
                 <TableFeedbackButtons
                   likes={problem.likes}
@@ -402,7 +402,13 @@
   }
 
   td:last-child {
-    min-width: 140px;
+    min-width: 104px;
+  }
+
+  @media (min-width: 768px) {
+    td:last-child {
+      min-width: 140px;
+    }
   }
 
   .w-full {
diff --git a/src/lib/components/ResponsiveTableContainer.svelte b/src/lib/components/ResponsiveTableContainer.svelte
index 150c385..d7900d1 100644
--- a/src/lib/components/ResponsiveTableContainer.svelte
+++ b/src/lib/components/ResponsiveTableContainer.svelte
@@ -42,7 +42,7 @@
     }
   }
 
-  @media (max-width: 899px) {
+  @media (max-width: 767px) {
     .scroll-affordance {
       position: relative;
     }

From 1717ef0b63f3298e17b8eb4468f5d634e5b73b7f Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Fri, 21 Aug 2026 15:50:10 -0700
Subject: [PATCH 2/2] fix(ux): keep every table column visible while narrowing
 the tables

The first pass hid the Topic, Recommender, and Duration columns below their
breakpoints, which removed the author filter and author links entirely on
mobile and broke content parity between viewports. Restore every column and
achieve the narrowing through width and padding alone: base minimum width
600px, full 900px at xl, and p-2 cells below md.
---
 src/lib/components/ContestTable.svelte        | 22 +++++++++----------
 src/lib/components/ProblemTable.svelte        | 22 +++++++++----------
 .../ResponsiveTableContainer.svelte           |  2 +-
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/ContestTable.svelte b/src/lib/components/ContestTable.svelte
index f36cc71..ff0bb38 100644
--- a/src/lib/components/ContestTable.svelte
+++ b/src/lib/components/ContestTable.svelte
@@ -82,13 +82,13 @@
 
 <ResponsiveTableContainer variant="contest">
   <table
-    class="w-full min-w-[340px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm lg:min-w-[900px]"
+    class="w-full min-w-[600px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm xl:min-w-[900px]"
   >
     <thead>
       <tr>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[8%] lg:w-[5%]"
+          class="sticky top-0 z-10 w-[7%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold lg:w-[5%]"
         >
           <button
             type="button"
@@ -151,7 +151,7 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[9%] lg:w-[6%]"
+          class="sticky top-0 z-10 w-[8%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold lg:w-[6%]"
           style="min-width: 44px;"
         >
           <button
@@ -200,19 +200,19 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[26%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:w-[31%] md:p-3 lg:w-[34%]"
+          class="sticky top-0 z-10 w-[30%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:p-3 lg:w-[34%]"
         >
           Contest
         </th>
         <th
-          class="sticky top-0 z-10 hidden w-[12%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold lg:table-cell"
+          class="sticky top-0 z-10 w-[12%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-center font-bold md:p-3"
         >
           Duration
         </th>
         <th
           scope="col"
           aria-sort={difficultyAriaSort}
-          class="sticky top-0 z-10 w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[17%] lg:w-[15%]"
+          class="sticky top-0 z-10 w-[17%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold lg:w-[15%]"
         >
           <button
             type="button"
@@ -234,11 +234,11 @@
                 <span>▼</span>
               </span>
             {/if}
-            <span class="hidden lg:inline">Difficulty</span>
+            <span>Difficulty</span>
           </button>
         </th>
         <th
-          class="sticky top-0 z-10 hidden w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold md:table-cell lg:w-[21%]"
+          class="sticky top-0 z-10 w-[21%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:p-3"
         >
           <div class="flex w-full items-center gap-2">
             <RecommendersFilter
@@ -250,7 +250,7 @@
           </div>
         </th>
         <th
-          class="sticky top-0 z-10 w-[32%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-right font-bold md:w-[15%] md:p-3 lg:w-[5%]"
+          class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-right font-bold md:p-3"
         ></th>
       </tr>
     </thead>
@@ -316,7 +316,7 @@
               {contest.name}
             </a>
           </td>
-          <td class="hidden p-3 text-center lg:table-cell">
+          <td class="p-2 text-center md:p-3">
             <span class="font-mono text-sm font-medium">
               {formatDuration(contest.durationSeconds)}
             </span>
@@ -337,7 +337,7 @@
               >
             {/if}
           </td>
-          <td class="hidden truncate p-2 text-left md:table-cell md:p-3">
+          <td class="truncate p-2 text-left md:p-3">
             <a
               href={contest.addedByUrl}
               target="_blank"
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index 949adcb..3955ced 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -82,13 +82,13 @@
 
 <ResponsiveTableContainer variant="problem">
   <table
-    class="w-full min-w-[340px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm xl:min-w-[900px]"
+    class="w-full min-w-[600px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm xl:min-w-[900px]"
   >
     <thead>
       <tr>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[8%] xl:w-[5%]"
+          class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
         >
           <button
             type="button"
@@ -153,7 +153,7 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[8%] xl:w-[5%]"
+          class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
         >
           <button
             type="button"
@@ -201,13 +201,13 @@
         </th>
         <th
           scope="col"
-          class="sticky top-0 z-10 w-[30%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:w-[29%] md:p-3 xl:w-[25%]"
+          class="sticky top-0 z-10 w-[25%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:p-3"
           >Problem</th
         >
         <th
           scope="col"
           aria-sort={difficultyAriaSort}
-          class="sticky top-0 z-10 w-[17%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold md:w-[14%] xl:w-[11%]"
+          class="sticky top-0 z-10 w-[11%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-0 text-center font-bold"
         >
           <button
             type="button"
@@ -229,15 +229,15 @@
                 <span>▼</span>
               </span>
             {/if}
-            <span class="hidden font-bold lg:inline">Difficulty</span>
+            <span class="font-bold">Difficulty</span>
           </button>
         </th>
         <th
-          class="sticky top-0 z-10 hidden w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold xl:table-cell"
+          class="sticky top-0 z-10 w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:p-3"
           >Topic</th
         >
         <th
-          class="sticky top-0 z-10 hidden w-[22%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold md:table-cell xl:w-[24%]"
+          class="sticky top-0 z-10 w-[24%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold md:p-3"
         >
           <div class="flex w-full items-center gap-2">
             <RecommendersFilter
@@ -249,7 +249,7 @@
           </div>
         </th>
         <th
-          class="sticky top-0 z-10 w-[32%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-right font-bold md:w-[19%] md:p-3 xl:w-[20%]"
+          class="sticky top-0 z-10 w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-right font-bold md:p-3"
         ></th>
       </tr>
     </thead>
@@ -333,7 +333,7 @@
               </span>
             </span>
           </td>
-          <td class="hidden p-3 xl:table-cell">
+          <td class="p-2 md:p-3">
             {#if problem.type}
               <span
                 class="inline-block rounded border border-[var(--color-border)] bg-[var(--color-tertiary)] px-2 py-1 text-sm text-[var(--color-text)]"
@@ -348,7 +348,7 @@
               </span>
             {/if}
           </td>
-          <td class="hidden truncate p-3 md:table-cell">
+          <td class="truncate p-2 md:p-3">
             <a
               href={problem.addedByUrl}
               target="_blank"
diff --git a/src/lib/components/ResponsiveTableContainer.svelte b/src/lib/components/ResponsiveTableContainer.svelte
index d7900d1..150c385 100644
--- a/src/lib/components/ResponsiveTableContainer.svelte
+++ b/src/lib/components/ResponsiveTableContainer.svelte
@@ -42,7 +42,7 @@
     }
   }
 
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     .scroll-affordance {
       position: relative;
     }