style: adding mobile view

mlcommons · Jan 15, 2024 · fde3061 · fde3061
1 parent a6fc75d
commit fde3061
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/frontends/web/src/new_front/components/TaskPage/OverviewTask.tsx b/frontends/web/src/new_front/components/TaskPage/OverviewTask.tsx
@@ -11,12 +11,12 @@ const OverviewTask: FC<OverviewTaskProps> = ({ taskInstructions }) => {
   const [openTab, setOpenTab] = useState(1);
   return (
     <>
-      <div className="grid grid-cols-6 border pb-8">
+      <div className="pb-8 border md:grid md:grid-cols-6">
         <div>
-          <aside className="flex flex-col w-40 h-screen px-3 py-1 overflow-y-auto bg-white border-r rtl:border-r-0 rtl:border-l ">
-            <div className="flex flex-col justify-between flex-1 mt-6">
+          <aside className="flex px-3 py-1 mx-auto overflow-y-auto bg-white border-r md:h-screen md:w-36 rtl:border-r-0 rtl:border-l ">
+            <div className="flex flex-row justify-between flex-1 mt-6">
               <nav className="flex-1 -mx-3 space-y-3 ">
-                <ul className="flex flex-row flex-wrap" role="tablist">
+                <ul className="flex flex-col flex-wrap" role="tablist">
                   {taskInstructions &&
                     Object.keys(taskInstructions).map((key, index) => (
                       <TabOptionVertical
@@ -39,7 +39,7 @@ const OverviewTask: FC<OverviewTaskProps> = ({ taskInstructions }) => {
               key={index}
               className={`${
                 openTab === index + 1 ? "block" : "hidden"
-              } col-span-4 mt-[32px]`}
+              } col-span-5 mt-[32px] mx-10`}
             >
               <div data-color-mode="light" className="mt-4 ">
                 <MDEditor.Markdown source={taskInstructions[key]} />

diff --git a/frontends/web/src/new_front/components/TaskPage/PrincipalTaskStats.tsx b/frontends/web/src/new_front/components/TaskPage/PrincipalTaskStats.tsx
@@ -37,8 +37,8 @@ const PrincipalTaskStats: FC<PrincipalTaskStatsProps> = ({
   }, [selectedRound]);
 
   return (
-    <div className="grid grid-rows-2 pl-32">
-      <div className="grid items-center justify-end grid-cols-2 px-8 py-4">
+    <div className="pl-32 md:grid md:grid-rows-2">
+      <div className="grid items-center justify-end px-8 py-4 gap-y-8 md:grid-cols-2">
         {totalRounds !== 0 && (
           <div className="text-center ">
             <h6 className="text-3xl font-bold text-white">{selectedRound}</h6>
@@ -58,7 +58,7 @@ const PrincipalTaskStats: FC<PrincipalTaskStatsProps> = ({
           </div>
         )}
       </div>
-      <div className="grid items-center justify-end grid-cols-2 px-8 py-4">
+      <div className="grid items-center justify-end px-8 py-4 md:grid-cols-2">
         {maxScore !== 0 && (
           <div className="text-center ">
             <h6 className="text-3xl font-bold text-white">