tweak: 50/50 field width + lucide icon buttons for edit/search/fetch (#824)

- Change .field-grid to 50/50 label/input split (was 1fr 120px)
- Add .field-inline-btn for icon-only button sizing
- Replace "Edit" text with Pencil icon in AccessSettingsEditor
- Replace "Search" text with Search/Loader2 icon in MapEditorPanel
- Replace "Fetch" text with RefreshCw/Loader2 icon in MapEditorPanel
- Add aria-label and title attributes for icon accessibility

Co-authored-by: wilhel1812 <wilhelm@linksim.link>

Author: wilhel1812

src/components/AccessSettingsEditor.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useRef, useState } from "react";
-import { Trash2 } from "lucide-react";
+import { Pencil, Trash2 } from "lucide-react";
 import type { CollaboratorDirectoryUser } from "../lib/cloudUser";
 import { ActionButton } from "./ActionButton";
 import { AvatarBadge } from "./AvatarBadge";
@@ -123,9 +123,10 @@ export function AccessSettingsEditor({
             ref={triggerRef}
             disabled={disabled}
             onClick={() => setPopoverOpen((open) => !open)}
+            title="Edit collaborators"
             type="button"
           >
-            Edit
+            <Pencil size={14} />
           </ActionButton>
         </div>
       </div>

src/components/map/MapEditorPanel.tsx

@@ -1,6 +1,6 @@
 import { createPortal } from "react-dom";
 import { useEffect, useRef, useState } from "react";
-import { History } from "lucide-react";
+import { History, Loader2, RefreshCw, Search } from "lucide-react";
 import { FREQUENCY_PRESETS, frequencyPresetGroups } from "../../lib/frequencyPlans";
 import {
   fetchResourceChanges,
@@ -282,12 +282,14 @@ function SiteEditorCard({
               value={form.siteSearchQuery}
             />
             <ActionButton
+              aria-label="Search location"
               className="field-inline-btn"
               disabled={form.siteSearchBusy}
               onClick={() => void form.runSiteSearch()}
+              title="Search location"
               type="button"
             >
-              {form.siteSearchBusy ? "Searching..." : "Search"}
+              {form.siteSearchBusy ? <Loader2 className="animate-spin" size={14} /> : <Search size={14} />}
             </ActionButton>
           </div>
         </label>
@@ -316,6 +318,7 @@ function SiteEditorCard({
               value={form.groundDraft}
             />
             <ActionButton
+              aria-label="Fetch elevation"
               className="field-inline-btn"
               disabled={form.isEditorTerrainFetching}
               onClick={() => {
@@ -328,9 +331,10 @@ function SiteEditorCard({
                 }
                 form.setGroundDraft(elevation);
               }}
+              title="Fetch elevation"
               type="button"
             >
-              {form.isEditorTerrainFetching ? "Loading…" : "Fetch"}
+              {form.isEditorTerrainFetching ? <Loader2 className="animate-spin" size={14} /> : <RefreshCw size={14} />}
             </ActionButton>
           </div>
         </label>

src/index.css

@@ -552,7 +552,7 @@ button {
 
 .field-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 120px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: center;
   gap: 10px;
   font-size: 0.82rem;
@@ -598,6 +598,16 @@ button {
   min-height: 32px;
 }
 
+.field-inline-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 /* Upload label piggybacks off btn-ghost; only overrides live here */
 .upload-button {
   border-style: dashed;