fix: fix tags container max width

standardnotes · Jun 2, 2021 · 9be9ba2 · 9be9ba2
1 parent 30ee2e9
commit 9be9ba2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/app/assets/javascripts/components/NoteTagsContainer.tsx b/app/assets/javascripts/components/NoteTagsContainer.tsx
@@ -23,7 +23,7 @@ const NoteTagsContainer = observer(({ application, appState }: Props) => {
 
   return (
       <div
-        className="bg-default flex flex-wrap pl-1 -ml-1"
+        className="bg-default flex flex-wrap pl-1 -ml-1 -ml-2"
         style={{
           maxWidth: tagsContainerMaxWidth,
         }}

diff --git a/app/assets/javascripts/ui_models/app_state/active_note_state.ts b/app/assets/javascripts/ui_models/app_state/active_note_state.ts
@@ -105,14 +105,10 @@ export class ActiveNoteState {
 
   reloadTagsContainerMaxWidth(): void {
     const EDITOR_ELEMENT_ID = 'editor-column';
-    const defaultFontSize = parseFloat(window.getComputedStyle(
-      document.documentElement
-    ).fontSize);
-    const margins = defaultFontSize * 1.5;
     const editorWidth = document.getElementById(EDITOR_ELEMENT_ID)?.clientWidth;
     if (editorWidth) {
       this.appState.activeNote.setTagsContainerMaxWidth(
-        editorWidth - margins
+        editorWidth
       );
     }
   }

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
@@ -69,6 +69,10 @@
   margin-left: -0.25rem;
 }
 
+.-ml-2 {
+  margin-right: -0.5rem;
+}
+
 .-mr-1 {
   margin-right: -0.25rem;
 }