fix: improve tag layout in TripChecklist

frontend/src/pages/TripChecklist.tsx

@@ -241,16 +241,16 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
   const checkedItems = items.filter((item) => item.checked).length;
   const progress = totalItems > 0 ? Math.round((checkedItems / totalItems) * 100) : 0;
 
-  // Progress gradient for header background (always full width)
+  // Progress gradient for header background
   const progressGradient = `
-  linear-gradient(90deg,#facc15 0%, #22c55e 100%),
+  linear-gradient(90deg, #facc15 0%, fuchsia 100%),
-  linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 8%)
+  linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 10%)
 `;
 
   return (
     <div className="py-4 max-w-5xl mx-auto">
       <div
-        className="mb-6 px-4 py-3 pb-6 rounded-xl border hadow shadow-md flex flex-wrap items-center gap-4 relative"
+        className="mb-6 px-4 py-3 pb-6 rounded-xl border shadow shadow-md flex flex-wrap items-center gap-4 relative"
         style={{
           background: progressGradient,
           backgroundBlendMode: "lighten",
@@ -273,69 +273,65 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
           }}
         />
         <div className="flex flex-col flex-1 min-w-[180px]" style={{ position: "relative", zIndex: 2 }}>
-          <div className="flex items-end gap-2">
+          <div className="flex flex-nowrap items-end gap-2">
             <h2 className="text-xl text-gray-900 font-bold m-0">{trip.name}</h2>
             <span className="text-xs text-gray-500 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">
+        </div>
-            {selectedTags.length === 0 ? (
+        {/* Tags kompakt rechts */}
-              <span className="text-gray-400 text-sm">keine</span>
+        <div className="flex flex-wrap gap-2 items-center min-w-[180px]" style={{ position: "relative", zIndex: 2 }}>
-            ) : (
+          {selectedTags.length === 0 ? (
-              selectedTags.map((tag: any) => (
+            <span className="text-gray-400 text-sm">keine</span>
-                <Tag
+          ) : (
-                  key={tag.id}
+            selectedTags.map((tag: any) => (
-                  tag={tag}
+              <Tag
-                  isMarked={markedTags.some((mt: any) => mt.id === tag.id)}
+                key={tag.id}
-                  hoveredTag={hoveredTag}
+                tag={tag}
-                  onToggleMark={handleToggleMark}
+                isMarked={markedTags.some((mt: any) => mt.id === tag.id)}
-                  onRemoveTag={handleRemoveTag}
+                hoveredTag={hoveredTag}
-                  onMouseEnter={setHoveredTag}
+                onToggleMark={handleToggleMark}
-                  onMouseLeave={() => setHoveredTag(null)}
+                onRemoveTag={handleRemoveTag}
-                />
+                onMouseEnter={setHoveredTag}
-              ))
+                onMouseLeave={() => setHoveredTag(null)}
-            )}
+              />
-            {/* "+Tag" link and dropdown */}
+            ))
-            {!addingTag ? (
+          )}
-              <button
+          {/* "+Tag" link and dropdown */}
-                className="text-blue-500 underline text-xs ml-2"
+          {!addingTag ? (
-                onClick={() => {
+            <button
-                  setAddingTag(true);
+              className="text-blue-500 underline text-xs 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) {
                   setTimeout(() => {
+                    setAddingTag(true);
                     inputRef.current?.focus();
                   }, 0);
-                }}
+                } else {
-                type="button"
+                  setAddingTag(false);
-              >
+                }
-                + Tag
+              }}
-              </button>
+              onEscape={() => setAddingTag(false)}
-            ) : (
+              placeholder="Tag suchen..."
-              <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>
-        {/* Fortschritt kompakt rechts */}
-        <div className="flex flex-col items-end min-w-[120px]" style={{ position: "relative", zIndex: 2 }}>
-          <span className="text-xs text-gray-500">{checkedItems} / {totalItems}</span>
-          <span className="text-xs text-gray-500">{progress}%</span>
         </div>
       </div>
       {/* ...restliche Seite... */}