Fix mobile UI issues: form text visibility, slide panel overlap, notes display
All checks were successful
Deploy / deploy (push) Successful in 2m38s

- Add CSS for all form fields (input, textarea, select) in dark mode with
  -webkit-text-fill-color for iOS Safari compatibility
- Add padding-bottom to event detail panel so delete button is visible
  above bottom nav on mobile
- Display notes field in ProductCollected and ProductSold event details

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-10 16:38:04 +00:00
parent 5be8da96f2
commit 66d404efbc
2 changed files with 21 additions and 8 deletions

View File

@@ -29,15 +29,24 @@ def TabStyles(): # noqa: N802
def SelectStyles(): # noqa: N802
"""CSS styles to fix select/option visibility in dark mode."""
"""CSS styles to fix form field visibility in dark mode."""
return Style("""
/* Ensure select dropdowns and options are visible in dark mode */
select, select option {
background-color: #1c1c1c;
color: #e5e5e5;
/* Ensure all form fields are visible in dark mode */
input, textarea, select,
.uk-input, .uk-textarea, .uk-select {
background-color: #1c1c1c !important;
color: #e5e5e5 !important;
-webkit-text-fill-color: #e5e5e5 !important;
}
/* UIkit select dropdown styling */
.uk-select, .uk-select option {
/* Placeholder text styling */
input::placeholder, textarea::placeholder,
.uk-input::placeholder, .uk-textarea::placeholder {
color: #737373 !important;
-webkit-text-fill-color: #737373 !important;
opacity: 1;
}
/* Select dropdown options */
select option, .uk-select option {
background-color: #1c1c1c;
color: #e5e5e5;
}

View File

@@ -77,7 +77,7 @@ def event_detail_panel(
# Delete button (admin only, not for tombstoned events)
delete_section(event.id) if user_role == UserRole.ADMIN and not is_tombstoned else None,
id="event-panel-content",
cls="bg-[#141413] h-full overflow-y-auto",
cls="bg-[#141413] h-full overflow-y-auto pb-20 md:pb-0",
)
@@ -200,6 +200,8 @@ def render_payload_items(
items.append(payload_item("Product", payload["product_code"]))
if "quantity" in payload:
items.append(payload_item("Quantity", str(payload["quantity"])))
if payload.get("notes"):
items.append(payload_item("Notes", payload["notes"]))
elif event_type == "AnimalOutcome":
if "outcome" in payload:
@@ -244,6 +246,8 @@ def render_payload_items(
if "price_cents" in payload:
price = payload["price_cents"] / 100
items.append(payload_item("Price", f"${price:.2f}"))
if payload.get("notes"):
items.append(payload_item("Notes", payload["notes"]))
elif event_type == "HatchRecorded":
if "clutch_size" in payload: