From 68f2d202f07803a32c21ff965ddd3fac4fd4d98d Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Sat, 20 Sep 2025 17:13:33 +0200
Subject: [PATCH] style: compact layout for TripChecklist header

---
 frontend/src/App.tsx                 |   2 +-
 frontend/src/pages/TripChecklist.tsx | 169 ++++++++++++++-------------
 2 files changed, 88 insertions(+), 83 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 346a809..42af6c7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -46,7 +46,7 @@ function Navigation() {
   const isTripDetail = /^\/trips\/[^/]+$/.test(location.pathname);
 
   return (
-    <nav className="mb-8 flex items-center gap-4 bg-white/80 backdrop-blur border-b border-gray-200 px-2 py-2 rounded-xl shadow-sm">
+    <nav className="mb-2 flex items-center gap-4 bg-white/80 backdrop-blur border-b border-gray-200 px-2 py-2 rounded-xl shadow-sm">
       <button
         className="text-2xl font-extrabold text-blue-700 tracking-tight mr-4 select-none hover:underline bg-transparent p-0"
         style={{ background: "none", border: "none" }}
diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index 5bfd96d..b5a34cf 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -241,112 +241,117 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
 
   return (
     <div className="py-4 max-w-5xl mx-auto">
-      {/* Trip-Titel und Zeitraum */}
-      <div className="mb-6 p-6 rounded-xl border-2 border-blue-200 bg-blue-50 shadow flex flex-col gap-2">
-        <h2 className="text-2xl font-bold text-blue-900">{trip.name}</h2>
-        <div className="text-gray-600 text-base">
-          {trip.start_date} – {trip.end_date}
-        </div>
-        <div className="flex flex-wrap gap-2 items-center">
-          <span className="font-semibold">Tags: </span>
-          {selectedTags.length === 0 ? (
-            <span className="text-gray-400">keine</span>
-          ) : (
-            selectedTags.map((tag: any) => {
-              const isMarked = markedTags.some((mt: any) => mt.id === tag.id);
-              return (
-                <span
-                  key={tag.id}
-                  className={
-                    "relative px-2 py-0.5 rounded mr-1 text-sm cursor-pointer transition " +
-                    (isMarked
-                      ? "bg-yellow-200 text-yellow-900 font-bold"
-                      : "bg-blue-100 text-blue-800")
-                  }
-                  onClick={() => handleToggleMark(tag.id)}
-                  onMouseEnter={() => setHoveredTag(tag.id)}
-                  onMouseLeave={() => setHoveredTag(null)}
-                >
-                  #{tag.name}
-                  {hoveredTag === tag.id && (
-                    <button
-                      className="absolute -top-2 -right-2 text-xs text-red-500 bg-white rounded-full px-1 shadow"
-                      onClick={e => {
-                        e.stopPropagation();
-                        handleRemoveTag(tag.id);
-                      }}
-                    >
-                      ×
-                    </button>
-                  )}
-                </span>
-              );
-            })
-          )}
-          {/* "+Tag" link and dropdown */}
-          {!addingTag ? (
-            <button
-              className="text-blue-500 underline text-sm ml-2"
-              onClick={() => {
-                setAddingTag(true);
-                setTimeout(() => {
-                  inputRef.current?.focus();
-                }, 0);
-              }}
-              type="button"
-            >
-              + Tag
-            </button>
-          ) : (
-            <TagAutocompleteInput
-              ref={inputRef}
-              allTags={allTags}
-              selectedTags={selectedTags}
-              onAddTag={(tagId, viaTab) => {
-                handleAddTag(tagId);
-                if (viaTab) {
+      {/* Kompakter Header für Trip-Titel und Zeitraum */}
+      <div className="mb-6 px-4 py-3 rounded-xl border border-blue-200 bg-blue-50 shadow flex flex-wrap items-center gap-4">
+        <div className="flex flex-col flex-1 min-w-[180px]">
+          <div className="flex items-center gap-2">
+            <h2 className="text-xl font-bold text-blue-900 m-0">{trip.name}</h2>
+            <span className="text-xs text-blue-700 bg-blue-100 px-2 py-0.5 rounded font-semibold">
+              {trip.start_date} – {trip.end_date}
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-2 items-center mt-2">
+            <span className="font-semibold text-sm">Tags:</span>
+            {selectedTags.length === 0 ? (
+              <span className="text-gray-400 text-sm">keine</span>
+            ) : (
+              selectedTags.map((tag: any) => {
+                const isMarked = markedTags.some((mt: any) => mt.id === tag.id);
+                return (
+                  <span
+                    key={tag.id}
+                    className={
+                      "relative px-2 py-0.5 rounded mr-1 text-xs cursor-pointer transition " +
+                      (isMarked
+                        ? "bg-yellow-200 text-yellow-900 font-bold"
+                        : "bg-blue-100 text-blue-800")
+                    }
+                    onClick={() => handleToggleMark(tag.id)}
+                    onMouseEnter={() => setHoveredTag(tag.id)}
+                    onMouseLeave={() => setHoveredTag(null)}
+                  >
+                    #{tag.name}
+                    {hoveredTag === tag.id && (
+                      <button
+                        className="absolute -top-2 -right-2 text-xs text-red-500 bg-white rounded-full px-1 shadow"
+                        onClick={e => {
+                          e.stopPropagation();
+                          handleRemoveTag(tag.id);
+                        }}
+                      >
+                        ×
+                      </button>
+                    )}
+                  </span>
+                );
+              })
+            )}
+            {/* "+Tag" link and dropdown */}
+            {!addingTag ? (
+              <button
+                className="text-blue-500 underline text-xs ml-2"
+                onClick={() => {
+                  setAddingTag(true);
                   setTimeout(() => {
-                    setAddingTag(true);
                     inputRef.current?.focus();
                   }, 0);
-                } else {
-                  setAddingTag(false);
-                }
-              }}
-              onEscape={() => setAddingTag(false)}
-              placeholder="Tag suchen..."
-            />
-          )}
+                }}
+                type="button"
+              >
+                + Tag
+              </button>
+            ) : (
+              <TagAutocompleteInput
+                ref={inputRef}
+                allTags={allTags}
+                selectedTags={selectedTags}
+                onAddTag={(tagId, viaTab) => {
+                  handleAddTag(tagId);
+                  if (viaTab) {
+                    setTimeout(() => {
+                      setAddingTag(true);
+                      inputRef.current?.focus();
+                    }, 0);
+                  } else {
+                    setAddingTag(false);
+                  }
+                }}
+                onEscape={() => setAddingTag(false)}
+                placeholder="Tag suchen..."
+              />
+            )}
+          </div>
         </div>
-        {/* Progressbar integriert am unteren Rand */}
-        <div className="mt-6">
-          <div className="flex justify-between items-center mb-1">
-            <span className="font-semibold text-gray-700">Fortschritt</span>
-            <span className="text-sm text-gray-500">{checkedItems} / {totalItems} erledigt</span>
+        {/* Fortschrittsbalken kompakt rechts */}
+        <div className="flex flex-col items-end min-w-[160px]">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="font-semibold text-gray-700 text-sm">Fortschritt</span>
+            <span className="text-xs text-gray-500">{checkedItems} / {totalItems}</span>
           </div>
           <div
-            className="w-full h-5 rounded-full overflow-hidden shadow"
+            className="w-full h-4 rounded-full overflow-hidden shadow"
             style={{
               background: "linear-gradient(90deg, #f59e42 0%, #facc15 50%, #22c55e 100%)",
               position: "relative",
+              minWidth: "120px",
+              maxWidth: "180px",
             }}
           >
             <div
               className="h-full"
               style={{
                 width: `${progress}%`,
-                background: "none", // inherit the gradient from parent
+                background: "none",
                 position: "absolute",
                 left: 0,
                 top: 0,
                 transition: "width 0.3s",
               }}
             />
-            {/* gray overlay for unfilled part */}
             <div
               className="h-full w-full"
               style={{
-                background: "rgba(243,244,246,0.9)", // tailwind gray-200 with opacity
+                background: "rgba(243,244,246,0.9)",
                 position: "absolute",
                 left: 0,
                 top: 0,