From 752cee2d06561d8456c1c4e8e9a94959580ca0f6 Mon Sep 17 00:00:00 2001
From: Kylian Schmidt <kylian.schmidt@kit.edu>
Date: Tue, 29 Jul 2025 16:13:09 +0200
Subject: [PATCH] Fix metadata lists being shown in a single line

---
 assets/css/metadata-section.css | 73 ++++++++++++++++++++++++++++++++-
 templates/gallery.html          | 27 ++++++++++--
 2 files changed, 95 insertions(+), 5 deletions(-)

diff --git a/assets/css/metadata-section.css b/assets/css/metadata-section.css
index 06930db..7988467 100644
--- a/assets/css/metadata-section.css
+++ b/assets/css/metadata-section.css
@@ -226,10 +226,81 @@
     font-family: 'Times New Roman', serif;
 }
 
-/* Simple list items - no special formatting */
+/* Simple list items - proper list formatting */
 .metadata-list {
     color: var(--text-color);
     line-height: 1.4;
+    margin: 0;
+    padding-left: 1.2rem;
+    list-style-type: disc; /* Add bullet points */
+}
+
+.metadata-list li {
+    margin: 0.25rem 0;
+    padding: 0;
+    color: var(--text-color);
+}
+
+/* YAML-style formatting for metadata */
+.metadata-yaml-list {
+  margin: 0.5rem 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  background: var(--card-bg);
+  padding: 0.8rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+}
+
+.yaml-list-item {
+  color: var(--text-color);
+  margin: 0.25rem 0;
+  padding-left: 0;
+  text-indent: 0;
+}
+
+.metadata-yaml-object {
+  margin: 0.5rem 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  background: var(--card-bg);
+  padding: 0.8rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+}
+
+.yaml-object-item {
+  margin: 0.5rem 0;
+}
+
+.yaml-key {
+  color: var(--link-color);
+  font-weight: 600;
+}
+
+.yaml-value {
+  color: var(--text-color);
+  margin-left: 0.5rem;
+}
+
+.yaml-nested-list {
+  margin: 0.25rem 0 0 1.5rem;
+  border-left: 2px solid var(--border-color);
+  padding-left: 0.8rem;
+}
+
+.yaml-nested-item {
+  color: var(--text-color);
+  margin: 0.2rem 0;
+  padding-left: 0;
+}
+
+.yaml-nested-object {
+  margin: 0.25rem 0 0 1.5rem;
+  border-left: 2px solid var(--border-color);
+  padding-left: 0.8rem;
 }
 
 /* Remove the blue box styling for tags */
diff --git a/templates/gallery.html b/templates/gallery.html
index ba14396..35c7ea9 100644
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -82,12 +82,31 @@
                 <button class="metadata-expand" onclick="expandText(this)">Show more</button>
                 <span class="metadata-full-text" style="display: none;">{{ value }}</span>
               {% elif value is iterable and value is not string and value is not mapping %}
-                <span class="metadata-list">{{ value|join(', ') }}</span>
+                <div class="metadata-yaml-list">
+                  {% for item in value %}
+                    <div class="yaml-list-item">- {{ item }}</div>
+                  {% endfor %}
+                </div>
               {% elif value is mapping %}
-                <div class="metadata-nested">
+                <div class="metadata-yaml-object">
                   {% for subkey, subvalue in value.items() %}
-                    <div class="metadata-nested-item">
-                      <strong>{{ subkey }}:</strong> {{ subvalue }}
+                    <div class="yaml-object-item">
+                      <span class="yaml-key">{{ subkey }}:</span>
+                      {% if subvalue is iterable and subvalue is not string and subvalue is not mapping %}
+                        <div class="yaml-nested-list">
+                          {% for nested_item in subvalue %}
+                            <div class="yaml-nested-item">- {{ nested_item }}</div>
+                          {% endfor %}
+                        </div>
+                      {% elif subvalue is mapping %}
+                        <div class="yaml-nested-object">
+                          {% for nested_key, nested_value in subvalue.items() %}
+                            <div class="yaml-nested-item">{{ nested_key }}: {{ nested_value }}</div>
+                          {% endfor %}
+                        </div>
+                      {% else %}
+                        <span class="yaml-value"> {{ subvalue }}</span>
+                      {% endif %}
                     </div>
                   {% endfor %}
                 </div>