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/layout.templ
+6 -6
View File
@@ -12,8 +12,8 @@ templ Layout(title string, username string) {
</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">
<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 username != "" {
<a href="/web/files/" class="text-sm text-gray-600 hover:text-indigo-600">Files</a>
@@ -22,14 +22,14 @@ templ Layout(title string, username string) {
}
</div>
if username != "" {
<div class="flex items-center gap-4 text-sm text-gray-600">
<a href="/web/account" class="hover:text-indigo-600">{ username }</a>
<a href="/web/logout" class="text-red-600 hover:underline">Logout</a>
<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]">{ username }</a>
<a href="/web/logout" class="text-red-600 hover:underline shrink-0">Logout</a>
</div>
}
</div>
</nav>
<main class="max-w-4xl mx-auto px-4 py-8">
<main class="max-w-4xl mx-auto px-3 sm:px-4 py-6 sm:py-8">
{ children... }
</main>
</body>