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>

internal/web/templates/dashboard.templ

@@ -139,8 +139,8 @@ templ ResourceList(resources []ResourceCard) {
 
 templ ResourceCardView(r ResourceCard) {
 	<div id={ "resource-" + r.Kind + "-" + r.Name } class="bg-white rounded-lg border border-gray-200 p-5">
-		<div class="flex items-center justify-between mb-3">
-			<h2 class="font-medium flex items-center gap-2">
+		<div class="flex items-center justify-between mb-3 gap-2 flex-wrap">
+			<h2 class="font-medium flex items-center gap-2 flex-wrap">
 				if r.Kind == "calendar" || r.Kind == "ics" {
 					<form
 						hx-post={ colorEndpoint(r) }
@@ -188,7 +188,7 @@ templ ResourceCardView(r ResourceCard) {
 		if !r.Virtual && r.Kind != "ics" {
 			<ul class="divide-y divide-gray-100 mb-4">
 				for _, sh := range r.Shares {
-					<li class="py-2 flex items-center justify-between text-sm">
+					<li class="py-2 flex items-center justify-between gap-2 flex-wrap text-sm">
 						<span>{ sh.SharedWith }</span>
 						<span class="flex items-center gap-3">
 							<span class="text-xs uppercase tracking-wide text-gray-500">{ sh.Permission }</span>