diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index 3d6dccb40..76f3d43c5 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -172,8 +172,6 @@ export default {
 	}
 }
 
-$name-height: 1rem;
-
 .folder-name {
 	position: absolute;
 	z-index: 3;
@@ -186,20 +184,20 @@ $name-height: 1rem;
 	opacity: 1;
 	&__icon {
 		height: 40%;
-		margin-top: calc(30% - #{$name-height} / 2); // center name+icon
+		margin-top: 30%; // center name+icon
 		background-size: 40%;
 	}
 	&__name {
 		overflow: hidden;
-		height: $name-height;
+		height: 30%;
 		padding: 0 10px;
 		text-align: center;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		color: var(--color-main-background);
 		text-shadow: 0 0 8px var(--color-main-text);
-		font-size: $name-height;
-		line-height: $name-height;
+		font-size: 1rem;
+		line-height: 1rem;
 	}
 }
 
diff --git a/src/components/FolderTagPreview.vue b/src/components/FolderTagPreview.vue
index faef43304..9bf6baaaa 100644
--- a/src/components/FolderTagPreview.vue
+++ b/src/components/FolderTagPreview.vue
@@ -181,8 +181,6 @@ export default {
 	}
 }
 
-$name-height: 1rem;
-
 .folder-name {
 	position: absolute;
 	z-index: 3;
@@ -195,20 +193,20 @@ $name-height: 1rem;
 	opacity: 1;
 	&__icon {
 		height: 40%;
-		margin-top: calc(30% - #{$name-height} / 2); // center name+icon
+		margin-top: 30%; // center name+icon
 		background-size: 40%;
 	}
 	&__name {
 		overflow: hidden;
-		height: $name-height;
+		height: 30%; // 30% (icon margin-top) + 40% (icon) + 30% (name) = 100%
 		padding: 0 10px;
 		text-align: center;
-		white-space: nowrap;
+		white-space: normal;
 		text-overflow: ellipsis;
 		color: var(--color-main-background);
 		text-shadow: 0 0 8px var(--color-main-text);
-		font-size: $name-height;
-		line-height: $name-height;
+		font-size: 1rem;
+		line-height: 1rem;
 	}
 }