From 968ae5a76b48794c24127181d7f58c6a9ab1318e Mon Sep 17 00:00:00 2001
From: Glavo <zjx001202@gmail.com>
Date: Fri, 9 Jan 2026 07:46:35 +0800
Subject: [PATCH 1/3] update

---
 .../ui/construct/IconedTwoLineListItem.java   |   5 +-
 .../jackhuang/hmcl/ui/construct/TagsBar.java  | 254 ++++++++++++++++++
 .../hmcl/ui/construct/TwoLineListItem.java    | 114 ++++++--
 .../hmcl/ui/versions/ModListPageSkin.java     |   2 +-
 HMCL/src/main/resources/assets/css/root.css   |  21 ++
 5 files changed, 363 insertions(+), 33 deletions(-)
 create mode 100644 HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
index 9cdcae0db9..9040419043 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
@@ -10,7 +10,6 @@
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.geometry.Pos;
-import javafx.scene.control.Label;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.HBox;
@@ -21,7 +20,7 @@
 
 public class IconedTwoLineListItem extends HBox {
     private final StringProperty title = new SimpleStringProperty(this, "title");
-    private final ObservableList<Label> tags = FXCollections.observableArrayList();
+    private final ObservableList<TagsBar.Tag> tags = FXCollections.observableArrayList();
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
     private final StringProperty externalLink = new SimpleStringProperty(this, "externalLink");
     private final ObjectProperty<Image> image = new SimpleObjectProperty<>(this, "image");
@@ -62,7 +61,7 @@ public void setTitle(String title) {
         this.title.set(title);
     }
 
-    public ObservableList<Label> getTags() {
+    public ObservableList<TagsBar.Tag> getTags() {
         return tags;
     }
 
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
new file mode 100644
index 0000000000..05721ee301
--- /dev/null
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
@@ -0,0 +1,254 @@
+/*
+ * Hello Minecraft! Launcher
+ * Copyright (C) 2020  huangyuhui <huanghongxun2008@126.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+package org.jackhuang.hmcl.ui.construct;
+
+import javafx.beans.InvalidationListener;
+import javafx.collections.FXCollections;
+import javafx.collections.ListChangeListener;
+import javafx.collections.ObservableList;
+import javafx.geometry.HPos;
+import javafx.geometry.VPos;
+import javafx.scene.control.Label;
+import javafx.scene.control.Tooltip;
+import javafx.scene.layout.Pane;
+import javafx.scene.text.Text;
+import org.jackhuang.hmcl.ui.FXUtils;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * A horizontal bar that displays multiple text tags.
+ * When there is not enough space, it collapses the rightmost tags into a "+N" indicator
+ * with a tooltip showing the collapsed tag contents.
+ */
+public class TagsBar extends Pane {
+    private static final String DEFAULT_STYLE_CLASS = "tags-bar";
+    private static final double TAG_SPACING = 8.0;
+
+    private final ObservableList<Tag> tags = FXCollections.observableArrayList();
+    private final List<Label> tagLabels = new ArrayList<>();
+    private final Text collapsedIndicator = new Text();
+    private final Tooltip collapsedTooltip = new Tooltip();
+
+    private int visibleTagCount = 0;
+
+    public TagsBar() {
+        getStyleClass().add(DEFAULT_STYLE_CLASS);
+
+        collapsedIndicator.getStyleClass().add("collapsed-indicator");
+        collapsedIndicator.setManaged(false);
+        collapsedIndicator.setVisible(false);
+        getChildren().add(collapsedIndicator);
+
+        // Install tooltip on collapsed indicator
+        FXUtils.installFastTooltip(collapsedIndicator, collapsedTooltip);
+
+        tags.addListener((ListChangeListener<Tag>) c -> {
+            rebuildTagLabels();
+            requestLayout();
+        });
+
+        tags.addListener((InvalidationListener) obs -> requestLayout());
+    }
+
+    private void rebuildTagLabels() {
+        // Remove old labels
+        getChildren().removeAll(tagLabels);
+        tagLabels.clear();
+
+        // Create new labels
+        for (Tag tag : tags) {
+            Label label = new Label();
+            label.setText(tag.text());
+            label.setManaged(false);
+            label.getStyleClass().add(tag.warning() ? "tag-warning" : "tag");
+            tagLabels.add(label);
+        }
+
+        // Add new labels
+        getChildren().addAll(tagLabels);
+
+        // Ensure collapsed indicator is on top
+        collapsedIndicator.toFront();
+    }
+
+    public ObservableList<Tag> getTags() {
+        return tags;
+    }
+
+    public void addTag(String text) {
+        tags.add(new Tag(text, false));
+    }
+
+    public void addTagWarning(String text) {
+        tags.add(new Tag(text, true));
+    }
+
+
+    @Override
+    protected double computeMinWidth(double height) {
+        // Minimum width is the width of the collapsed indicator "+N" if there are tags
+        if (tags.isEmpty()) {
+            return 0;
+        }
+        // Estimate the width of "+N" where N is the total tag count
+        collapsedIndicator.setText("+" + tags.size());
+        return snapSizeX(collapsedIndicator.prefWidth(-1));
+    }
+
+    @Override
+    protected double computePrefWidth(double height) {
+        if (tags.isEmpty()) {
+            return 0;
+        }
+        double width = 0;
+        for (Label label : tagLabels) {
+            width += label.prefWidth(-1);
+        }
+        // Add spacing between tags
+        width += TAG_SPACING * (tagLabels.size() - 1);
+        return snapSizeX(width);
+    }
+
+    @Override
+    protected double computeMinHeight(double width) {
+        return computePrefHeight(width);
+    }
+
+    @Override
+    protected double computePrefHeight(double width) {
+        double maxHeight = 0;
+        for (Label label : tagLabels) {
+            maxHeight = Math.max(maxHeight, label.prefHeight(-1));
+        }
+        if (maxHeight == 0) {
+            maxHeight = collapsedIndicator.prefHeight(-1);
+        }
+        return snapSizeY(maxHeight);
+    }
+
+    @Override
+    protected void layoutChildren() {
+        if (tags.isEmpty()) {
+            collapsedIndicator.setVisible(false);
+            return;
+        }
+
+        double availableWidth = getWidth();
+        double height = getHeight();
+
+        // Calculate widths of all tags
+        double[] tagWidths = new double[tagLabels.size()];
+        for (int i = 0; i < tagLabels.size(); i++) {
+            tagWidths[i] = tagLabels.get(i).prefWidth(-1);
+        }
+
+        // Calculate how many tags can fit
+        visibleTagCount = 0;
+        double currentWidth = 0;
+
+        // First, calculate the collapsed indicator width for the worst case
+        collapsedIndicator.setText("+" + tags.size());
+        double collapsedWidth = collapsedIndicator.prefWidth(-1);
+
+        // Try to fit as many tags as possible
+        for (int i = 0; i < tagLabels.size(); i++) {
+            double tagWidth = tagWidths[i];
+            double spacing = (visibleTagCount > 0) ? TAG_SPACING : 0;
+            // Calculate how many tags would be hidden if we stop here (including current tag)
+            int hiddenCount = tagLabels.size() - i;
+
+            if (i < tagLabels.size() - 1) {
+                // Not the last tag - need to check if we can fit this tag + collapsed indicator
+                collapsedIndicator.setText("+" + hiddenCount);
+                double neededCollapsedWidth = collapsedIndicator.prefWidth(-1) + TAG_SPACING;
+
+                if (currentWidth + spacing + tagWidth + neededCollapsedWidth <= availableWidth) {
+                    currentWidth += spacing + tagWidth;
+                    visibleTagCount++;
+                } else {
+                    // Can't fit this tag plus the collapsed indicator
+                    break;
+                }
+            } else {
+                // This is the last tag - no collapsed indicator needed if it fits
+                if (currentWidth + spacing + tagWidth <= availableWidth) {
+                    currentWidth += spacing + tagWidth;
+                    visibleTagCount++;
+                }
+            }
+        }
+
+        // Special case: if no tags can be shown but we have space for the indicator, show only indicator
+        boolean showingCollapsedIndicator;
+        if (visibleTagCount == 0 && !tags.isEmpty()) {
+            collapsedIndicator.setText("+" + tags.size());
+            showingCollapsedIndicator = collapsedWidth <= availableWidth;
+        } else {
+            showingCollapsedIndicator = visibleTagCount < tagLabels.size();
+        }
+
+        // Layout visible tags
+        double x = 0;
+        for (int i = 0; i < tagLabels.size(); i++) {
+            Label label = tagLabels.get(i);
+            if (i < visibleTagCount) {
+                label.setVisible(true);
+                double labelWidth = tagWidths[i];
+                layoutInArea(label, x, 0, labelWidth, height, 0, HPos.LEFT, VPos.CENTER);
+                x += labelWidth + TAG_SPACING;
+            } else {
+                label.setVisible(false);
+            }
+        }
+
+        // Layout collapsed indicator
+        if (showingCollapsedIndicator) {
+            int hiddenCount = tags.size() - visibleTagCount;
+            collapsedIndicator.setText("+" + hiddenCount);
+            collapsedIndicator.setVisible(true);
+            double indicatorWidth = collapsedIndicator.prefWidth(-1);
+            layoutInArea(collapsedIndicator, x, 0, indicatorWidth, height, 0, HPos.LEFT, VPos.CENTER);
+
+            // Update tooltip with hidden tags
+            updateCollapsedTooltip();
+        } else {
+            collapsedIndicator.setVisible(false);
+        }
+    }
+
+    private void updateCollapsedTooltip() {
+        StringBuilder sb = new StringBuilder();
+        for (int i = visibleTagCount; i < tags.size(); i++) {
+            if (!sb.isEmpty()) {
+                sb.append("\n");
+            }
+            sb.append(tags.get(i).text());
+        }
+        collapsedTooltip.setText(sb.toString());
+    }
+
+
+    /**
+     * A tag with its text content and warning flag.
+     */
+    public record Tag(String text, boolean warning) {
+    }
+}
+
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index 0405202e3f..afe878e04b 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -17,34 +17,25 @@
  */
 package org.jackhuang.hmcl.ui.construct;
 
-import javafx.beans.binding.Bindings;
 import javafx.beans.property.SimpleStringProperty;
 import javafx.beans.property.StringProperty;
-import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
-import javafx.geometry.Insets;
-import javafx.scene.Node;
+import javafx.geometry.HPos;
+import javafx.geometry.VPos;
 import javafx.scene.control.Label;
 import javafx.scene.layout.HBox;
+import javafx.scene.layout.Pane;
 import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.ui.FXUtils;
-import org.jackhuang.hmcl.util.AggregatedObservableList;
 
 public class TwoLineListItem extends VBox {
     private static final String DEFAULT_STYLE_CLASS = "two-line-list-item";
-
-    private static Label createTagLabel(String tag) {
-        Label tagLabel = new Label();
-        tagLabel.setText(tag);
-        HBox.setMargin(tagLabel, new Insets(0, 8, 0, 0));
-        return tagLabel;
-    }
+    private static final double TITLE_TAGS_SPACING = 8.0;
 
     private final StringProperty title = new SimpleStringProperty(this, "title");
-    private final ObservableList<Label> tags = FXCollections.observableArrayList();
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
 
-    private final AggregatedObservableList<Node> firstLineChildren;
+    private final TagsBar tagsBar = new TagsBar();
 
     public TwoLineListItem(String titleString, String subtitleString) {
         this();
@@ -56,17 +47,82 @@ public TwoLineListItem(String titleString, String subtitleString) {
     public TwoLineListItem() {
         setMouseTransparent(true);
 
-        HBox firstLine = new HBox();
-        firstLine.getStyleClass().add("first-line");
-
         Label lblTitle = new Label();
         lblTitle.getStyleClass().add("title");
         lblTitle.textProperty().bind(title);
 
-        firstLineChildren = new AggregatedObservableList<>();
-        firstLineChildren.appendList(FXCollections.singletonObservableList(lblTitle));
-        firstLineChildren.appendList(tags);
-        Bindings.bindContent(firstLine.getChildren(), firstLineChildren.getAggregatedList());
+        // Custom first line layout that prioritizes lblTitle but ensures +N is visible
+        Pane firstLine = new Pane() {
+            @Override
+            protected void layoutChildren() {
+                double width = getWidth();
+                double height = getHeight();
+
+                double titlePrefWidth = lblTitle.prefWidth(-1);
+                double tagsMinWidth = tagsBar.minWidth(-1);
+                double tagsPrefWidth = tagsBar.prefWidth(-1);
+
+                double titleWidth;
+                double tagsWidth;
+
+                if (tagsBar.getTags().isEmpty()) {
+                    // No tags, give all space to title
+                    titleWidth = Math.min(titlePrefWidth, width);
+                    tagsWidth = 0;
+                } else if (titlePrefWidth + TITLE_TAGS_SPACING + tagsPrefWidth <= width) {
+                    // Everything fits
+                    titleWidth = titlePrefWidth;
+                    tagsWidth = tagsPrefWidth;
+                } else if (titlePrefWidth + TITLE_TAGS_SPACING + tagsMinWidth <= width) {
+                    // Title fits fully, tags get remaining space
+                    titleWidth = titlePrefWidth;
+                    tagsWidth = width - titleWidth - TITLE_TAGS_SPACING;
+                } else {
+                    // Need to shrink title to make room for +N indicator
+                    tagsWidth = tagsMinWidth;
+                    titleWidth = Math.max(0, width - tagsMinWidth - TITLE_TAGS_SPACING);
+                }
+
+                layoutInArea(lblTitle, 0, 0, titleWidth, height, 0, HPos.LEFT, VPos.CENTER);
+
+                if (tagsWidth > 0) {
+                    double tagsX = titleWidth + TITLE_TAGS_SPACING;
+                    layoutInArea(tagsBar, tagsX, 0, tagsWidth, height, 0, HPos.LEFT, VPos.CENTER);
+                }
+            }
+
+            @Override
+            protected double computePrefWidth(double height) {
+                double titleWidth = lblTitle.prefWidth(-1);
+                double tagsWidth = tagsBar.prefWidth(-1);
+                if (tagsBar.getTags().isEmpty()) {
+                    return titleWidth;
+                }
+                return titleWidth + TITLE_TAGS_SPACING + tagsWidth;
+            }
+
+            @Override
+            protected double computePrefHeight(double width) {
+                return Math.max(lblTitle.prefHeight(-1), tagsBar.prefHeight(-1));
+            }
+
+            @Override
+            protected double computeMinWidth(double height) {
+                // Minimum is enough for +N indicator
+                double tagsMin = tagsBar.minWidth(-1);
+                if (tagsBar.getTags().isEmpty()) {
+                    return 0;
+                }
+                return tagsMin;
+            }
+
+            @Override
+            protected double computeMinHeight(double width) {
+                return computePrefHeight(width);
+            }
+        };
+        firstLine.getStyleClass().add("first-line");
+        firstLine.getChildren().addAll(lblTitle, tagsBar);
 
         Label lblSubtitle = new Label();
         lblSubtitle.getStyleClass().add("subtitle");
@@ -110,19 +166,19 @@ public void setSubtitle(String subtitle) {
     }
 
     public void addTag(String tag) {
-        Label tagLabel = createTagLabel(tag);
-        tagLabel.getStyleClass().add("tag");
-        getTags().add(tagLabel);
+        tagsBar.addTag(tag);
     }
 
     public void addTagWarning(String tag) {
-        Label tagLabel = createTagLabel(tag);
-        tagLabel.getStyleClass().add("tag-warning");
-        getTags().add(tagLabel);
+        tagsBar.addTagWarning(tag);
+    }
+
+    public ObservableList<TagsBar.Tag> getTags() {
+        return tagsBar.getTags();
     }
 
-    public ObservableList<Label> getTags() {
-        return tags;
+    public TagsBar getTagsBar() {
+        return tagsBar;
     }
 
     @Override
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
index 6f0a9b5fec..8eb0fd5dab 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
@@ -495,7 +495,7 @@ final class ModInfoDialog extends JFXDialogLayout {
                                     }
                                     if (title.getTags()
                                             .stream()
-                                            .noneMatch(it -> it.getText().equals(loaderName))) {
+                                            .noneMatch(it -> it.text().equals(loaderName))) {
                                         title.addTag(loaderName);
                                     }
                                 }
diff --git a/HMCL/src/main/resources/assets/css/root.css b/HMCL/src/main/resources/assets/css/root.css
index 0a3222a934..f70c942171 100644
--- a/HMCL/src/main/resources/assets/css/root.css
+++ b/HMCL/src/main/resources/assets/css/root.css
@@ -319,6 +319,27 @@
     -fx-fill: -monet-on-surface-variant;
 }
 
+.two-line-list-item > .first-line > .tags-bar > .tag {
+    -fx-text-fill: -monet-on-secondary-container;
+    -fx-background-color: -monet-secondary-container;
+    -fx-padding: 2;
+    -fx-font-weight: normal;
+    -fx-font-size: 12px;
+}
+
+.two-line-list-item > .first-line > .tags-bar > .tag-warning {
+    -fx-text-fill: -monet-on-error-container;
+    -fx-background-color: -fixed-warning-tag-background;
+    -fx-padding: 2;
+    -fx-font-weight: normal;
+    -fx-font-size: 12px;
+}
+
+.two-line-list-item > .first-line > .tags-bar > .collapsed-indicator {
+    -fx-fill: -monet-on-secondary-container;
+    -fx-font-size: 12px;
+}
+
 .two-line-list-item > .first-line > .tag {
     -fx-text-fill: -monet-on-secondary-container;
     -fx-background-color: -monet-secondary-container;

From 29377f422c22afeed8a8ab0cac952deaa56ed2f4 Mon Sep 17 00:00:00 2001
From: Glavo <zjx001202@gmail.com>
Date: Fri, 9 Jan 2026 07:54:30 +0800
Subject: [PATCH 2/3] update

---
 .../jackhuang/hmcl/ui/construct/TagsBar.java  | 47 +++++++++----------
 HMCL/src/main/resources/assets/css/root.css   |  7 ++-
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
index 05721ee301..dcfcd7efe5 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
@@ -51,7 +51,7 @@ public class TagsBar extends Pane {
     public TagsBar() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
 
-        collapsedIndicator.getStyleClass().add("collapsed-indicator");
+        collapsedIndicator.getStyleClass().addAll("tag", "collapsed-indicator");
         collapsedIndicator.setManaged(false);
         collapsedIndicator.setVisible(false);
         getChildren().add(collapsedIndicator);
@@ -145,7 +145,7 @@ protected double computePrefHeight(double width) {
 
     @Override
     protected void layoutChildren() {
-        if (tags.isEmpty()) {
+        if (tagLabels.isEmpty()) {
             collapsedIndicator.setVisible(false);
             return;
         }
@@ -163,27 +163,26 @@ protected void layoutChildren() {
         visibleTagCount = 0;
         double currentWidth = 0;
 
-        // First, calculate the collapsed indicator width for the worst case
-        collapsedIndicator.setText("+" + tags.size());
-        double collapsedWidth = collapsedIndicator.prefWidth(-1);
 
         // Try to fit as many tags as possible
         for (int i = 0; i < tagLabels.size(); i++) {
             double tagWidth = tagWidths[i];
             double spacing = (visibleTagCount > 0) ? TAG_SPACING : 0;
-            // Calculate how many tags would be hidden if we stop here (including current tag)
-            int hiddenCount = tagLabels.size() - i;
 
             if (i < tagLabels.size() - 1) {
-                // Not the last tag - need to check if we can fit this tag + collapsed indicator
-                collapsedIndicator.setText("+" + hiddenCount);
-                double neededCollapsedWidth = collapsedIndicator.prefWidth(-1) + TAG_SPACING;
-
-                if (currentWidth + spacing + tagWidth + neededCollapsedWidth <= availableWidth) {
+                // Not the last tag
+                // If tag i fits but next doesn't, we need space for "+(size-i-1)"
+                int hiddenIfNextFails = tagLabels.size() - i - 1;
+                collapsedIndicator.setText("+" + hiddenIfNextFails);
+                double collapsedWidthIfNextFails = collapsedIndicator.prefWidth(-1) + TAG_SPACING;
+
+                // Check if we can fit tag i + collapsed indicator for remaining tags
+                if (currentWidth + spacing + tagWidth + collapsedWidthIfNextFails <= availableWidth) {
                     currentWidth += spacing + tagWidth;
                     visibleTagCount++;
                 } else {
-                    // Can't fit this tag plus the collapsed indicator
+                    // Tag i doesn't fit with its associated indicator
+                    // We'll show indicator for (size - i) hidden tags instead
                     break;
                 }
             } else {
@@ -195,14 +194,9 @@ protected void layoutChildren() {
             }
         }
 
-        // Special case: if no tags can be shown but we have space for the indicator, show only indicator
-        boolean showingCollapsedIndicator;
-        if (visibleTagCount == 0 && !tags.isEmpty()) {
-            collapsedIndicator.setText("+" + tags.size());
-            showingCollapsedIndicator = collapsedWidth <= availableWidth;
-        } else {
-            showingCollapsedIndicator = visibleTagCount < tagLabels.size();
-        }
+        // Determine if we need to show collapsed indicator
+        boolean showingCollapsedIndicator = visibleTagCount < tagLabels.size();
+
 
         // Layout visible tags
         double x = 0;
@@ -220,11 +214,16 @@ protected void layoutChildren() {
 
         // Layout collapsed indicator
         if (showingCollapsedIndicator) {
-            int hiddenCount = tags.size() - visibleTagCount;
+            int hiddenCount = tagLabels.size() - visibleTagCount;
             collapsedIndicator.setText("+" + hiddenCount);
             collapsedIndicator.setVisible(true);
             double indicatorWidth = collapsedIndicator.prefWidth(-1);
-            layoutInArea(collapsedIndicator, x, 0, indicatorWidth, height, 0, HPos.LEFT, VPos.CENTER);
+
+            // Ensure indicator doesn't exceed available width
+            double indicatorX = Math.min(x, availableWidth - indicatorWidth);
+            indicatorX = Math.max(0, indicatorX); // Don't go negative
+
+            layoutInArea(collapsedIndicator, indicatorX, 0, indicatorWidth, height, 0, HPos.LEFT, VPos.CENTER);
 
             // Update tooltip with hidden tags
             updateCollapsedTooltip();
@@ -235,7 +234,7 @@ protected void layoutChildren() {
 
     private void updateCollapsedTooltip() {
         StringBuilder sb = new StringBuilder();
-        for (int i = visibleTagCount; i < tags.size(); i++) {
+        for (int i = visibleTagCount; i < tagLabels.size(); i++) {
             if (!sb.isEmpty()) {
                 sb.append("\n");
             }
diff --git a/HMCL/src/main/resources/assets/css/root.css b/HMCL/src/main/resources/assets/css/root.css
index f70c942171..beaaae3cc9 100644
--- a/HMCL/src/main/resources/assets/css/root.css
+++ b/HMCL/src/main/resources/assets/css/root.css
@@ -336,7 +336,12 @@
 }
 
 .two-line-list-item > .first-line > .tags-bar > .collapsed-indicator {
-    -fx-fill: -monet-on-secondary-container;
+    -fx-fill: -monet-on-surface;
+    -fx-font-size: 12px;
+}
+
+.tags-bar > .collapsed-indicator {
+    -fx-fill: -monet-on-surface;
     -fx-font-size: 12px;
 }
 

From 29a856727aada4e2b9647d14cad731ea105cca65 Mon Sep 17 00:00:00 2001
From: Glavo <zjx001202@gmail.com>
Date: Fri, 9 Jan 2026 08:02:39 +0800
Subject: [PATCH 3/3] update

---
 .../jackhuang/hmcl/ui/construct/TagsBar.java  | 43 ++++++++++++-------
 .../hmcl/ui/construct/TwoLineListItem.java    |  4 ++
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
index dcfcd7efe5..0fcfcefecc 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TagsBar.java
@@ -27,7 +27,6 @@
 import javafx.scene.control.Tooltip;
 import javafx.scene.layout.Pane;
 import javafx.scene.text.Text;
-import org.jackhuang.hmcl.ui.FXUtils;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -44,6 +43,7 @@ public class TagsBar extends Pane {
     private final ObservableList<Tag> tags = FXCollections.observableArrayList();
     private final List<Label> tagLabels = new ArrayList<>();
     private final Text collapsedIndicator = new Text();
+    private final Text measureText = new Text(); // For measuring width without affecting display
     private final Tooltip collapsedTooltip = new Tooltip();
 
     private int visibleTagCount = 0;
@@ -51,13 +51,13 @@ public class TagsBar extends Pane {
     public TagsBar() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
 
-        collapsedIndicator.getStyleClass().addAll("tag", "collapsed-indicator");
+        collapsedIndicator.getStyleClass().add("collapsed-indicator");
         collapsedIndicator.setManaged(false);
         collapsedIndicator.setVisible(false);
         getChildren().add(collapsedIndicator);
 
-        // Install tooltip on collapsed indicator
-        FXUtils.installFastTooltip(collapsedIndicator, collapsedTooltip);
+        // Copy style from collapsedIndicator for accurate measurement
+        measureText.getStyleClass().add("collapsed-indicator");
 
         tags.addListener((ListChangeListener<Tag>) c -> {
             rebuildTagLabels();
@@ -100,6 +100,13 @@ public void addTagWarning(String text) {
         tags.add(new Tag(text, true));
     }
 
+    public Tooltip getCollapsedTooltip() {
+        return collapsedTooltip;
+    }
+
+    public Text getCollapsedIndicator() {
+        return collapsedIndicator;
+    }
 
     @Override
     protected double computeMinWidth(double height) {
@@ -107,9 +114,9 @@ protected double computeMinWidth(double height) {
         if (tags.isEmpty()) {
             return 0;
         }
-        // Estimate the width of "+N" where N is the total tag count
-        collapsedIndicator.setText("+" + tags.size());
-        return snapSizeX(collapsedIndicator.prefWidth(-1));
+        // Use measureText to avoid affecting collapsedIndicator's display
+        measureText.setText("+" + tags.size());
+        return snapSizeX(measureText.prefWidth(-1));
     }
 
     @Override
@@ -138,7 +145,8 @@ protected double computePrefHeight(double width) {
             maxHeight = Math.max(maxHeight, label.prefHeight(-1));
         }
         if (maxHeight == 0) {
-            maxHeight = collapsedIndicator.prefHeight(-1);
+            measureText.setText("+1");
+            maxHeight = measureText.prefHeight(-1);
         }
         return snapSizeY(maxHeight);
     }
@@ -159,11 +167,17 @@ protected void layoutChildren() {
             tagWidths[i] = tagLabels.get(i).prefWidth(-1);
         }
 
+        // Pre-calculate collapsed indicator widths for all possible hidden counts using measureText
+        double[] collapsedWidths = new double[tagLabels.size() + 1];
+        for (int n = 1; n <= tagLabels.size(); n++) {
+            measureText.setText("+" + n);
+            collapsedWidths[n] = measureText.prefWidth(-1);
+        }
+
         // Calculate how many tags can fit
         visibleTagCount = 0;
         double currentWidth = 0;
 
-
         // Try to fit as many tags as possible
         for (int i = 0; i < tagLabels.size(); i++) {
             double tagWidth = tagWidths[i];
@@ -173,8 +187,7 @@ protected void layoutChildren() {
                 // Not the last tag
                 // If tag i fits but next doesn't, we need space for "+(size-i-1)"
                 int hiddenIfNextFails = tagLabels.size() - i - 1;
-                collapsedIndicator.setText("+" + hiddenIfNextFails);
-                double collapsedWidthIfNextFails = collapsedIndicator.prefWidth(-1) + TAG_SPACING;
+                double collapsedWidthIfNextFails = collapsedWidths[hiddenIfNextFails] + TAG_SPACING;
 
                 // Check if we can fit tag i + collapsed indicator for remaining tags
                 if (currentWidth + spacing + tagWidth + collapsedWidthIfNextFails <= availableWidth) {
@@ -182,7 +195,6 @@ protected void layoutChildren() {
                     visibleTagCount++;
                 } else {
                     // Tag i doesn't fit with its associated indicator
-                    // We'll show indicator for (size - i) hidden tags instead
                     break;
                 }
             } else {
@@ -195,8 +207,8 @@ protected void layoutChildren() {
         }
 
         // Determine if we need to show collapsed indicator
-        boolean showingCollapsedIndicator = visibleTagCount < tagLabels.size();
-
+        int hiddenCount = tagLabels.size() - visibleTagCount;
+        boolean showingCollapsedIndicator = hiddenCount > 0;
 
         // Layout visible tags
         double x = 0;
@@ -214,10 +226,9 @@ protected void layoutChildren() {
 
         // Layout collapsed indicator
         if (showingCollapsedIndicator) {
-            int hiddenCount = tagLabels.size() - visibleTagCount;
             collapsedIndicator.setText("+" + hiddenCount);
             collapsedIndicator.setVisible(true);
-            double indicatorWidth = collapsedIndicator.prefWidth(-1);
+            double indicatorWidth = collapsedWidths[hiddenCount];
 
             // Ensure indicator doesn't exceed available width
             double indicatorX = Math.min(x, availableWidth - indicatorWidth);
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index afe878e04b..d7a525461e 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -51,6 +51,10 @@ public TwoLineListItem() {
         lblTitle.getStyleClass().add("title");
         lblTitle.textProperty().bind(title);
 
+        // Allow tagsBar to receive mouse events for tooltip
+        tagsBar.setMouseTransparent(false);
+        FXUtils.installFastTooltip(tagsBar.getCollapsedIndicator(), tagsBar.getCollapsedTooltip());
+
         // Custom first line layout that prioritizes lblTitle but ensures +N is visible
         Pane firstLine = new Pane() {
             @Override