From dac1c57c982dfb0227a90abee6dbaf2537234f17 Mon Sep 17 00:00:00 2001
From: Chi Cong Tran <chi-cong.tran@polizei.niedersachsen.de>
Date: Thu, 13 Nov 2025 12:03:51 +0100
Subject: [PATCH 1/3] =?UTF-8?q?align=20Vorgang=20item=20on=20list=20page?=
 =?UTF-8?q?=20and=20remove=20=C2=B4Vorgang=C2=B4=20description?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/(angemeldet)/list/+page.svelte | 40 +++++++++++------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/routes/(angemeldet)/list/+page.svelte b/src/routes/(angemeldet)/list/+page.svelte
index c7fedbf..59bbe55 100644
--- a/src/routes/(angemeldet)/list/+page.svelte
+++ b/src/routes/(angemeldet)/list/+page.svelte
@@ -101,28 +101,25 @@
 				{#each vorgangList as vorgangItem}
 					<li data-testid="test-list-item">
 						<a
-							href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
-							class="flex justify-between gap-x-6 py-5"
+						href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
+						class="flex flex-col items-center justify-center gap-2 py-4 px-4 rounded-lg hover:bg-gray-50 transition text-center"
 						>
-							<div class="flex gap-x-4">
-								<Folder />
-								<div class="min-w-0 flex-auto">
-									<span class="text-sm font-semibold leading-6 text-gray-900"
-										>{vorgangItem.vorgangName}</span
-									>
-									<button
-										style="padding: 2px"
-										id="del__{vorgangItem.vorgangToken}"
-										on:click|preventDefault={delete_item}
-										aria-label="Vorgang {vorgangItem.name} löschen"
-									>
-										<Trash />
-									</button>
-								</div>
-							</div>
-							<div class="hidden sm:flex sm:flex-col sm:items-end">
-								<p class="text-sm leading-6 text-gray-900">Vorgang</p>
-							</div>
+						<div class="flex items-center justify-center gap-3">
+							<Folder class="w-6 h-6 text-gray-600" />
+
+							<span class="text-sm font-semibold leading-6 text-gray-900">
+							{vorgangItem.vorgangName}
+							</span>
+
+							<button
+							id="del__{vorgangItem.vorgangToken}"
+							on:click|preventDefault={delete_item}
+							aria-label="Vorgang {vorgangItem.name} löschen"
+							class="p-1.5 rounded-full text-gray-500 hover:text-red-600 hover:bg-red-50 transition"
+							>
+							<Trash class="w-4 h-4" />
+							</button>
+						</div>
 						</a>
 					</li>
 				{/each}
@@ -198,3 +195,4 @@
 		min-width: 24rem;
 	}
 </style>
+

From ac79f101539964f75b5fb111575e95561a6394a2 Mon Sep 17 00:00:00 2001
From: Chi Cong Tran <chi-cong.tran@polizei.niedersachsen.de>
Date: Thu, 13 Nov 2025 12:45:07 +0100
Subject: [PATCH 2/3] =?UTF-8?q?adjust=20=C2=B4edit=C2=B4=20and=20=C2=B4del?=
 =?UTF-8?q?ete=C2=B4=20button=20on=20Vorgang=20page=20with=20crimesList?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/NameItemEditor.svelte      | 71 +++++++++-----
 .../(token-based)/list/[vorgang]/+page.svelte | 96 ++++++++++---------
 2 files changed, 100 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/NameItemEditor.svelte b/src/lib/components/NameItemEditor.svelte
index 71164c0..8b48dff 100644
--- a/src/lib/components/NameItemEditor.svelte
+++ b/src/lib/components/NameItemEditor.svelte
@@ -58,26 +58,53 @@
 	}
 </script>
 
-<div data-testid="test-nameItemEditor">
-	{#if isEditing}
-		<input
-			data-testid="test-input"
-			bind:this={inputRef}
-			bind:value={localName}
-			onkeydown={handleKeydown}
-		/>
-		<button
-			data-testid="commit-button"
-			disabled={!!error || localName === currentName}
-			onclick={commitEdit}><Check /></button
-		>
-		<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
-	{:else}
-		<span>{localName}</span>
-		<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
-		<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button>
-	{/if}
-	{#if error}
-		<p class="text-red-500">{error}</p>
-	{/if}
+<div data-testid="test-nameItemEditor" class="flex flex-col gap-1">
+  {#if isEditing}
+    <div class="flex items-center gap-1">
+      <input
+        data-testid="test-input"
+        bind:this={inputRef}
+        bind:value={localName}
+        onkeydown={handleKeydown}
+        class="flex-1 border border-gray-300 rounded px-1.5 py-0.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+      />
+      <button
+        data-testid="commit-button"
+        disabled={!!error || localName === currentName}
+        onclick={commitEdit}
+        class="text-gray-500 hover:text-green-600 transition disabled:opacity-40"
+      >
+        <Check class="w-4 h-4" />
+      </button>
+      <button
+        data-testid="cancel-button"
+        onclick={cancelEdit}
+        class="text-gray-500 hover:text-red-600 transition"
+      >
+        <X class="w-4 h-4" />
+      </button>
+    </div>
+  {:else}
+    <div class="flex items-center gap-1">
+      <span class="text-sm font-medium text-gray-900 truncate">{localName}</span>
+      <button
+        data-testid="edit-button"
+        onclick={startEdit}
+        class="text-gray-500 hover:text-blue-600 transition"
+      >
+        <Edit class="w-4 h-4" />
+      </button>
+      <button
+        data-testid="delete-button"
+        onclick={handleDeleteClick}
+        class="text-gray-500 hover:text-red-600 transition"
+      >
+        <Trash class="w-4 h-4" />
+      </button>
+    </div>
+  {/if}
+
+  {#if error}
+    <p class="text-xs text-red-500 mt-1">{error}</p>
+  {/if}
 </div>
diff --git a/src/routes/(token-based)/list/[vorgang]/+page.svelte b/src/routes/(token-based)/list/[vorgang]/+page.svelte
index 84adfba..32c3aa3 100644
--- a/src/routes/(token-based)/list/[vorgang]/+page.svelte
+++ b/src/routes/(token-based)/list/[vorgang]/+page.svelte
@@ -263,51 +263,57 @@ Mit freundlichen Grüßen,
 					<EmptyList></EmptyList>
 				{:else}
 					{#each crimesList as item (item.name)}
-						<li data-testid="test-list-item">
-							<div class=" flex gap-x-4">
-								<a
-									data-testid="crime-link"
-									href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
-									class=" flex justify-between gap-x-6 py-5"
-									aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
-									title={item.name}
-								>
-									<Cube />
-								</a>
-								<div class="min-w-0 flex-auto">
-									{#if admin}
-										<NameItemEditor
-											list={crimesList}
-											currentName={item.name}
-											onSave={handleSave}
-											onDelete={handleDelete}
-										></NameItemEditor>
-									{:else}
-										<p
-											data-testid="test-nameItem-p"
-											class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-										>
-											{item.name}
-										</p>
-									{/if}
-									{#if item.size}
-										<p class="mt-1 truncate text-xs leading-5 text-gray-500">
-											{shortenFileSize(item.size)}
-										</p>
-									{/if}
-								</div>
-							</div>
-							<div class="hidden sm:flex sm:flex-col sm:items-end">
-								<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
-								{#if item.lastModified}
-									<p class="mt-1 text-xs leading-5 text-gray-500">
-										Zuletzt geändert <time datetime="2023-01-23T13:23Z"
-											>{timeElapsed(new Date(item.lastModified))}</time
-										>
-									</p>
-								{/if}
-							</div>
-						</li>
+					<li
+					data-testid="test-list-item"
+					class="flex items-center justify-between gap-6 py-4 px-2 hover:bg-gray-50 rounded-lg transition"
+					>
+					<div class="flex items-center gap-4 flex-1">
+						<a
+						data-testid="crime-link"
+						href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
+						class="flex items-center justify-center w-8 h-8 text-gray-600 hover:text-blue-600 transition"
+						aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
+						title={item.name}
+						>
+						<Cube class="w-5 h-5" />
+						</a>
+
+						<div class="flex flex-col flex-1 min-w-0">
+						{#if admin}
+							<NameItemEditor
+							list={crimesList}
+							currentName={item.name}
+							onSave={handleSave}
+							onDelete={handleDelete}
+							/>
+						{:else}
+							<p
+							data-testid="test-nameItem-p"
+							class="text-sm font-semibold leading-6 text-gray-900 truncate"
+							>
+							{item.name}
+							</p>
+						{/if}
+
+						<!-- size left, last modified right -->
+						<div class="flex items-center justify-between mt-1 text-xs leading-5 text-gray-500">
+							{#if item.size}
+							<span>{shortenFileSize(item.size)}</span>
+							{:else}
+							<span></span>
+							{/if}
+							{#if item.lastModified}
+							<span>
+								Zuletzt geändert
+								<time datetime={item.lastModified}>
+								{timeElapsed(new Date(item.lastModified))}
+								</time>
+							</span>
+							{/if}
+						</div>
+						</div>
+					</div>
+					</li>
 					{/each}
 				{/if}
 			</ul>

From 320f6d6c8b6dffaaaa5e85edbeea236e29cce007 Mon Sep 17 00:00:00 2001
From: Chi Cong Tran <chi-cong.tran@polizei.niedersachsen.de>
Date: Thu, 13 Nov 2025 12:46:58 +0100
Subject: [PATCH 3/3] remove Vorgang label

---
 src/routes/(token-based)/list/[vorgang]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(token-based)/list/[vorgang]/+page.svelte b/src/routes/(token-based)/list/[vorgang]/+page.svelte
index 32c3aa3..a3762a7 100644
--- a/src/routes/(token-based)/list/[vorgang]/+page.svelte
+++ b/src/routes/(token-based)/list/[vorgang]/+page.svelte
@@ -248,7 +248,7 @@ Mit freundlichen Grüßen,
 {#if data.vorgang && crimesList}
 	<div class="-z-10 bg-white">
 		<div class="flex flex-col items-center justify-center w-full">
-			<h1 class="text-xl">Vorgang {vorgangName}</h1>
+			<h1 class="text-xl">{vorgangName}</h1>
 
 			{#if admin}
 				Zugangs-PIN: {vorgangPIN}