styles: fix spacing between title and tag input

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -17,6 +17,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     autocompleteTagHintVisible,
     autocompleteTagResults,
     tags,
+    tagsContainerMaxWidth,
   } = appState.noteTags;
 
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -94,12 +95,13 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
   return (
     <form
       onSubmit={onFormSubmit}
-      className={`${tags.length > 0 ? 'mt-2' : 'mt-1'}`}
+      className={`${tags.length > 0 ? 'mt-2' : ''}`}
     >
       <Disclosure open={dropdownVisible} onChange={showDropdown}>
         <input
           ref={inputRef}
-          className="w-80 bg-default text-xs color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom"
+          className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-default text-xs
+            color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`}
           value={autocompleteSearchQuery}
           onChange={onSearchQueryChange}
           type="text"
@@ -111,8 +113,8 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
         {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
           <DisclosurePanel
             ref={dropdownRef}
-            className="sn-dropdown w-80 flex flex-col py-2 absolute"
-            style={{ maxHeight: dropdownMaxHeight }}
+            className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} sn-dropdown flex flex-col py-2 absolute`}
+            style={{ maxHeight: dropdownMaxHeight, maxWidth: tagsContainerMaxWidth }}
           >
             <div className="overflow-y-scroll">
               {autocompleteTagResults.map((tagResult) => (

app/assets/javascripts/components/NoteTagsContainer.tsx

@@ -21,7 +21,7 @@ const NoteTagsContainer = observer(({ appState }: Props) => {
 
   return (
       <div
-        className="bg-default flex flex-wrap min-w-80 -mt-1 mr-2"
+        className="bg-default flex flex-wrap min-w-80 -mt-1 -mr-2"
         style={{
           maxWidth: tagsContainerMaxWidth,
         }}

app/assets/stylesheets/_sn.scss

@@ -65,6 +65,10 @@
   margin-right: 0.25rem;
 }
 
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
 .-mt-1 {
   margin-top: -0.25rem;
 }
@@ -73,6 +77,10 @@
   margin-right: -0.25rem;
 }
 
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -298,6 +306,10 @@
   width: 20rem;
 }
 
+.w-70 {
+  width: 17.5rem;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.
@@ -339,7 +351,7 @@
 
 .sn-dropdown {
   @extend .bg-default;
-  @extend .min-w-80;
+  // @extend .min-w-80;
   @extend .rounded;
   @extend .box-shadow;