[offers][browse] tweak font sizes for mobile

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>

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

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',