Reduced the space used by the tag category headline

This is mainly affecting the Derpibooru version of the extension. Tags
list on Derpibooru is using flex with gaps instead of flex with margins
appearing like gaps (what currently Furbooru uses). This change would
likely be applied to the Furbooru as well.

src/lib/components/TagsListBlock.ts

@@ -134,6 +134,7 @@ export class TagsListBlock extends BaseComponent {
       heading.style.display = 'none';
       heading.style.order = `var(${TagsListBlock.#orderCssVariableForGroup(group.id)}, 0)`;
       heading.style.flexBasis = '100%';
+      heading.classList.add('tag-category-headline');
 
       // We're inserting heading to the top just to make sure that heading is always in front of the tags related to
       // this category.

src/styles/booru-vars.scss

@@ -1,6 +1,9 @@
 $background-color: var(--background-color);
 $media-border: var(--media-border);
 $media-box-color: var(--media-box-color);
+$padding-small: var(--padding-small);
+$padding-normal: var(--padding-normal);
+$padding-large: var(--padding-large);
 
 // These variables are defined dynamically based on the category of the tag
 $resolved-tag-background: var(--tag-background);

src/styles/content/tags-editor.scss

@@ -0,0 +1,23 @@
+@use '$styles/booru-vars';
+@use '$styles/environment';
+
+h2.tag-category-headline {
+  // Basic margin top and bottom values gathered from Chrome.
+  $base-margin-top: .83em;
+  $base-margin-bottom: .62em;
+
+  // Tag List element was updated to use flex & gaps. This should be applied to Furbooru later, once updates will be
+  // applied from the base Philomena version.
+  @if environment.$current-site == 'derpibooru' {
+    margin: {
+      top: calc(#{$base-margin-top} - #{booru-vars.$padding-small});
+      bottom: calc(#{$base-margin-bottom} - #{booru-vars.$padding-small});
+    }
+  }
+  @else {
+    margin: {
+      top: $base-margin-top;
+      bottom: $base-margin-bottom;
+    }
+  }
+}