fix: tier header size in exported html for long labels

1 files changed, 10 insertions, 10 deletions

diff --git a/tiers.css b/tiers.css
index c2e9fca..8645269 100644
--- a/tiers.css
+++ b/tiers.css
@@ -15,7 +15,7 @@ body {
 
 .title label {
 	cursor: default;
-    
+
 }
 
 .main-content {
@@ -57,12 +57,13 @@ body {
 span.header {
     justify-content: center;
     color: black;
-    width: 100px; 
-    padding: 0;
+    width: 100px;
+    padding: 0 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    white-space: nowrap;
 }
 
 span.items {
@@ -70,7 +71,7 @@ span.items {
     flex-wrap: wrap;
     justify-content: left;
     flex-grow: 1;
-    height: 100%; 
+    height: 100%;
 }
 
 .tierlist div.row:last-child {
@@ -158,18 +159,18 @@ img:hover {
 	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7);
 	width: 90%;
 	max-width: 800px;
-	max-height: 90vh; 
+	max-height: 90vh;
 	text-align: center;
 	color: #ddd;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	overflow-y: auto;  
+	overflow-y: auto;
 }
 
 #modal-img {
 	max-width: 100%;
-	max-height: 40vh; 
+	max-height: 40vh;
 	object-fit: contain;
 	border-radius: 5px;
 	margin-bottom: 10px;
@@ -193,7 +194,7 @@ img:hover {
 
 #modal-description {
 	height: 25vh;
-	resize: none; 
+	resize: none;
 	text-align: left;
 }
 
@@ -202,7 +203,6 @@ img:hover {
 	display: none !important;
 }
 
-/* ...existing code... */
 
 /* Add these media queries at the end of the file */
 @media screen and (max-width: 768px) {
@@ -285,4 +285,4 @@ img:hover {
     img {
         max-height: 50px;
     }
-}
\ No newline at end of file
+}