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

- 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:
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
+5 -5
View File
@@ -42,7 +42,7 @@ func Layout(title string, username string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " · nidus</title><link rel=\"stylesheet\" href=\"/web/static/app.css\"><script src=\"/web/static/htmx.min.js\" defer></script></head><body class=\"h-full text-gray-900\"><nav class=\"bg-white border-b border-gray-200\"><div class=\"max-w-4xl mx-auto px-4 py-3 flex items-center justify-between\"><div class=\"flex items-center gap-6\"><a href=\"/web/\" class=\"font-semibold text-lg tracking-tight\">nidus</a> ")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " · nidus</title><link rel=\"stylesheet\" href=\"/web/static/app.css\"><script src=\"/web/static/htmx.min.js\" defer></script></head><body class=\"h-full text-gray-900\"><nav class=\"bg-white border-b border-gray-200\"><div class=\"max-w-4xl mx-auto px-3 sm:px-4 py-3 flex flex-wrap items-center justify-between gap-x-4 gap-y-2\"><div class=\"flex items-center gap-3 sm:gap-6 flex-wrap\"><a href=\"/web/\" class=\"font-semibold text-lg tracking-tight\">nidus</a> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -57,25 +57,25 @@ func Layout(title string, username string) templ.Component {
return templ_7745c5c3_Err
}
if username != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"flex items-center gap-4 text-sm text-gray-600\"><a href=\"/web/account\" class=\"hover:text-indigo-600\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"flex items-center gap-3 sm:gap-4 text-sm text-gray-600\"><a href=\"/web/account\" class=\"hover:text-indigo-600 truncate max-w-[8rem]\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(username)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/layout.templ`, Line: 26, Col: 70}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/layout.templ`, Line: 26, Col: 92}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</a> <a href=\"/web/logout\" class=\"text-red-600 hover:underline\">Logout</a></div>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</a> <a href=\"/web/logout\" class=\"text-red-600 hover:underline shrink-0\">Logout</a></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></nav><main class=\"max-w-4xl mx-auto px-4 py-8\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></nav><main class=\"max-w-4xl mx-auto px-3 sm:px-4 py-6 sm:py-8\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}