fix: improve proxy logs form layout for better responsive behavior

Restructured the form to prevent overflow issues on mobile:
- Separated input field from controls in distinct sections
- Button and checkboxes now in a wrapping flex container
- All controls stack vertically on mobile for better readability
- Horizontal layout with wrapping on larger screens

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-10-25 18:01:13 +02:00
parent a1ece556d4
commit c94aa7bd83

View file

@ -46,14 +46,16 @@
<x-loading wire:poll.2000ms='getLogs(true)' />
@endif
</div>
<form wire:submit='getLogs(true)' class="flex flex-col gap-4 sm:flex-row sm:gap-2 sm:items-end">
<form wire:submit='getLogs(true)' class="flex flex-col gap-4">
<div class="w-full sm:w-96">
<x-forms.input label="Only Show Number of Lines" placeholder="100" type="number" required
id="numberOfLines" :readonly="$streamLogs"></x-forms.input>
</div>
<x-forms.button type="submit">Refresh</x-forms.button>
<x-forms.checkbox instantSave label="Stream Logs" id="streamLogs"></x-forms.checkbox>
<x-forms.checkbox instantSave label="Include Timestamps" id="showTimeStamps"></x-forms.checkbox>
<div class="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:gap-2 sm:items-center">
<x-forms.button type="submit">Refresh</x-forms.button>
<x-forms.checkbox instantSave label="Stream Logs" id="streamLogs"></x-forms.checkbox>
<x-forms.checkbox instantSave label="Include Timestamps" id="showTimeStamps"></x-forms.checkbox>
</div>
</form>
<div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'">
<div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300 border-neutral-200"