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

Improve mobile layout of the dashboard, contacts, and calendar pages

Browse Source 
- Layout nav wraps gracefully on narrow screens instead of overflowing
  (username truncates, links/logout reflow).
- Dashboard resource cards and share rows wrap instead of clipping
  when names/usernames are long.
- Contacts list hides secondary columns (organization/email below
  md, phone below sm) so the name and actions stay usable on phones.
- Calendar month/week grids get a horizontally scrollable wrapper
  with a sane minimum width and smaller cell padding on mobile so the
  7-day grid stays legible instead of being squeezed unreadably thin.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
arnef
2026-08-21 09:16:01 +02:00
co-authored by Copilot
parent b2f39bd1f6
commit 9f8bfba420
9 changed files with 155 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/templates/calendar.templ
+20 -16
View File
@@ -125,15 +125,17 @@ templ MonthView(username string, data MonthViewData) {
<a href="/web/" class="text-indigo-600 hover:underline">dashboard</a> first.
</p>
} else {
<div class="grid grid-cols-7 gap-px bg-gray-200 border border-gray-200 rounded-lg overflow-hidden text-sm mb-6">
for _, wd := range weekdayLabels() {
<div class="bg-gray-50 px-2 py-1.5 font-medium text-gray-500 text-xs text-center">{ wd }</div>
}
for _, week := range data.Weeks {
for _, day := range week {
@monthDayCell(day)
<div class="overflow-x-auto -mx-3 sm:mx-0 px-3 sm:px-0 mb-6">
<div class="grid grid-cols-7 gap-px bg-gray-200 border border-gray-200 rounded-lg overflow-hidden text-sm min-w-[640px] sm:min-w-0">
for _, wd := range weekdayLabels() {
<div class="bg-gray-50 px-2 py-1.5 font-medium text-gray-500 text-xs text-center">{ wd }</div>
}
}
for _, week := range data.Weeks {
for _, day := range week {
@monthDayCell(day)
}
}
</div>
</div>
<div class="bg-white rounded-lg border border-gray-200 divide-y divide-gray-200">
@@ -189,7 +191,7 @@ templ calendarLegendRow(c CalendarSummary) {
}
templ monthDayCell(day MonthDay) {
<div class={ "bg-white min-h-[6rem] p-1.5 flex flex-col gap-1", templ.KV("bg-gray-50 text-gray-400", !day.InMonth) }>
<div class={ "bg-white min-h-[4.5rem] sm:min-h-[6rem] p-1 sm:p-1.5 flex flex-col gap-1", templ.KV("bg-gray-50 text-gray-400", !day.InMonth) }>
<div class="flex items-center justify-between">
<a
href={ templ.URL("/web/calendar/new?date=" + day.Date) }
@@ -243,13 +245,15 @@ templ WeekView(username string, data WeekViewData) {
<a href="/web/" class="text-indigo-600 hover:underline">dashboard</a> first.
</p>
} else {
<div class="grid grid-cols-7 gap-px bg-gray-200 border border-gray-200 rounded-lg overflow-hidden text-sm mb-6">
for _, d := range data.Days {
@weekDayHeaderCell(d)
}
for _, d := range data.Days {
@weekDayCell(d)
}
<div class="overflow-x-auto -mx-3 sm:mx-0 px-3 sm:px-0 mb-6">
<div class="grid grid-cols-7 gap-px bg-gray-200 border border-gray-200 rounded-lg overflow-hidden text-sm min-w-[640px] sm:min-w-0">
for _, d := range data.Days {
@weekDayHeaderCell(d)
}
for _, d := range data.Days {
@weekDayCell(d)
}
</div>
</div>
<div class="bg-white rounded-lg border border-gray-200 divide-y divide-gray-200">