Replace ActionBar overflow calculations with CSS wrapping approach

.changeset/many-suns-promise.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Replace `ActionBar` overflow calculations with CSS wrapping approach to improve performance and stability

packages/react/src/ActionBar/ActionBar.module.css

@@ -8,8 +8,28 @@
   margin-bottom: -1px;
   white-space: nowrap;
   list-style: none;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--actionbar-gap, var(--stack-gap-condensed));
+  overflow: hidden;
+  height: var(--actionbar-height);
+  animation: detect-overflow linear;
+  animation-timeline: scroll(self block);
+
+  --actionbar-height: var(--control-small-size);
+  --morebutton-display: none;
+
+  &[data-has-overflow='true'] {
+    /* Progressive enhancement: show overflow button on browsers that don't support scroll-driven animations */
+    --morebutton-display: block;
+  }
+
+  &[data-size='medium'] {
+    --actionbar-height: var(--control-medium-size);
+  }
+
+  &[data-size='large'] {
+    --actionbar-height: var(--control-large-size);
+  }
 
   /* Gap scale (mirrors Stack) */
   &:where([data-gap='none']) {
@@ -25,6 +45,13 @@
   }
 }
 
+@keyframes detect-overflow {
+  0%,
+  100% {
+    --morebutton-display: block;
+  }
+}
+
 .Nav {
   display: flex;
   padding-inline: var(--base-size-16);
@@ -44,10 +71,23 @@
     content: '';
     /* stylelint-disable-next-line primer/colors */
     background: var(--borderColor-muted);
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);
   }
 }
 
 .Group {
   display: flex;
   gap: inherit;
 }
+
+.OverflowContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: inherit;
+  justify-content: flex-end;
+}
+
+.MoreButton {
+  display: var(--morebutton-display);
+}