nodes/newtextdoc1111-ComfyUI-Autocomplete-Plus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Adjust related tags UI positioning and styling for better responsiveness

Browse Source
This commit is contained in:
newtextdoc1111
2025-05-09 01:22:32 +09:00
parent 83826f0b80
commit 4827b11168
2 changed files with 14 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/autocomplete-plus.css
+4 -2
View File
@@ -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"] {
web/js/related-tags.js
+10 -22
View File
@@ -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 */