From 583c53371d327df4afe936651be76a1cdd4a9edd Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Tue, 30 Dec 2025 20:03:33 +0100
Subject: [PATCH] style: improve pill layout for mobile

- Wrap lesson label in span for mobile hiding
- Truncate module name with ellipsis if too long
- Hide "Lesson/Lektion" label on mobile, show only "1 / 3"
- Add lessonLabel i18n keys for EN/DE
---
 src/helpers/renderer.js     |  3 ++-
 src/i18n.js                 |  2 ++
 src/main.css                | 12 ++++++++++++
 tests/unit/renderer.test.js |  4 ++--
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/helpers/renderer.js b/src/helpers/renderer.js
index abcc779..c679c78 100644
--- a/src/helpers/renderer.js
+++ b/src/helpers/renderer.js
@@ -163,7 +163,8 @@ export function renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl
  * @param {number} total - The total number of levels
  */
 export function renderLevelIndicator(element, current, total) {
-	element.textContent = t("levelIndicator", { current, total });
+	const label = t("lessonLabel");
+	element.innerHTML = `<span class="level-label">${label}</span> ${current} / ${total}`;
 }
 
 /**
diff --git a/src/i18n.js b/src/i18n.js
index fad4cae..b6adfe2 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -31,6 +31,7 @@ const translations = {
 		previous: "Previous",
 		next: "Next",
 		levelIndicator: "Lesson {current} of {total}",
+		lessonLabel: "Lesson",
 
 		// Sidebar
 		menu: "Menu",
@@ -119,6 +120,7 @@ const translations = {
 		previous: "Zurück",
 		next: "Weiter",
 		levelIndicator: "Lektion {current} von {total}",
+		lessonLabel: "Lektion",
 
 		// Sidebar
 		menu: "Menü",
diff --git a/src/main.css b/src/main.css
index 6e78589..1d797af 100644
--- a/src/main.css
+++ b/src/main.css
@@ -243,6 +243,10 @@ code, kbd {
 .module-name {
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 150px;
 }
 
 .module-pill .level-indicator {
@@ -1079,6 +1083,14 @@ input:checked + .toggle-slider::before {
 		padding: var(--spacing-sm);
 	}
 
+	.module-name {
+		max-width: 100px;
+	}
+
+	.level-label {
+		display: none;
+	}
+
 	.btn {
 		padding: var(--spacing-xs) var(--spacing-sm);
 		font-size: 0.85rem;
diff --git a/tests/unit/renderer.test.js b/tests/unit/renderer.test.js
index c839879..cd8cd17 100644
--- a/tests/unit/renderer.test.js
+++ b/tests/unit/renderer.test.js
@@ -129,10 +129,10 @@ describe("Renderer Module", () => {
 			const element = document.getElementById("level-indicator");
 
 			renderLevelIndicator(element, 3, 10);
-			expect(element.textContent).toBe("Lesson 3 of 10");
+			expect(element.textContent).toBe("Lesson 3 / 10");
 
 			renderLevelIndicator(element, 1, 5);
-			expect(element.textContent).toBe("Lesson 1 of 5");
+			expect(element.textContent).toBe("Lesson 1 / 5");
 		});
 	});