primer · langermank · Jul 25, 2025 · Jul 22, 2025 · Jul 22, 2025 · Jul 22, 2025
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Align `font` with PVC for Tooltip
@@ -50,6 +50,7 @@ const stories = [
  {
  title: 'Keybinding Hint on Description',
  id: 'components-iconbutton-features--keybinding-hint-on-description',
+ disableAnimations: true,
  async setup(page: Page) {
  await page.keyboard.press('Tab') // focus on icon button
  await page.getByText('You have unread notifications').waitFor({

@@ -18,14 +18,13 @@
  width: max-content;
  max-width: 250px;
  /* stylelint-disable-next-line primer/spacing */
- padding: 0.5em 0.75em;
+ padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);
  margin: auto;
 
  /* for scrollbar */
  overflow: visible;
  clip: auto;
- /* stylelint-disable-next-line primer/typography */
- font: normal normal 11px/1.5 var(--fontStack-system);
+ font: var(--text-body-shorthand-small);
  color: var(--tooltip-fgColor);
  text-align: center;
  word-wrap: break-word;
@@ -35,6 +34,7 @@
  border-radius: var(--borderRadius-medium);
  -webkit-font-smoothing: subpixel-antialiased;
  inset: auto;
-inset: auto;
+inset: auto;
+word-wrap: break-word; /* Fallback for older browsers */
+overflow-wrap: break-word; /* Ensures compatibility */
-inset: auto;
+inset: auto;
+word-wrap: break-word; /* Fallback for older browsers */
+overflow-wrap: break-word; /* Ensures compatibility */
+ text-wrap: balance;
  }
 
  /* class name in chrome is :popover-open */
@@ -123,8 +123,5 @@
 }
 
 .KeybindingHintContainer.HasTextBefore {
- /* Offset negative on the right right to make right spacing look like top and bottom spacing, only for keybinding hints and only when there is text */
- /* stylelint-disable-next-line primer/spacing */
- margin-right: -0.125em;
  margin-left: var(--base-size-6);
 }