From 4aab1fe1f87a2d402669e8080741704b407f7cea Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sat, 11 Apr 2026 00:06:03 +0200
Subject: [PATCH] feat(260411-022): compact global items catalog header

- Replace arrow entity + "Dashboard" back link with ArrowLeft icon + "Discover"
- Consolidate title and search into a single flex row (wraps on mobile)
- Reduce outer padding from py-6 to py-4
- Remove subtitle paragraph and separate mb-6/mb-8 section margins
---
 src/client/routes/global-items/index.tsx | 25 +++++++++++-------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/client/routes/global-items/index.tsx b/src/client/routes/global-items/index.tsx
index eeb3c59..8934772 100644
--- a/src/client/routes/global-items/index.tsx
+++ b/src/client/routes/global-items/index.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { ArrowLeft } from "lucide-react";
 import { useEffect, useState } from "react";
 import { GlobalItemCard } from "../../components/GlobalItemCard";
 import { useGlobalItems } from "../../hooks/useGlobalItems";
@@ -23,28 +24,24 @@ function GlobalItemsCatalog() {
 	);
 
 	return (
-		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			<div className="mb-6">
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+			{/* Back link */}
+			<div className="mb-3">
 				<Link
 					to="/"
-					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+					className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors"
 				>
-					&larr; Dashboard
+					<ArrowLeft className="w-3.5 h-3.5" />
+					Discover
 				</Link>
 			</div>
 
-			<div className="mb-8">
-				<h1 className="text-2xl font-bold text-gray-900 mb-1">
+			{/* Title + search row */}
+			<div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+				<h1 className="text-lg font-semibold text-gray-900">
 					Global Gear Catalog
 				</h1>
-				<p className="text-sm text-gray-500">
-					Browse and discover gear from the shared catalog
-				</p>
-			</div>
-
-			{/* Search */}
-			<div className="mb-8">
-				<div className="relative max-w-md">
+				<div className="relative w-full sm:w-auto sm:max-w-xs">
 					<svg
 						className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
 						fill="none"