arnef/nidus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 3 Activity

Stack dashboard form fields on mobile instead of breaking layout

Browse Source 
The new-calendar/new-address-book creation forms and the per-resource
share form used flex-row layouts that overflowed on narrow viewports.
Switch to flex-col on mobile, flex-row from sm: up, with inputs/buttons
going full-width below the sm breakpoint.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
arnef
2026-08-19 12:57:05 +02:00
co-authored by Copilot
parent 7d4f28de3c
commit 37399d1ceb
3 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/templates/dashboard.templ
+12 -12
View File
@@ -29,40 +29,40 @@ templ Dashboard(username string, resources []ResourceCard, sharedWithMe []Shared
@Layout("Dashboard", username) {
<h1 class="text-2xl font-semibold mb-6">Your calendars &amp; address books</h1>
<div class="flex gap-4 mb-6">
<div class="flex flex-col sm:flex-row gap-4 mb-6">
<form
class="flex items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
class="flex flex-col sm:flex-row sm:items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
hx-post="/web/resources/calendar"
hx-target="#resources"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<div>
<div class="flex-1">
<label class="block text-xs text-gray-500 mb-1">New calendar</label>
<input name="name" type="text" required pattern="[a-zA-Z0-9_-]{1,64}"
placeholder="e.g. work"
class="rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
class="w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
</div>
<button type="submit"
class="bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
class="w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
Add
</button>
</form>
<form
class="flex items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
class="flex flex-col sm:flex-row sm:items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
hx-post="/web/resources/addressbook"
hx-target="#resources"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<div>
<div class="flex-1">
<label class="block text-xs text-gray-500 mb-1">New address book</label>
<input name="name" type="text" required pattern="[a-zA-Z0-9_-]{1,64}"
placeholder="e.g. contacts"
class="rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
class="w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
</div>
<button type="submit"
class="bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
class="w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
Add
</button>
</form>
@@ -147,7 +147,7 @@ templ ResourceCardView(r ResourceCard) {
</ul>
<form
class="flex items-end gap-2"
class="flex flex-col sm:flex-row sm:items-end gap-2"
hx-post={ shareEndpoint(r.Kind) }
hx-target={ "#resource-" + r.Kind + "-" + r.Name }
hx-swap="outerHTML"
@@ -160,13 +160,13 @@ templ ResourceCardView(r ResourceCard) {
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">Permission</label>
<select name="permission" class="rounded-md border-gray-300 border px-2 py-1.5 text-sm">
<select name="permission" class="w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm">
<option value="read">read</option>
<option value="write">write</option>
</select>
</div>
<button type="submit"
class="bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
class="w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
Share
</button>
</form>