From 3605c9fa63f1144801ce93f108f5157b967dd9a0 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 3 Nov 2022 17:06:15 +0800
Subject: [PATCH] [offers][browse] tweak font sizes for mobile

---
 .../portal/src/components/offers/table/OffersTable.tsx | 10 +++++-----
 apps/portal/src/pages/offers/index.tsx                 |  2 +-
 packages/ui/src/Typeahead/Typeahead.tsx                |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/components/offers/table/OffersTable.tsx b/apps/portal/src/components/offers/table/OffersTable.tsx
index 9022297d..b530466b 100644
--- a/apps/portal/src/components/offers/table/OffersTable.tsx
+++ b/apps/portal/src/components/offers/table/OffersTable.tsx
@@ -99,7 +99,7 @@ export default function OffersTable({
 
   function renderFilters() {
     return (
-      <div className="flex items-center justify-between p-4 text-sm sm:grid-cols-4 md:text-base">
+      <div className="flex items-center justify-between p-4 text-xs text-slate-700 sm:grid-cols-4 sm:text-sm md:text-base">
         <DropdownMenu
           align="start"
           label={
@@ -204,13 +204,13 @@ export default function OffersTable({
     }
 
     return (
-      <thead className="text-slate-700">
+      <thead className="font-semibold">
         <tr className="divide-x divide-slate-200">
           {columns.map((header, index) => (
             <th
               key={header}
               className={clsx(
-                'bg-slate-100 py-3 px-4',
+                'whitespace-nowrap bg-slate-100 py-3 px-4',
                 // Make last column sticky.
                 index === columns.length - 1 &&
                   'sticky right-0 drop-shadow md:drop-shadow-none',
@@ -239,7 +239,7 @@ export default function OffersTable({
         </div>
       ) : (
         <div className="overflow-x-auto text-slate-600">
-          <table className="w-full divide-y divide-slate-200 border-y border-slate-200 text-left">
+          <table className="w-full divide-y divide-slate-200 border-y border-slate-200 text-left text-xs text-slate-700 sm:text-sm md:text-base">
             {renderHeader()}
             <tbody>
               {offers.map((offer) => (
@@ -250,7 +250,7 @@ export default function OffersTable({
           {!offers ||
             (offers.length === 0 && (
               <div className="py-16 text-lg">
-                <div className="flex justify-center">No data yet 🥺</div>
+                <div className="flex justify-center">No data yet🥺</div>
               </div>
             ))}
         </div>
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index 9eaeb955..e84173f5 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -59,7 +59,7 @@ export default function OffersHomePage() {
             offers.
           </div>
         </div>
-        <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-base text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
+        <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
           <span>Viewing offers for</span>
           <div className="flex items-center space-x-4">
             <JobTitlesTypeahead
diff --git a/packages/ui/src/Typeahead/Typeahead.tsx b/packages/ui/src/Typeahead/Typeahead.tsx
index 8baf0776..1f1f3242 100644
--- a/packages/ui/src/Typeahead/Typeahead.tsx
+++ b/packages/ui/src/Typeahead/Typeahead.tsx
@@ -144,7 +144,7 @@ export default function Typeahead({
             <Combobox.Input
               aria-describedby={hasError ? errorId : undefined}
               className={clsx(
-                'w-full border-none py-2 pl-3 pr-10 leading-5 focus:ring-0',
+                'w-full border-none py-2 pl-3 pr-10 text-[length:inherit] leading-5 focus:ring-0',
                 stateClasses[state].input,
                 textSizes[textSize],
                 'disabled:cursor-not-allowed disabled:bg-transparent disabled:text-slate-500',