fix: fix tags container width

app/assets/javascripts/ui_models/app_state/active_note_state.ts

@@ -5,6 +5,7 @@ import {
 } from '@standardnotes/snjs';
 import {
   action,
+  computed,
   makeObservable,
   observable,
 } from 'mobx';
@@ -15,6 +16,8 @@ export class ActiveNoteState {
   tags: SNTag[] = [];
   tagsContainerPosition? = 0;
   tagsContainerMaxWidth: number | 'auto' = 'auto';
+  tagsContainerCollapsed = true;
+  overflowedTagsCount = 0;
 
   constructor(
     private application: WebApplication,
@@ -25,9 +28,15 @@ export class ActiveNoteState {
       tags: observable,
       tagsContainerPosition: observable,
       tagsContainerMaxWidth: observable,
+      tagsContainerCollapsed: observable,
+      overflowedTagsCount: observable,
+
+      tagsOverflowed: computed,
       
       setTagsContainerPosition: action,
       setTagsContainerMaxWidth: action,
+      setTagsContainerCollapsed: action,
+      setOverflowedTagsCount: action,
       reloadTags: action,
     });
 
@@ -49,6 +58,10 @@ export class ActiveNoteState {
     return this.appState.notes.activeEditor?.note;
   }
 
+  get tagsOverflowed(): boolean {
+    return this.overflowedTagsCount > 0 && this.tagsContainerCollapsed;
+  }
+
   setTagsContainerPosition(position: number): void {
     this.tagsContainerPosition = position;
   }
@@ -57,6 +70,14 @@ export class ActiveNoteState {
     this.tagsContainerMaxWidth = width;
   }
 
+  setTagsContainerCollapsed(collapsed: boolean): void {
+    this.tagsContainerCollapsed = collapsed;
+  }
+
+  setOverflowedTagsCount(count: number): void {
+    this.overflowedTagsCount = count;
+  }
+
   reloadTags(): void {
     const { activeNote } = this;
     if (activeNote) {
@@ -65,14 +86,15 @@ export class ActiveNoteState {
   }
 
   reloadTagsContainerLayout(): void {
-    const editorElementId = 'editor-column';
+    const MARGIN = this.tagsContainerCollapsed ? 68 : 24;
+    const EDITOR_ELEMENT_ID = 'editor-column';
     const { clientWidth } = document.documentElement;
     const editorPosition =
-      document.getElementById(editorElementId)?.getBoundingClientRect()
+      document.getElementById(EDITOR_ELEMENT_ID)?.getBoundingClientRect()
         .left ?? 0;
     this.appState.activeNote.setTagsContainerPosition(editorPosition);
     this.appState.activeNote.setTagsContainerMaxWidth(
-      clientWidth - editorPosition
+      clientWidth - editorPosition - MARGIN
     );
   }