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

@@ -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`
 

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>
       }

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: [],