[resumes][feat] mobile responsive resume rows on browse

apps/portal/src/components/resumes/browse/ResumeListItem.tsx

@@ -19,51 +19,53 @@ type Props = Readonly<{
 export default function ResumeListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100">
-        <div className="col-span-4">
-          {resumeInfo.title}
-          <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
-            <div className="flex">
-              <BriefcaseIcon
-                aria-hidden="true"
-                className="mr-1.5 h-4 w-4 flex-shrink-0"
-              />
-              {resumeInfo.role}
+      <div className="grid grid-cols-8">
+        <div className="col-span-7 grid gap-4 border-b border-slate-200 p-4 hover:bg-slate-100 sm:grid-cols-7">
+          <div className="sm:col-span-4">
+            {resumeInfo.title}
+            <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
+              <div className="flex">
+                <BriefcaseIcon
+                  aria-hidden="true"
+                  className="mr-1.5 h-4 w-4 flex-shrink-0"
+                />
+                {resumeInfo.role}
+              </div>
+              <div className="ml-4 flex">
+                <AcademicCapIcon
+                  aria-hidden="true"
+                  className="mr-1.5 h-4 w-4 flex-shrink-0"
+                />
+                {resumeInfo.experience}
+              </div>
             </div>
-            <div className="ml-4 flex">
-              <AcademicCapIcon
-                aria-hidden="true"
-                className="mr-1.5 h-4 w-4 flex-shrink-0"
-              />
-              {resumeInfo.experience}
+            <div className="mt-4 flex justify-start text-xs text-slate-500">
+              <div className="flex gap-2 pr-4">
+                <ChatBubbleLeftIcon className="w-4" />
+                {`${resumeInfo.numComments} comment${
+                  resumeInfo.numComments === 1 ? '' : 's'
+                }`}
+              </div>
+              <div className="flex gap-2">
+                {resumeInfo.isStarredByUser ? (
+                  <ColouredStarIcon className="w-4 text-yellow-400" />
+                ) : (
+                  <StarIcon className="w-4" />
+                )}
+                {`${resumeInfo.numStars} star${
+                  resumeInfo.numStars === 1 ? '' : 's'
+                }`}
+              </div>
             </div>
           </div>
-          <div className="mt-4 flex justify-start text-xs text-slate-500">
-            <div className="flex gap-2 pr-4">
-              <ChatBubbleLeftIcon className="w-4" />
-              {`${resumeInfo.numComments} comment${
-                resumeInfo.numComments === 1 ? '' : 's'
-              }`}
+          <div className="self-center text-sm text-slate-500 sm:col-span-3">
+            <div>
+              {`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
+                addSuffix: true,
+              })} by ${resumeInfo.user}`}
             </div>
-            <div className="flex gap-2">
-              {resumeInfo.isStarredByUser ? (
-                <ColouredStarIcon className="w-4 text-yellow-400" />
-              ) : (
-                <StarIcon className="w-4" />
-              )}
-              {`${resumeInfo.numStars} star${
-                resumeInfo.numStars === 1 ? '' : 's'
-              }`}
-            </div>
-          </div>
-        </div>
-        <div className="col-span-3 self-center text-sm text-slate-500">
-          <div>
-            {`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
-              addSuffix: true,
-            })} by ${resumeInfo.user}`}
+            <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
           </div>
-          <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
         </div>
         <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center text-slate-400" />
       </div>

apps/portal/src/pages/resumes/[resumeId].tsx

@@ -213,7 +213,7 @@ export default function ResumeReviewPage() {
           <Head>
             <title>{detailsQuery.data.title}</title>
           </Head>
-          <main className="h-[calc(100vh-2rem)] flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16">
+          <main className="h-full flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16">
             <div className="flex justify-between">
               <h1 className="pr-2 text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
                 {detailsQuery.data.title}

apps/portal/src/pages/resumes/browse.tsx

@@ -10,7 +10,6 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 import {
-  Button,
   CheckboxInput,
   CheckboxList,
   DropdownMenu,
@@ -432,7 +431,7 @@ export default function ResumeHomePage() {
         </Transition.Root>
       </div>
 
-      <main className="h-[calc(100vh-4rem)] flex-auto px-8 pb-4">
+      <main className="h-full flex-auto px-8 pb-4">
         <div className="flex justify-start">
           <div className="fixed top-0 bottom-0 mt-24 hidden w-64 overflow-auto lg:block">
             <h3 className="text-md font-medium tracking-tight text-gray-900">
@@ -518,7 +517,7 @@ export default function ResumeHomePage() {
             </div>
           </div>
           <div className="relative lg:left-64 lg:w-[calc(100%-16rem)]">
-            <div className="lg:border-grey-200 sticky top-0 z-0 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b">
+            <div className="lg:border-grey-200 sticky top-0 z-10 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b">
               <div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none lg:pb-0">
                 <div>
                   <Tabs
@@ -541,12 +540,6 @@ export default function ResumeHomePage() {
                     onChange={onTabChange}
                   />
                 </div>
-                <Button
-                  className="whitespace-pre-wrap px-2 lg:hidden"
-                  label="Submit Resume"
-                  variant="primary"
-                  onClick={onSubmitResume}
-                />
               </div>
               <div className="flex flex-wrap items-center justify-start gap-6">
                 <div className="w-64">
@@ -561,33 +554,37 @@ export default function ResumeHomePage() {
                     onChange={setSearchValue}
                   />
                 </div>
-                <Button
-                  className="lg:hidden"
-                  icon={FunnelIcon}
-                  isLabelHidden={true}
-                  label="Filters"
-                  variant="tertiary"
-                  onClick={() => setMobileFiltersOpen(true)}
-                />
-                <DropdownMenu
-                  align="end"
-                  label={
-                    SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label
-                  }>
-                  {SORT_OPTIONS.map(({ label, value }) => (
-                    <DropdownMenu.Item
-                      key={value}
-                      isSelected={sortOrder === value}
-                      label={label}
-                      onClick={() => setSortOrder(value)}></DropdownMenu.Item>
-                  ))}
-                </DropdownMenu>
-                <Button
-                  className="hidden lg:block"
-                  label="Submit Resume"
-                  variant="primary"
-                  onClick={onSubmitResume}
-                />
+                <div>
+                  <DropdownMenu
+                    align="end"
+                    label={
+                      SORT_OPTIONS.find(({ value }) => value === sortOrder)
+                        ?.label
+                    }>
+                    {SORT_OPTIONS.map(({ label, value }) => (
+                      <DropdownMenu.Item
+                        key={value}
+                        isSelected={sortOrder === value}
+                        label={label}
+                        onClick={() => setSortOrder(value)}></DropdownMenu.Item>
+                    ))}
+                  </DropdownMenu>
+                </div>
+                <button
+                  className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
+                  type="button"
+                  onClick={() => setMobileFiltersOpen(true)}>
+                  <span className="sr-only">Filters</span>
+                  <FunnelIcon aria-hidden="true" className="h-6 w-6" />
+                </button>
+                <div>
+                  <button
+                    className="bg-primary-500 block w-36 rounded-md py-2 px-3 text-sm font-medium text-white"
+                    type="button"
+                    onClick={onSubmitResume}>
+                    Submit Resume
+                  </button>
+                </div>
               </div>
             </div>
             {isFetchingResumes ? (

apps/portal/src/pages/resumes/index.tsx

@@ -11,7 +11,7 @@ export default function Home() {
         <title>Resume Review</title>
       </Head>
 
-      <main className="h-[calc(100vh-2rem)] w-full overflow-y-auto">
+      <main className="h-full w-full overflow-y-auto">
         <Hero />
         <PrimaryFeatures />
         <CallToAction />