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/ObjektSelector.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import type { ObjektOption, SelectedObjekt } from '@/types/logbuch';
+import CustomSelect from './CustomSelect';
 
 interface Props {
   selected: SelectedObjekt[];
@@ -46,19 +47,24 @@ export default function ObjektSelector({ selected, onChange }: Props) {
     onChange(selected.filter((o) => o.Name !== name));
   }
 
+  const options = [
+    { value: 'neu', label: '— Neues Objekt eingeben —' },
+    ...available.map((o) => ({ value: String(o.ID), label: o.Name })),
+  ];
+
   return (
-    <div className="space-y-2">
+    <div className="space-y-3">
       <div className="flex flex-wrap gap-2">
         {selected.map((o) => (
           <span
             key={o.Name}
-            className="inline-flex items-center gap-1 bg-green-100 text-green-800 text-sm px-2 py-1 rounded-full"
+            className="inline-flex items-center gap-2 bg-green-100 text-green-800 text-base px-3 py-2 rounded-full"
           >
             {o.Name}
             <button
               type="button"
               onClick={() => remove(o.Name)}
-              className="ml-1 text-green-600 hover:text-red-600 font-bold leading-none"
+              className="flex items-center justify-center w-7 h-7 rounded-full text-green-600 hover:bg-red-100 hover:text-red-600 font-bold text-xl leading-none"
               aria-label={`${o.Name} entfernen`}
             >
               ×
@@ -67,19 +73,11 @@ export default function ObjektSelector({ selected, onChange }: Props) {
         ))}
       </div>
 
-      <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="">+ Objekt hinzufügen</option>
-        <option value="neu">— Neues Objekt eingeben —</option>
-        {available.map((o) => (
-          <option key={o.ID} value={o.ID}>
-            {o.Name}
-          </option>
-        ))}
-      </select>
+      <CustomSelect
+        placeholder="+ Objekt hinzufügen"
+        options={options}
+        onChange={add}
+      />
 
       {showNewInput && (
         <div className="flex gap-2">
@@ -89,19 +87,19 @@ export default function ObjektSelector({ selected, onChange }: Props) {
             onChange={(e) => setNewName(e.target.value)}
             onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }}
             placeholder="Objektname eingeben"
-            className="flex-1 px-3 py-1.5 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+            className="flex-1 px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
           />
           <button
             type="button"
             onClick={addNew}
-            className="px-3 py-1.5 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700"
+            className="px-4 py-3 bg-green-600 text-white text-base rounded-lg hover:bg-green-700"
           >
             OK
           </button>
           <button
             type="button"
             onClick={() => { setShowNewInput(false); setNewName(''); }}
-            className="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm rounded-lg hover:bg-gray-300"
+            className="px-4 py-3 bg-gray-200 text-gray-700 text-base rounded-lg hover:bg-gray-300"
           >
             Abbrechen
           </button>