From cb775af7f1631ac95436db65f8730baceb296e48 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 2 Aug 2026 09:51:39 +0200
Subject: [PATCH] Task/improve style of read-only tags in tags selector
 component (#7504)

* Improve style of read-only tags

* Add Storybook story

* Update changelog
---
 CHANGELOG.md                                           |  1 +
 .../src/lib/tags-selector/tags-selector.component.html | 10 +++++-----
 .../tags-selector/tags-selector.component.stories.ts   |  8 ++++++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 115d25a92..9fe7f1a8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the style of the read-only tags in the tags selector component
 - Improved the language localization for Chinese (`zh`)
 - Upgraded `nestjs` from version `11.1.27` to `11.1.28`
 
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.html b/libs/ui/src/lib/tags-selector/tags-selector.component.html
index bd56e9318..9bede09a7 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.html
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.html
@@ -1,20 +1,20 @@
 <div class="row">
   <div class="col">
     @if (readonly) {
-      <div class="h5" i18n>Tags</div>
+      <div class="h5 mb-0" i18n>Tags</div>
       @if (
         tagsSelected().length > 0 || (tagsReadOnly && tagsReadOnly.length > 0)
       ) {
-        <mat-chip-listbox>
+        <mat-chip-set>
           @if (tagsReadOnly) {
             @for (tag of tagsReadOnly; track tag.id) {
-              <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>
+              <mat-chip>{{ tag.name }}</mat-chip>
             }
           }
           @for (tag of tagsSelected(); track tag.id) {
-            <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>
+            <mat-chip>{{ tag.name }}</mat-chip>
           }
-        </mat-chip-listbox>
+        </mat-chip-set>
       } @else {
         <div>–</div>
       }
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
index 48aeaffe3..e8bdd1873 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
@@ -87,6 +87,14 @@ export const Readonly: Story = {
   }
 };
 
+export const ReadonlyWithoutValue: Story = {
+  args: {
+    readonly: true,
+    tags: [],
+    tagsAvailable: OPTIONS
+  }
+};
+
 export const WithoutValue: Story = {
   args: {
     tags: [],