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

@@ -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}`;
 }
 
 /**

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ü",

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;

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");
 		});
 	});