Use native select input on iOS

On iOS there's a nice native input for multi-select, which there isn't
on macOS, for example. Use it rather than our (rather shitty) styled
component.

web/components/TagSelect.tsx

@@ -3,6 +3,15 @@ import { type JSX, type PropsWithChildren, useRef, useState } from 'react'
 import type { Tag } from '../tags'
 import { Badge } from './Badge'
 
+const IOS = [
+  'iPad Simulator',
+  'iPhone Simulator',
+  'iPod Simulator',
+  'iPad',
+  'iPhone',
+  'iPod',
+].includes(navigator.platform)
+
 export function TagSelect({
   tags,
   filter,
@@ -16,6 +25,46 @@ export function TagSelect({
 
   const [isOpen, setIsOpen] = useState(false)
 
+  // Use the nice native multi-select input on iOS
+  if (IOS) {
+    return (
+      <div className="relative border border-[#e5e5e5] dark:border-[#333333] rounded transition-colors focus:border-[#f0f0f0] dark:focus:border-[#333333] hover:border-[#f0f0f0] dark:hover:border-[#333333] shadow-sm focus:shadow-md bg-white dark:bg-[#1e1e1e] dark:hover:bg-[#262626]">
+        <select
+          multiple
+          className="pl-3 pr-8 py-2 text-sm cursor-pointer appearance-none"
+          value={filter}
+          onChange={(e) =>
+            onChange(
+              Array.from(e.target.selectedOptions, (option) => option.value)
+            )
+          }
+        >
+          {tags.map((x) => (
+            <option key={x.name} value={x.name}>
+              {x.name}
+            </option>
+          ))}
+        </select>
+        <svg
+          role="img"
+          aria-label="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.2"
+          stroke="currentColor"
+          className="h-5 w-5 ml-1 absolute top-2.5 right-2.5 pointer-events-none"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+          />
+        </svg>
+      </div>
+    )
+  }
+
   return (
     <div
       ref={menuRef}