Improve tag handling

web/src/components/search/DocumentDisplay.tsx

@@ -110,6 +110,9 @@ export function DocumentMetadataBlock({
 }: {
   document: DanswerDocument;
 }) {
+  // don't display super long tags, as they are ugly
+  const MAXIMUM_TAG_LENGTH = 40;
+
   return (
     <div className="flex flex-wrap gap-1">
       {document.updated_at && (
@@ -120,11 +123,19 @@ export function DocumentMetadataBlock({
       {Object.entries(document.metadata).length > 0 && (
         <>
           <div className="pl-1 border-l border-border" />
-          {Object.entries(document.metadata).map(([key, value]) => {
-            return (
-              <MetadataBadge key={key} icon={FiTag} value={`${key}=${value}`} />
-            );
-          })}
+          {Object.entries(document.metadata)
+            .filter(
+              ([key, value]) => (key + value).length <= MAXIMUM_TAG_LENGTH
+            )
+            .map(([key, value]) => {
+              return (
+                <MetadataBadge
+                  key={key}
+                  icon={FiTag}
+                  value={`${key}=${value}`}
+                />
+              );
+            })}
         </>
       )}
     </div>