fix(mobile): increase font sizes and other mobile-centric improvements (#1907)

packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx

@@ -119,8 +119,11 @@ const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focus
         <Disclosure open={dropdownVisible} onChange={showDropdown}>
           <input
             ref={inputRef}
-            className={`${tags.length > 0 ? 'w-80' : 'mr-10 w-70'} no-border h-7
-            bg-transparent text-xs text-text focus:border-b-2 focus:border-solid focus:border-info focus:shadow-none focus:outline-none`}
+            className={classNames(
+              `${tags.length > 0 ? 'w-80' : 'mr-10 w-70'}`,
+              'bg-transparent text-sm text-text focus:border-b-2 focus:border-solid focus:border-info lg:text-xs',
+              'no-border h-7 focus:shadow-none focus:outline-none',
+            )}
             value={searchQuery}
             onChange={onSearchQueryChange}
             type="text"

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx

@@ -92,7 +92,7 @@ const LinkedItemBubble = ({
   return (
     <button
       ref={ref}
-      className="group flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
+      className="group flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-sm text-text hover:bg-contrast focus:bg-contrast lg:text-xs"
       onFocus={handleFocus}
       onBlur={onBlur}
       onClick={onClick}

packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx

@@ -22,7 +22,7 @@ const LinkedItemMeta = ({
   return (
     <>
       <Icon type={icon} className={classNames('flex-shrink-0', className)} />
-      <div className="min-w-0 flex-grow break-words text-left text-sm">
+      <div className="min-w-0 flex-grow break-words text-left text-base lg:text-sm">
         {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
         {searchQuery
           ? splitQueryInString(title, searchQuery).map((substring, index) => (

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -326,7 +326,7 @@ const LinkedItemsPanel = ({
                     onChange={handleFileInputChange}
                   />
                   <button
-                    className="flex w-full cursor-pointer items-center gap-3 bg-transparent px-3 py-2 text-left text-sm text-text hover:bg-info-backdrop hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+                    className="flex w-full cursor-pointer items-center gap-3 bg-transparent px-3 py-2 text-left text-base text-text hover:bg-info-backdrop hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
                     onClick={selectAndUploadFiles}
                   >
                     <Icon type="add" />