From 2416726a18cd02234895012277a637e5deb27888 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Thu, 9 May 2024 22:13:11 -0700
Subject: [PATCH] Make challenges list work on mobile

---
 .../src/components/ChallengePanel.tsx         | 22 ++++++++-----------
 .../src/components/GameNoticePanel.tsx        |  4 ++--
 .../src/pages/games/[id]/Challenges.tsx       | 13 +++++++++--
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
index c25e3a3f..693f34c0 100644
--- a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
+++ b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -25,6 +25,7 @@ import ChallengeDetailModal from '@Components/ChallengeDetailModal'
 import Empty from '@Components/Empty'
 import WriteupSubmitModal from '@Components/WriteupSubmitModal'
 import { useChallengeTagLabelMap, SubmissionTypeIconMap } from '@Utils/Shared'
+import { useIsMobile } from '@Utils/ThemeOverride'
 import { useGame, useGameTeamInfo } from '@Utils/useGame'
 import { ChallengeInfo, ChallengeTag, SubmissionType } from '@Api'
 
@@ -63,16 +64,12 @@ const ChallengePanel: FC = () => {
   const challengeTagLabelMap = useChallengeTagLabelMap()
   const { t } = useTranslation()
 
+  const isMobile = useIsMobile(1300)
+
   // skeleton for loading
   if (!challenges) {
     return (
-      <Group
-        gap="sm"
-        wrap="nowrap"
-        justify="space-between"
-        align="flex-start"
-        maw="calc(100% - 20rem)"
-      >
+      <Group gap="sm" wrap="nowrap" justify="space-between" align="flex-start">
         <Stack miw="10rem" gap={6}>
           {Array(10)
             .fill(null)
@@ -88,7 +85,6 @@ const ChallengePanel: FC = () => {
           pt={0}
           spacing="sm"
           pos="relative"
-          w="calc(100% - 9rem)"
           cols={{ base: 3, w18: 4, w24: 6, w30: 8, w36: 10, w42: 12, w48: 14 }}
         >
           {Array(8)
@@ -139,9 +135,9 @@ const ChallengePanel: FC = () => {
       wrap="nowrap"
       justify="space-between"
       align="flex-start"
-      miw="calc(100% - 20rem)"
+      style={{ flex: '100% 1' }}
     >
-      <Stack miw="10rem">
+      <Stack miw="10rem" style={{ position: isMobile ? 'sticky' : undefined, top: '2rem' }}>
         {game?.writeupRequired && (
           <>
             <Button
@@ -218,18 +214,18 @@ const ChallengePanel: FC = () => {
         </Tabs>
       </Stack>
       <ScrollArea
-        w="calc(100% - 9rem)"
-        h="calc(100vh - 7rem)"
+        h={isMobile ? undefined : 'calc(100vh - 7rem)'}
         pos="relative"
         offsetScrollbars
         scrollbarSize={4}
+        style={{ flex: 'auto' }}
       >
         {currentChallenges && currentChallenges.length ? (
           <SimpleGrid
             p="xs"
             pt={0}
             spacing="sm"
-            cols={{ base: 3, w18: 4, w24: 6, w30: 8, w36: 10, w42: 12, w48: 14 }}
+            style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}
           >
             {currentChallenges?.map((chal) => (
               <ChallengeCard
diff --git a/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx b/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx
index 82456d87..e9eab740 100644
--- a/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx
+++ b/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx
@@ -175,7 +175,7 @@ const GameNoticePanel: FC = () => {
   )
 
   return (
-    <Card shadow="sm" w="20rem">
+    <Card shadow="sm">
       <Stack gap="xs">
         <SegmentedControl
           value={filter}
@@ -193,7 +193,7 @@ const GameNoticePanel: FC = () => {
           ]}
         />
         {filteredNotices.length ? (
-          <ScrollArea offsetScrollbars scrollbarSize={0} h="calc(100vh - 25rem)">
+          <ScrollArea offsetScrollbars scrollbarSize={0}>
             <List size="sm" spacing={3}>
               {filteredNotices.map((notice) => (
                 <List.Item
diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/Challenges.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/Challenges.tsx
index b1281f20..719c3a90 100644
--- a/src/GZCTF/ClientApp/src/pages/games/[id]/Challenges.tsx
+++ b/src/GZCTF/ClientApp/src/pages/games/[id]/Challenges.tsx
@@ -6,16 +6,25 @@ import TeamRank from '@Components/TeamRank'
 import WithGameTab from '@Components/WithGameTab'
 import WithNavBar from '@Components/WithNavbar'
 import WithRole from '@Components/WithRole'
+import { useIsMobile } from '@Utils/ThemeOverride'
 import { Role } from '@Api'
 
 const Challenges: FC = () => {
+  const isMobile = useIsMobile(1300)
+
   return (
     <WithNavBar width="90%">
       <WithRole requiredRole={Role.User}>
         <WithGameTab>
-          <Group gap="sm" justify="space-between" align="flex-start" grow wrap="nowrap">
+          <Group
+            gap="sm"
+            justify="space-between"
+            align="flex-start"
+            wrap={isMobile ? 'wrap' : 'nowrap'}
+            style={{ marginBottom: '2rem' }}
+          >
             <ChallengePanel />
-            <Stack maw="20rem">
+            <Stack style={{ flexBasis: '20rem', flexGrow: 1 }}>
               <TeamRank />
               <GameNoticePanel />
             </Stack>