From 4827b111680c49d2fe8aa8b44a9a55840d45cb8a Mon Sep 17 00:00:00 2001
From: newtextdoc1111 <newtextdoc1111@gmail.com>
Date: Fri, 9 May 2025 01:22:32 +0900
Subject: [PATCH] fix: Adjust related tags UI positioning and styling for
 better responsiveness

---
 web/css/autocomplete-plus.css |  6 ++++--
 web/js/related-tags.js        | 32 ++++++++++----------------------
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/web/css/autocomplete-plus.css b/web/css/autocomplete-plus.css
index 33b2cad..30852c8 100644
--- a/web/css/autocomplete-plus.css
+++ b/web/css/autocomplete-plus.css
@@ -124,7 +124,6 @@ body.dark-theme {
   width: fit-content;
   background-color: var(--comfy-input-bg);
   color: var(--input-text);
-  overflow-y: auto;
 }
 
 #related-tags-header {
@@ -146,11 +145,14 @@ body.dark-theme {
   box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
   grid-auto-rows: auto;
   grid-template-columns: max-content 1fr auto auto;
+  overflow-y: auto;
 }
 
 .related-tag-item {
-  display: contents;
+  display: grid;
   cursor: pointer;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
 }
 
 .related-tag-item[data-tag-category="general"] {
diff --git a/web/js/related-tags.js b/web/js/related-tags.js
index a32d3de..8e03a7a 100644
--- a/web/js/related-tags.js
+++ b/web/js/related-tags.js
@@ -414,10 +414,6 @@ class RelatedTagsUI {
      * Updates the content of the related tags panel with the provided tags.
      */
     #updateContent() {
-        this.root.style.left = 0;
-        this.root.style.top = 0;
-        this.root.style.maxWidth = `${window.innerWidth / 2}px`;
-        this.root.style.maxHeight = `${window.innerHeight / 2}px`;
         this.tagsContainer.innerHTML = '';
 
         // Update header with current tag
@@ -512,41 +508,33 @@ class RelatedTagsUI {
      * @param {HTMLElement} inputElement The input element to position
      */
     #updatePosition() {
-
         // Measure the element size without causing reflow
         this.root.style.visibility = 'hidden';
         this.root.style.position = 'absolute'; // Ensure position is absolute for measurement
         this.root.style.display = 'block';
         this.root.style.left = '-9999px';
         this.root.style.top = '-9999px';
-        this.root.style.maxWidth = ''; // Reset max dimensions before measuring
-        this.root.style.maxHeight = '';
+        this.root.style.maxWidth = '';
+        this.tagsContainer.style.maxHeight = '';
         const elemRect = this.root.getBoundingClientRect();
+        const headerRect = this.header.getBoundingClientRect();
         // Hide it again after measurement
         this.root.style.display = 'none';
         this.root.style.visibility = 'visible';
-        this.root.style.position = ''; // Reset position style
+        this.root.style.position = '';
         this.root.style.left = '';
         this.root.style.top = '';
 
+
         // Get the optimal placement area
         const placementArea = this.#getOptimalPlacementArea(this.target.getBoundingClientRect(), elemRect.width, elemRect.height);
 
-        // Calculate final styles, fitting the element within the placement area
-        const finalMaxWidth = Math.min(elemRect.width, placementArea.width);
-        const finalMaxHeight = Math.min(elemRect.height, placementArea.height);
-
-        // Adjust position if the element is smaller than the area (e.g., center or align based on mode)
-        // For simplicity, we'll just use the calculated top-left corner of the area for now.
-        // More sophisticated alignment could be added here if needed.
-        let finalLeft = placementArea.x;
-        let finalTop = placementArea.y;
-
         // Apply Styles
-        this.root.style.left = `${finalLeft}px`;
-        this.root.style.top = `${finalTop}px`;
-        this.root.style.maxWidth = `${finalMaxWidth}px`;
-        this.root.style.maxHeight = `${finalMaxHeight}px`;
+        this.root.style.left = `${placementArea.x}px`;
+        this.root.style.top = `${placementArea.y}px`;
+        this.root.style.maxWidth = `${placementArea.width}px`;
+
+        this.tagsContainer.style.maxHeight = `${placementArea.height - headerRect.height}px`;
     }
 
     /** Highlights the item (row) at the given index */