diff --git a/css/style.css b/css/style.css
index 1d085e4..0474dad 100644
--- a/css/style.css
+++ b/css/style.css
@@ -297,7 +297,7 @@ body > hr {
camp-feature-short-header {
display: grid;
grid-template-rows: 1fr min-content;
- grid-template-columns: 3em 1fr;
+ grid-template-columns: 3em 1fr max-content;
gap: 0.5ex 0.5em;
vertical-align: center;
}
@@ -309,13 +309,26 @@ camp-feature-short-header .feature-legend {
}
camp-feature-short-header h2 {
+ grid-column: 2 / 4;
margin: 0;
padding: 0;
font-size: 1em;
font-weight: bold;
}
+camp-feature-short-header .feature-generic-name {
+ grid-column: 2;
+ margin: 0;
+ padding: 0;
+ font-size: 0.6em;
+ opacity: 0.75;
+ white-space: nowrap;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+}
+
camp-feature-short-header .feature-location {
+ grid-column: 3;
margin: 0;
padding: 0;
font-size: 0.6em;
diff --git a/js/components/feature-short-header.js b/js/components/feature-short-header.js
index 55339fe..c15ffdc 100644
--- a/js/components/feature-short-header.js
+++ b/js/components/feature-short-header.js
@@ -5,6 +5,7 @@ const TEMPLATE = document.createElement("template")
TEMPLATE.innerHTML = `