From 79cd9bc44d861544069b21dda57e26b62284c565 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 13 Aug 2025 15:56:31 +0400
Subject: [PATCH] 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.
---
 manifest.json                       |  3 +++
 src/lib/components/TagsListBlock.ts |  1 +
 src/styles/booru-vars.scss          |  3 +++
 src/styles/content/tags-editor.scss | 23 +++++++++++++++++++++++
 4 files changed, 30 insertions(+)
 create mode 100644 src/styles/content/tags-editor.scss

diff --git a/manifest.json b/manifest.json
index f61bc04..0a8c657 100644
--- a/manifest.json
+++ b/manifest.json
@@ -47,6 +47,9 @@
             ],
             "js": [
                 "src/content/tags-editor.ts"
+            ],
+            "css": [
+                "src/styles/content/tags-editor.scss"
             ]
         },
         {
diff --git a/src/lib/components/TagsListBlock.ts b/src/lib/components/TagsListBlock.ts
index 01e9a78..d63edd5 100644
--- a/src/lib/components/TagsListBlock.ts
+++ b/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.
diff --git a/src/styles/booru-vars.scss b/src/styles/booru-vars.scss
index 1db638d..462d9c5 100644
--- a/src/styles/booru-vars.scss
+++ b/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);
diff --git a/src/styles/content/tags-editor.scss b/src/styles/content/tags-editor.scss
new file mode 100644
index 0000000..07a79a9
--- /dev/null
+++ b/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;
+    }
+  }
+}