fix

Author: Lukecsharpwalker

src/app/reader/_components/main-page/posts-list/posts-list.component.html

@@ -5,7 +5,7 @@
     class="shadow-lg bg-white p-4 sm:p-6 sm:px-14 rounded-[32px] sm:rounded-[64px] overflow-x-scroll hide-scrollbar whitespace-nowrap scroll-smooth"
   >
     <div class="inline-flex space-x-4 gap-x-0 md:gap-x-6">
-      @for (tag of tags(); track tag.name) {
+      @for (tag of tags(); track tag.id) {
         <div class="flex flex-col items-center min-w-24 group">
           <div
             [ngStyle]="{ 'background-color': tag.color }"

src/app/reader/_components/main-page/posts-list/posts-list.component.ts

@@ -35,17 +35,17 @@ import { TagsStore } from '../../../../shared/stores/tags.store';
 })
 export class PostsListComponent implements OnInit {
   scroll = viewChild<ElementRef<HTMLElement>>('scrollContainer');
-  scrollProgress: WritableSignal<number> = signal(0);
+
   postStore = inject(PostsStore);
   tagsStore = inject(TagsStore);
 
+  scrollProgress: WritableSignal<number> = signal(0);
   posts = this.postStore.posts;
   tags = this.tagsStore.tags;
-
-  initialScroll = 2;
+  initialTagScrollProgressBarForMobile = 2;
 
   constructor() {
-    this.initializeScrolling();
+    this.initializeScrollingForMobileView();
   }
 
   ngOnInit() {
@@ -68,8 +68,8 @@ export class PostsListComponent implements OnInit {
     setTimeout(() => {}, 0);
   }
 
-  private initializeScrolling(): void {
-    this.scrollProgress.set(this.initialScroll);
+  private initializeScrollingForMobileView(): void {
+    this.scrollProgress.set(this.initialTagScrollProgressBarForMobile);
     afterNextRender(() => {
       this.scroll()?.nativeElement.addEventListener(
         'scroll',

src/styles.scss

@@ -1,4 +1,3 @@
-@use 'tailwindcss/utilities';
 @import "../node_modules/quill/dist/quill.core.css";
 @import "../node_modules/quill/dist/quill.snow.css";
 @import 'highlight.js/styles/atom-one-dark.css';
@@ -81,6 +80,8 @@ h4 {
   @apply bg-gray-300 text-gray-500 cursor-not-allowed;
 }
 
+/* Import TailwindCSS */
+@import 'tailwindcss/utilities';
 
 /* Additional styles for the card component */
 .post-card {