From b2dc3aa6f088374c632d6f8320a866fc5e18c69c Mon Sep 17 00:00:00 2001
From: "tomtom.bot" <321199632+tomtom-bot7@users.noreply.github.com>
Date: Fri, 4 Sep 2026 09:25:41 +0000
Subject: [PATCH] fix(ui): shorten list difficulty to E/M/H

Use single-letter labels in the problem list so titles get more horizontal space; keep full Easy/Medium/Hard on hover via title.
---
 src/renderer/src/components/HomeView.svelte | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/HomeView.svelte b/src/renderer/src/components/HomeView.svelte
index a570be1..54b3c24 100644
--- a/src/renderer/src/components/HomeView.svelte
+++ b/src/renderer/src/components/HomeView.svelte
@@ -152,6 +152,19 @@
     }
   }
 
+  function getDifficultyShortLabel(difficulty: string): string {
+    switch (difficulty) {
+      case 'Easy':
+        return 'E'
+      case 'Medium':
+        return 'M'
+      case 'Hard':
+        return 'H'
+      default:
+        return difficulty
+    }
+  }
+
   function clearFilters(): void {
     searchText = ''
     selectedDifficulties = []
@@ -546,11 +559,13 @@
           </svg>
         </button>
         <div
-          class="w-12 shrink-0 text-right text-xs font-medium {getDifficultyColor(
+          class="w-4 shrink-0 text-right text-xs font-medium {getDifficultyColor(
             problem.difficulty
           )}"
+          title={problem.difficulty}
+          aria-label={problem.difficulty}
         >
-          {problem.difficulty}
+          {getDifficultyShortLabel(problem.difficulty)}
         </div>
       </div>
     {:else}