Fix flat breadcrumb paddings

base/src/main/java/atlantafx/base/controls/BreadcrumbsSkin.java

@@ -45,6 +45,7 @@ import java.util.List;
 public class BreadcrumbsSkin<T> extends SkinBase<Breadcrumbs<T>> {
 
     private static final String STYLE_CLASS_FIRST = "first";
+    private static final String STYLE_CLASS_LAST = "last";
 
     public BreadcrumbsSkin(final Breadcrumbs<T> control) {
         super(control);
@@ -84,12 +85,18 @@ public class BreadcrumbsSkin<T> extends SkinBase<Breadcrumbs<T>> {
             for (int i = 0; i < crumbs.size(); i++) {
                 Button crumb = createCrumb(factory, crumbs.get(i));
                 crumb.setMnemonicParsing(false);
-                if (i == 0) {
-                    if (!crumb.getStyleClass().contains(STYLE_CLASS_FIRST)) {
-                        crumb.getStyleClass().add(STYLE_CLASS_FIRST);
-                    }
-                } else {
+
+                boolean first = crumbs.size() > 1 && i == 0;
+                boolean last = crumbs.size() > 1 && i == crumbs.size() - 1;
+
+                if (first) {
+                    crumb.getStyleClass().remove(STYLE_CLASS_LAST);
+                    addStyleClass(crumb, STYLE_CLASS_FIRST);
+                } else if (last) {
                     crumb.getStyleClass().remove(STYLE_CLASS_FIRST);
+                    addStyleClass(crumb, STYLE_CLASS_LAST);
+                } else {
+                    crumb.getStyleClass().removeAll(STYLE_CLASS_FIRST, STYLE_CLASS_LAST);
                 }
 
                 getChildren().add(crumb);
@@ -97,6 +104,12 @@ public class BreadcrumbsSkin<T> extends SkinBase<Breadcrumbs<T>> {
         }
     }
 
+    private void addStyleClass(Node node, String styleClass) {
+        if (!node.getStyleClass().contains(styleClass)) {
+            node.getStyleClass().add(styleClass);
+        }
+    }
+
     @Override
     protected void layoutChildren(double x, double y, double w, double h) {
         for (int i = 0; i < getChildren().size(); i++) {

sampler/src/main/java/atlantafx/sampler/page/components/BreadcrumbsPage.java

@@ -7,7 +7,6 @@ import atlantafx.sampler.page.AbstractPage;
 import atlantafx.sampler.page.SampleBlock;
 import javafx.geometry.Pos;
 import javafx.scene.control.Button;
-import javafx.scene.control.ContentDisplay;
 import javafx.scene.control.TreeItem;
 import javafx.scene.layout.HBox;
 import javafx.util.Callback;
@@ -45,8 +44,6 @@ public class BreadcrumbsPage extends AbstractPage {
             if (!crumb.getChildren().isEmpty()) {
                 btn.setGraphic(new FontIcon(Feather.CHEVRON_RIGHT));
             }
-            btn.setContentDisplay(ContentDisplay.RIGHT);
-            btn.setStyle("-fx-padding: 12px 6px 12px 6px;");
             return btn;
         };
 

sampler/src/main/java/atlantafx/sampler/page/showcase/filemanager/FileManagerPage.java

@@ -4,6 +4,7 @@ package atlantafx.sampler.page.showcase.filemanager;
 import atlantafx.base.controls.Breadcrumbs;
 import atlantafx.base.controls.Spacer;
 import atlantafx.base.theme.Tweaks;
+import atlantafx.sampler.page.components.BreadcrumbsPage;
 import atlantafx.sampler.page.showcase.ShowcasePage;
 import atlantafx.sampler.util.Containers;
 import javafx.geometry.Insets;
@@ -163,8 +164,6 @@ public class FileManagerPage extends ShowcasePage {
             if (!crumb.getChildren().isEmpty()) {
                 btn.setGraphic(new FontIcon(Feather.CHEVRON_RIGHT));
             }
-            btn.setContentDisplay(ContentDisplay.RIGHT);
-            btn.setStyle("-fx-padding: 6px 0 6px 6px;");
             return btn;
         };
 

styles/src/components/_breadcrumbs.scss

@@ -1,7 +1,37 @@
 // SPDX-License-Identifier: MIT
 
+@use "../settings/config" as cfg;
+
+// node hierarchy
 // .bread-crumb-bar {
-//   >.crumb {
-//     ...
-//   }
-// }
+//   >.crumb { ... }
+// }
+
+// right gap is small, because we have crumbs divider on the right,
+// which gives us additional padding, at least visually.
+$crumb-right-gap: 2px !default;
+$crumb-left-gap:  calc(cfg.$graphic-gap * 1.5) !default;
+
+.bread-crumb-bar {
+  >.button.flat {
+    -fx-padding: cfg.$padding-y $crumb-right-gap cfg.$padding-y $crumb-left-gap;
+    -fx-content-display: RIGHT;
+
+    &.first {
+      -fx-padding: cfg.$padding-y $crumb-right-gap cfg.$padding-y cfg.$padding-x;
+    }
+
+    &.last {
+      -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y $crumb-left-gap;
+
+      #{cfg.$font-icon-selector} {
+        // hiding font icon doesn't work as it should,
+        // and have to be replaced by '-fx-managed' when supported
+        -fx-min-width: 0;
+        -fx-pref-width: 0;
+        -fx-max-width: 0;
+        visibility: hidden;
+      }
+    }
+  }
+}