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:
parent
a1ece556d4
commit
c94aa7bd83
1 changed files with 6 additions and 4 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue