Fix some mobile web issues

src/app/components/Resume/ResumeControlBar.tsx

@@ -34,7 +34,7 @@ const ResumeControlBarComponent = ({
   }, [update, document]);
 
   return (
-    <div className="sticky bottom-0 left-0 right-0 flex h-[var(--resume-control-bar-height)] items-center justify-between px-[var(--resume-padding)] text-gray-600">
+    <div className="sticky bottom-0 left-0 right-0 flex h-[var(--resume-control-bar-height)] items-center justify-center px-[var(--resume-padding)] text-gray-600 lg:justify-between">
       <div className="flex items-center gap-2">
         <MagnifyingGlassIcon className="h-5 w-5" aria-hidden="true" />
         <input
@@ -49,7 +49,7 @@ const ResumeControlBarComponent = ({
           }}
         />
         <div className="w-10">{`${Math.round(scale * 100)}%`}</div>
-        <label className="flex items-center gap-1">
+        <label className="hidden items-center gap-1 lg:flex">
           <input
             type="checkbox"
             className="mt-0.5 h-4 w-4"
@@ -60,12 +60,12 @@ const ResumeControlBarComponent = ({
         </label>
       </div>
       <a
-        className="ml-8 flex items-center gap-1 rounded-md border border-gray-300 px-3 py-0.5 hover:bg-gray-100"
+        className="ml-1 flex items-center gap-1 rounded-md border border-gray-300 px-3 py-0.5 hover:bg-gray-100 lg:ml-8"
         href={instance.url!}
         download={fileName}
       >
         <ArrowDownTrayIcon className="h-4 w-4" />
-        <span>Download Resume</span>
+        <span className="whitespace-nowrap">Download Resume</span>
       </a>
     </div>
   );

src/app/components/Resume/index.tsx

@@ -22,12 +22,10 @@ const Resume = () => {
   );
 
   return (
-    <div className="relative flex">
-      <FlexboxSpacer maxWidth={50} />
+    <div className="relative flex justify-center md:justify-start">
+      <FlexboxSpacer maxWidth={50} className="hidden md:block" />
       <div className="relative">
-        <section
-          className={`h-[calc(100vh-var(--top-nav-bar-height)-var(--resume-control-bar-height))] overflow-hidden p-[var(--resume-padding)]`}
-        >
+        <section className="h-[calc(100vh-var(--top-nav-bar-height)-var(--resume-control-bar-height))] overflow-hidden md:p-[var(--resume-padding)]">
           <ResumeIFrame
             documentSize={settings.documentSize}
             scale={scale}

src/app/components/ResumeDropzone.tsx

@@ -113,8 +113,8 @@ export const ResumeDropzone = ({
             >
               Browse a pdf file or drop it here
             </p>
-            <p className="flex items-center justify-center text-sm text-gray-500">
-              <LockClosedIcon className="mr-1 h-3 w-3 text-gray-400" />
+            <p className="flex text-sm text-gray-500">
+              <LockClosedIcon className="mr-1 mt-1 h-3 w-3 text-gray-400" />
               File data is used locally and never leaves your browser
             </p>
           </>

src/app/components/ResumeForm/SkillsForm.tsx

@@ -59,7 +59,13 @@ export const SkillsForm = () => {
         <InputGroupWrapper
           label="Featured Skills (Optional)"
           className="col-span-full"
-        />
+        >
+          <p className="mt-2 text-sm font-normal text-gray-600">
+            Featured skills is optional to highlight top skills, with more
+            circles mean higher proficiency.
+          </p>
+        </InputGroupWrapper>
+
         {featuredSkills.map(({ skill, rating }, idx) => (
           <FeaturedSkillInput
             key={idx}

src/app/components/ResumeForm/index.tsx

@@ -34,7 +34,7 @@ export const ResumeForm = () => {
   return (
     <div
       className={cx(
-        "flex h-[calc(100vh-var(--top-nav-bar-height))] justify-end overflow-y-scroll scrollbar scrollbar-track-gray-100 scrollbar-w-3",
+        "flex justify-center scrollbar scrollbar-track-gray-100 scrollbar-w-3 md:h-[calc(100vh-var(--top-nav-bar-height))] md:justify-end md:overflow-y-scroll",
         isHover && "scrollbar-thumb-gray-200"
       )}
       onMouseOver={() => setIsHover(true)}
@@ -49,7 +49,7 @@ export const ResumeForm = () => {
         <ThemeForm />
         <br />
       </section>
-      <FlexboxSpacer maxWidth={50} />
+      <FlexboxSpacer maxWidth={50} className="hidden md:block" />
     </div>
   );
 };

src/app/home/AutoTypingResume.tsx

@@ -66,7 +66,7 @@ export const AutoTypingResume = () => {
           resume={resume}
           settings={{
             ...initialSettings,
-            fontSize: "12",
+            fontSize: "12pt",
             formToHeading: {
               workExperiences: resume.workExperiences[0].company
                 ? "WORK EXPERIENCE"

src/app/home/Features.tsx

@@ -42,16 +42,18 @@ export const Features = () => {
       <div className="mx-auto lg:max-w-4xl">
         <dl className="grid grid-cols-1 justify-items-center gap-y-8 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-16">
           {FEATURES.map(({ src, title, text }) => (
-            <div className="relative w-96 self-center pl-16" key={title}>
-              <dt className="text-2xl font-bold">
-                <Image
-                  src={src}
-                  className="absolute left-0 top-1 h-12 w-12"
-                  alt="Feature icon"
-                />
-                {title}
-              </dt>
-              <dd className="mt-2">{text}</dd>
+            <div className="px-2" key={title}>
+              <div className="relative w-96 self-center pl-16">
+                <dt className="text-2xl font-bold">
+                  <Image
+                    src={src}
+                    className="absolute left-0 top-1 h-12 w-12"
+                    alt="Feature icon"
+                  />
+                  {title}
+                </dt>
+                <dd className="mt-2">{text}</dd>
+              </div>
             </div>
           ))}
         </dl>

src/app/home/LogoCloud.tsx

@@ -16,7 +16,7 @@ const LOGOS = [
 ];
 
 export const LogoCloud = () => (
-  <section className="mt-10">
+  <section className="mt-14 lg:mt-10">
     <h2 className="text-center font-semibold text-gray-500">
       Trusted by students and employees from top universities and companies
       worldwide
@@ -25,7 +25,7 @@ export const LogoCloud = () => (
       {LOGOS.map(({ src, alt }, idx) => (
         <Image
           key={idx}
-          className="col-span-3 h-full max-h-10 max-w-[10rem] lg:col-span-1"
+          className="col-span-3 h-full max-h-10 max-w-[130px] lg:col-span-1 lg:max-w-[160px]"
           src={src}
           alt={alt}
         />

src/app/resume-builder/page.tsx

@@ -8,7 +8,7 @@ export default function Create() {
   return (
     <Provider store={store}>
       <main className="relative h-full w-full overflow-hidden bg-gray-50">
-        <div className="grid grid-cols-6">
+        <div className="grid grid-cols-3 md:grid-cols-6">
           <div className="col-span-3">
             <ResumeForm />
           </div>

src/app/resume-parser/ResumeParserAlgorithmArticle.tsx

@@ -145,7 +145,7 @@ export const ResumeParserAlgorithmArticle = ({
         <Table
           table={step1TextItemsTable}
           className="!border-none"
-          tdClassNames={["", "", "whitespace-nowrap"]}
+          tdClassNames={["", "", "md:whitespace-nowrap"]}
         />
       </div>
       {/* Step 2. Group text items into lines */}

src/app/resume-parser/page.tsx

@@ -53,17 +53,17 @@ export default function ResumeParser() {
 
   return (
     <main className="h-full w-full overflow-hidden">
-      <div className="grid sm:grid-cols-6">
-        <div className="flex justify-end px-2 sm:col-span-3 sm:h-[calc(100vh-var(--top-nav-bar-height))]">
-          <section className="mt-5 max-w-[600px] grow">
+      <div className="grid md:grid-cols-6">
+        <div className="flex justify-center px-2 md:col-span-3 md:h-[calc(100vh-var(--top-nav-bar-height))] md:justify-end">
+          <section className="mt-5 grow px-4 md:max-w-[600px] md:px-0">
             <div className="aspect-h-[9.5] aspect-w-7">
               <iframe src={`${fileUrl}#navpanes=0`} className="h-full w-full" />
             </div>
           </section>
-          <FlexboxSpacer maxWidth={45} className="hidden sm:block" />
+          <FlexboxSpacer maxWidth={45} className="hidden md:block" />
         </div>
-        <div className="flex px-6 text-gray-900 sm:col-span-3 sm:h-[calc(100vh-var(--top-nav-bar-height))] sm:overflow-y-scroll">
-          <FlexboxSpacer maxWidth={45} />
+        <div className="flex px-6 text-gray-900 md:col-span-3 md:h-[calc(100vh-var(--top-nav-bar-height))] md:overflow-y-scroll">
+          <FlexboxSpacer maxWidth={45} className="hidden md:block" />
           <section className="max-w-[600px] grow">
             <Heading className="text-primary !mt-4">
               Resume Parser Playground