Replace native selects with custom dropdown for mobile usability

Native <select> popups ignore CSS on iOS/Android. CustomSelect renders
a styled div-based dropdown with full-width touch-friendly option buttons
(py-3, text-base). Used in BeoSelector and ObjektSelector.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/BeoSelector.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import type { BeoOption } from '@/types/logbuch';
+import CustomSelect from './CustomSelect';
 
 interface Props {
   selected: BeoOption[];
@@ -21,9 +22,8 @@ export default function BeoSelector({ selected, onChange }: Props) {
   const selectedIds = new Set(selected.map((b) => b.ID));
   const available = all.filter((b) => !selectedIds.has(b.ID));
 
-  function add(id: string) {
-    if (!id) return;
-    const beo = all.find((b) => b.ID === parseInt(id));
+  function add(value: string) {
+    const beo = all.find((b) => b.ID === parseInt(value));
     if (beo) onChange([...selected, beo]);
   }
 
@@ -32,18 +32,18 @@ export default function BeoSelector({ selected, onChange }: Props) {
   }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-3">
       <div className="flex flex-wrap gap-2">
         {selected.map((b) => (
           <span
             key={b.ID}
-            className="inline-flex items-center gap-1 bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded-full"
+            className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-base px-3 py-2 rounded-full"
           >
             {b.Kuerzel} — {b.Name}
             <button
               type="button"
               onClick={() => remove(b.ID)}
-              className="ml-1 text-blue-600 hover:text-red-600 font-bold leading-none"
+              className="flex items-center justify-center w-7 h-7 rounded-full text-blue-600 hover:bg-red-100 hover:text-red-600 font-bold text-xl leading-none"
               aria-label={`${b.Kuerzel} entfernen`}
             >
               ×
@@ -51,19 +51,13 @@ export default function BeoSelector({ selected, onChange }: Props) {
           </span>
         ))}
       </div>
+
       {available.length > 0 && (
-        <select
-          className="px-3 py-1.5 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
-          value=""
-          onChange={(e) => add(e.target.value)}
-        >
-          <option value="">+ BEO hinzufügen</option>
-          {available.map((b) => (
-            <option key={b.ID} value={b.ID}>
-              {b.Kuerzel} — {b.Name}
-            </option>
-          ))}
-        </select>
+        <CustomSelect
+          placeholder="+ BEO hinzufügen"
+          options={available.map((b) => ({ value: String(b.ID), label: `${b.Kuerzel} — ${b.Name}` }))}
+          onChange={add}
+        />
       )}
     </div>
   );