@brightspot/ui 6.1.1-rc.2 → 6.2.0

package/dist/tailwind-plugin-button.ts

@@ -90,6 +90,8 @@ module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
       '&:disabled': disabledStyle,
       '&[disabled]': disabledStyle,
       textDecoration: 'none',
+      // Explicit so re-applying btu-button clears an outline, as it already does background/color.
+      outline: 'none',
       transition: 'scale 150ms ease',
       '&:hover': {
         color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.1.1-rc.2",
+  "version": "6.2.0",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

package/src/legacy/tool-ui/src/Admin.css

@@ -13,7 +13,7 @@
 }
 
 /* Admin areas side nav styling */
-.Admin-nav {
+.Admin .Admin-nav {
   @apply bg-gray-50;
 
   > h2,
@@ -43,7 +43,7 @@
     }
 
     /* These content selectors should just appear as normal ComboInputs */
-    > form > .ContentSelector-select + .ComboInput {
+    > form > .ComboInput {
       @apply rounded-lg px-4;
 
       &:not([aria-expanded='true'], :focus-visible) {

package/src/legacy/tool-ui/src/CIGCluster.css

@@ -1,5 +1,13 @@
 btu-cig-cluster {
-  @apply blokk flex-grow basis-full contain-layout contain-style;
+  --gap: calc(2 * var(--CIG-padding));
+
+  /* Flex (not block) so narrow .CIG-row children pair up like they do in .CIG. */
+  @apply flex flex-grow flex-wrap basis-full gap-x-[--gap] contain-layout contain-style;
+}
+
+/* Children run the full row; the narrow modifiers (.is-half etc.) override this to pair up. */
+btu-cig-cluster > * {
+  @apply basis-full;
 }
 
 btu-cig-cluster:state(btu-error) {

package/src/legacy/tool-ui/src/ChartCompat.ts

@@ -247,7 +247,7 @@ Highcharts.theme = {
 }
 
 Highcharts.setOptions(Highcharts.theme)
-Highcharts.setOptions({ lang: { noData: 'No Data to Display' } })
+Highcharts.setOptions({ lang: { noData: window.BRIGHTSPOT?.ui?.tooltips?.chartNoData ?? 'No Data to Display' } })
 
 const createLabels = (table: HTMLTableElement): string[] => {
   const labels = []

package/src/legacy/tool-ui/src/Compat.css

@@ -202,6 +202,12 @@
   }
 }
 
+/* btu-button is colorless without a variant. :where() keeps this at one class of specificity so
+   context rules (ActionBar, etc.) still win. */
+.Button:not(:where(.is-dominant, .is-green, .is-yellow, .Link)) {
+  @apply btu-button-gray btu-button-fill-none btu-button-outline;
+}
+
 .Button.is-dominant {
   @apply btu-button-primary;
 }

package/src/legacy/tool-ui/src/ContentEdit.css

@@ -760,18 +760,29 @@
   @apply flex flex-nowrap gap-2;
 }
 
+/* Lives in the edit grid, not the scrolling form, so a space-taking scrollbar
+  can't push the hit target off the panel edge. */
 .ContentEdit-resizeWrapper {
-  --resize-hitbox-w: 8px;
-  @apply pointer-events-none invisible absolute z-20 !col-[fullbleed-end] w-[--resize-hitbox-w] bg-transparent [inset-block-end:0] [inset-block-start:0] [inset-inline-start:calc(100%_-_var(--resize-hitbox-w))] md:pointer-events-auto md:visible md:cursor-col-resize;
+  --resize-hitbox-w: 16px;
+  margin-inline-end: calc(-1 * var(--resize-hitbox-w));
+  @apply pointer-events-none hidden w-[--resize-hitbox-w] justify-self-end bg-transparent [grid-area:left] md:pointer-events-auto md:relative md:z-20 md:cursor-col-resize md:touch-none;
 }
 
-.ContentEdit-resizeWrapper:hover .ContentEdit-resizeHandle {
+/* Laid out only in the edit grid, since other popups are grids with no `left` area. */
+:is(.Page.is-editing .Page-content, .Popup-content.is-editing)
+  > .ContentEdit-resizeWrapper {
+  @apply md:blokk;
+}
+
+.ContentEdit-resizeWrapper:hover .ContentEdit-resizeHandle,
+.ContentEdit-resizeWrapper:active .ContentEdit-resizeHandle {
   @apply bg-primary-500;
 }
 
 .ContentEdit-resizeHandle {
   --resize-handle-w: 2px;
-  @apply pointer-events-none fixed h-full w-[var(--resize-handle-w)] translate-x-[calc(var(--resize-hitbox-w)_-_var(--resize-handle-w))] transition-all;
+  /* Persistently visible so it's discoverable on touch devices (no :hover). */
+  @apply pointer-events-none absolute inset-y-0 start-0 w-[var(--resize-handle-w)] bg-primary-100 transition-colors;
 }
 
 /* Banners / Messages styling in Content edit form */
@@ -884,14 +895,10 @@
 }
 
 .ContentEdit-revisionActions {
-  @apply text-[--Revision-revisionEmphasisColor] max-md:mt-3;
+  @apply flex flex-wrap gap-4 text-[--Revision-revisionEmphasisColor] max-md:mt-3;
 
   > a {
-    white-space: nowrap;
-  }
-
-  > a:not(:first-child) {
-    margin-left: var(--gap-l);
+    @apply whitespace-nowrap;
   }
 }
 
@@ -1015,11 +1022,11 @@
 }
 
 button.ContentEdit-workflowLink {
-  @apply btu-button btu-button-fill-none btu-button-primary m-6 !ms-auto btu-button-container-none after:btu-icon after:btu-icon-arrow-right after:ml-2;
+  @apply btu-button btu-button-fill-none btu-button-primary m-6 !ms-auto btu-button-container-none after:btu-icon after:btu-icon-arrow-right rtl:after:btu-icon-arrow-left after:ms-2;
 }
 
 [data-name='publishOverride'] button.ContentEdit-workflowLink {
-  @apply !me-auto !ms-6 before:btu-icon before:btu-icon-arrow-left before:mr-2 after:hidden;
+  @apply !me-auto !ms-6 before:btu-icon before:btu-icon-arrow-left rtl:before:btu-icon-arrow-right before:me-2 after:hidden;
 }
 
 /* Hide workflow link when not in publish override mode */

package/src/legacy/tool-ui/src/ContentEditPanel.ts

@@ -13,9 +13,9 @@ let panelData: PanelData | null
 let pointerIsDown = false
 let pdOriginX = 0 // Pointer down origin x position
 let gtcOrigin: number[] = [] // Origin Grid Template Columns in pixels
-let ogTransProp: undefined | string
 let isRTL = false // Whether the container has RTL direction
 let container: HTMLElement | null // The target Page
+let grid: HTMLElement | null // The grid whose columns the drag resizes
 let panel: HTMLElement | null // The target Panel
 
 const updateWidth = (length: string) => {
@@ -47,6 +47,8 @@ const onPointerDown = (e: PointerEvent) => {
     if (e.target.classList.contains('ContentEdit-resizeWrapper')) {
       container = e.target.closest<HTMLElement>('.Page-content, .Popup')
       if (!container) return
+      // Capture so a touch/trackpad drag isn't stolen by scroll and lost mid-drag.
+      e.target.setPointerCapture(e.pointerId)
       pointerIsDown = true
       const isPopup = container.classList.contains('Popup')
       if (isPopup) {
@@ -57,15 +59,15 @@ const onPointerDown = (e: PointerEvent) => {
         document.body.style.userSelect = 'none'
       }
       pdOriginX = e.screenX
-      const computedStyle = getComputedStyle(container)
-      ogTransProp = computedStyle.transitionProperty
-      isRTL = computedStyle.direction === 'rtl'
-      container.style.transitionProperty = 'none'
-      const grid = isPopup
+      isRTL = getComputedStyle(container).direction === 'rtl'
+      grid = isPopup
         ? container.querySelector<HTMLElement>('.Popup-content')
         : container
       if (!grid) return
 
+      // The transition belongs to the grid, which in a popup is not the container.
+      grid.style.transitionProperty = 'none'
+
       gtcOrigin = window
         .getComputedStyle(grid)
         .gridTemplateColumns.split(' ')
@@ -101,15 +103,16 @@ const onPointerDown = (e: PointerEvent) => {
   }
 }
 
-const onPointerUp = (e: PointerEvent) => {
+const onPointerUp = (e: PointerEvent, save = true) => {
   panel = null
   pointerIsDown = false
+  if (grid) {
+    grid.style.removeProperty('transition-property')
+    grid = null
+  }
   if (e.target instanceof HTMLElement) {
     container = e.target.closest<HTMLElement>('.Page-content, .Popup')
   }
-  if (container && ogTransProp) {
-    container.style.transitionProperty = ogTransProp
-  }
   if (container?.classList.contains('Popup')) {
     container.style.cursor = 'initial'
     container.style.userSelect = 'unset'
@@ -128,7 +131,9 @@ const onPointerUp = (e: PointerEvent) => {
   }
 
   if (panelData && panelData.width) {
-    savePreferredWidth(panelData)
+    // A cancelled drag (scroll gesture stealing the pointer) shouldn't persist its
+    // interrupted width.
+    if (save) savePreferredWidth(panelData)
     panelData = null
   }
 }
@@ -156,7 +161,11 @@ const onPointerMove = (e: PointerEvent) => {
 
 const initResizablePanel = () => {
   onFind('.ContentEdit-main', (cl) => {
-    cl.append(
+    // Appended to the grid, not the scrolling form: see ContentEdit.css.
+    const grid = cl.closest<HTMLElement>('.Page-content, .Popup-content')
+    if (!grid || grid.querySelector(':scope > .ContentEdit-resizeWrapper'))
+      return
+    grid.append(
       create(
         'div',
         { className: 'ContentEdit-resizeWrapper' },
@@ -167,6 +176,11 @@ const initResizablePanel = () => {
 
   document.body.addEventListener('pointerdown', onPointerDown, false)
   document.body.addEventListener('pointerup', onPointerUp, false)
+  document.body.addEventListener(
+    'pointercancel',
+    (e) => onPointerUp(e, false),
+    false,
+  )
   document.body.addEventListener('pointermove', onPointerMove, false)
 
   // Check if there's a preferred width for the content form

package/src/legacy/tool-ui/src/ContentInputGroup.css

@@ -515,6 +515,14 @@
     @apply pointer-events-auto;
   }
 
+  .CIG-note :where(a, button, [role='button'], btu-copy-to-clipboard) {
+    @apply pointer-events-auto cursor-pointer;
+  }
+
+  .CIG-note a {
+    @apply text-primary-600;
+  }
+
   .MultiSortable:hover {
     @apply cursor-[unset];
   }

package/src/legacy/tool-ui/src/Conversation.css

@@ -1,5 +1,5 @@
 .Conversation {
-  --post-form-h: 198px; /* this magic number is the approx height of the post form to reduce the jittering of the height while the RTE renders. */
+  --post-form-h: 136px; /* this magic number is the approx height of the post form to reduce the jittering of the height while the RTE renders. */
   @apply !col-[fullbleed-start_/_fullbleed-end] grid min-h-0 grid-rows-[minmax(0px,1fr)_minmax(var(--post-form-h),auto)];
 }
 
@@ -94,7 +94,7 @@
 }
 
 .Conversation-workflowStateIcon {
-  @apply flex before:btu-icon before:btu-icon-arrow-right before:font-semibold before:text-gray-500 before:btu-icon-xs;
+  @apply flex before:btu-icon before:btu-icon-arrow-right rtl:before:btu-icon-arrow-left before:font-semibold before:text-gray-500 before:btu-icon-xs;
 }
 
 .Conversation-text {
@@ -128,11 +128,19 @@
 
 /* TODO: revisit newPost when ProseMirror is styled */
 .Conversation-newPost {
-  @apply flex flex-col items-end gap-4 border-t border-t-gray-200 p-4;
+  @apply flex flex-row items-end gap-3 border-t border-t-gray-200 p-4;
+
+  .CIG-small {
+    @apply mt-0;
+  }
 }
 
 .Conversation-newPost .ProseMirrorContainer {
   @apply bg-white;
+
+  .ProseMirror {
+    @apply py-4;
+  }
 }
 
 .Conversation-newPostButton {
@@ -181,6 +189,10 @@
     }
   }
 
+  .Conversation-newPost {
+    @apply flex-col;
+  }
+
   .Conversation-posts {
     @apply max-h-[calc(100vh-3.3rem)] overflow-y-auto;
   }
@@ -212,10 +224,6 @@
       @apply blokk max-h-[300px] overflow-y-auto;
     }
   }
-
-  .Conversation {
-    @apply flex min-h-max flex-col;
-  }
 }
 
 .Popup[name='conversation-reply'] {
@@ -225,6 +233,10 @@
     .Conversation-posts {
       @apply overflow-y-visible;
     }
+
+    .Conversation-newPost {
+      @apply flex-col;
+    }
   }
 }
 

package/src/legacy/tool-ui/src/EmbeddedInputGroup/index.ts

@@ -13,11 +13,7 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
   @queryAsync('.EIG-item')
   _eigItem?: Promise<HTMLElement>
 
-  @queryAsync('.EIG-title')
-  _title?: Promise<HTMLElement>
-
-  @queryAsync('.removeButton')
-  _removeButton?: Promise<HTMLElement>
+  private _watchingItems = false
 
   connectedCallback(): void {
     super.connectedCallback()
@@ -25,29 +21,6 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
     this.initializeEigItem()
   }
 
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    this._removeButton?.then((removeButton) => {
-      removeButton?.removeEventListener('click', (evt) => {
-        this._removeItem(evt)
-      })
-    })
-
-    this._title?.then((title) => {
-      title?.removeEventListener('click', () => {
-        this._eigToggle()
-      })
-
-      title?.removeEventListener('keydown', ({ key }) => {
-        if (key === 'Enter' || key === 'Space' || key === ' ') {
-          event?.preventDefault()
-          this._eigToggle()
-        }
-      })
-    })
-  }
-
   private _eigToggle = () => {
     this._eigItem?.then((eigItem) => {
       if (eigItem) {
@@ -101,6 +74,9 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
             if (eigLiveRegion) eigLiveRegion.textContent = tooltips?.restore
           }
         }
+
+        // Fire a change event so the content-state pipeline recomputes and the live preview reflects the removed/restored item.
+        eigItem.dispatchEvent(new Event('change', { bubbles: true }))
       }
     })
   }
@@ -114,43 +90,36 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
   }
 
   initializeEigItem() {
+    // Register the watcher once; onFind then binds each .EIG-item's controls exactly once — on initial load, on Add, and when the item is swapped.
+    if (!this._watchingItems) {
+      this._watchingItems = true
+      onFind(this, '.EIG-item', (eigItem: HTMLElement) => {
+        const title = eigItem.querySelector<HTMLElement>('.EIG-title')
+        const removeButton = eigItem.querySelector<HTMLElement>('.removeButton')
+        this.titleAddEventListeners(title)
+        this.removeButtonAddEventListeners(removeButton)
+      })
+    }
+
+    // Restore the previously-collapsed state.
     this._eigItem?.then((eigItem) => {
       if (eigItem) {
         const associatedDataField = eigItem.closest<HTMLElement>('[data-field]')
-        const itemClassList = eigItem.classList
-        let key = null
 
-        // Check if item is collapsed previously
         if (associatedDataField) {
-          key = getComponentKey(associatedDataField, 'data-field')
+          const key = getComponentKey(associatedDataField, 'data-field')
           if (key && ls.getItem(key)) {
-            itemClassList.add('is-collapsed')
+            eigItem.classList.add('is-collapsed')
             eigItem.querySelector('.CIG-large')?.setAttribute('hidden', '')
           }
         }
-      } else {
-        // No EIG item has been added yet (i.e., Add Module) so monitor for it.
-        onFind(this, '.EIG-item', (eigItem: HTMLElement) => {
-          const title = eigItem.querySelector<HTMLElement>('.EIG-title')
-          const removeButton =
-            eigItem.querySelector<HTMLElement>('.removeButton')
-          this.titleAddEventListeners(title)
-          this.removeButtonAddEventListeners(removeButton)
-        })
       }
     })
-
-    this._title?.then((title) => {
-      this.titleAddEventListeners(title)
-    })
-
-    this._removeButton?.then((removeButton) => {
-      this.removeButtonAddEventListeners(removeButton)
-    })
   }
 
   titleAddEventListeners(title: HTMLElement | null) {
     if (!title) return
+
     title.addEventListener('click', () => {
       this._eigToggle()
     })
@@ -166,6 +135,7 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
 
   removeButtonAddEventListeners(removeButton: HTMLElement | null) {
     if (!removeButton) return
+
     const eigLiveRegion = create('span', {
       class: 'screen-reader-only',
       'aria-live': 'polite',

package/src/legacy/tool-ui/src/Enhancement.css

@@ -10,7 +10,7 @@ html::view-transition-group(prosemirror-enhancement) {
   }
 
   &.block.readOnly {
-    @apply grid grid-cols-[1fr_auto] gap-2 rounded-lg border p-2 [grid-template-areas:'label_menu''preview_preview'] hover:border-gray-300 hover:bg-gray-50;
+    @apply grid h-auto grid-cols-[1fr_auto] gap-2 rounded-lg border p-2 [grid-template-areas:'label_menu''preview_preview'] hover:border-gray-300 hover:bg-gray-50;
   }
 
   &:where(.readOnly.ProseMirror-selectednode) {
@@ -28,7 +28,8 @@ html::view-transition-group(prosemirror-enhancement) {
   @apply flex gap-2 py-1 text-sm font-medium text-gray-900;
 }
 
-.Enhancement-preview {
+.Enhancement-preview,
+.Enhancement-initialBody {
   @apply [grid-area:preview];
 }
 

package/src/legacy/tool-ui/src/Entry.ts

@@ -920,6 +920,17 @@ onFind('.ProfileDropdown-items', (items: HTMLElement) => {
   items.closest('.Widget')?.classList.add('has-profileDropdown')
 })
 
+// Lets Widget.css row out buttons with no ActionBar collecting them, without a :has() on the form.
+onFind(
+  ['.Widget > form > .Button', '.Widget > form > .fixedScrollable > .Button'],
+  (button: HTMLElement) => {
+    const form = button.parentElement
+    if (form && !form.querySelector(':scope > .ActionBar')) {
+      form.classList.add('has-looseButtons')
+    }
+  },
+)
+
 onFind('.Widget-controls', (controls: HTMLElement) => {
   const widget = controls.closest<HTMLElement>('.Widget')
   if (!widget) return

package/src/legacy/tool-ui/src/Global.d.ts

@@ -87,10 +87,13 @@ declare global {
           imageHeight: string
           imageHeightOpen: string
           imageHeightClose: string
+          chartNoData: string
           fieldSelect: string
           fieldHide: string
           filtersHide: string
           filtersShow: string
+          formFilterNoResults: string
+          formFilterPlaceholder: string
           focusTrapHint: string
           fullScreen: string
           fullScreenSearch: string

package/src/legacy/tool-ui/src/Guide.css

@@ -18,11 +18,11 @@
   --guide-title-h: calc(var(--guide-edit-icon-size) + theme(padding.6));
   --guide-controls-w: calc(2 * var(--guide-edit-icon-size) + theme(padding.8));
 
-  @apply btu-heading-4 relative h-[var(--guide-title-h)] truncate border-b border-b-gray-200 bg-gray-50 py-3.5 pl-4 pr-[var(--guide-controls-w)] text-gray-900;
+  @apply btu-heading-4 relative h-[var(--guide-title-h)] truncate border-b border-b-gray-200 bg-gray-50 py-3.5 ps-4 pe-[var(--guide-controls-w)] text-gray-900;
 }
 
 .Guide-controls {
-  @apply absolute right-4 top-3 flex items-center gap-2;
+  @apply absolute end-4 top-3 flex items-center gap-2;
 }
 
 .Guide-edit {
@@ -104,15 +104,15 @@
 }
 
 .Guide-embedded {
-  @apply relative ml-2.5 pl-2.5 shadow-[-1px_0_0_theme(colors.gray.300)];
+  @apply relative ms-2.5 ps-2.5 shadow-[-1px_0_0_theme(colors.gray.300)] rtl:shadow-[1px_0_0_theme(colors.gray.300)];
 
   > .Guide-edit {
-    @apply absolute right-0 top-[calc(0px-var(--guide-edit-icon-size)-0.5rem-1px)];
+    @apply absolute end-0 top-[calc(0px-var(--guide-edit-icon-size)-0.5rem-1px)];
   }
 
   .Guide-field,
   .Guide-description {
-    @apply pl-1 pr-0;
+    @apply ps-1 pe-0;
   }
 
   .Guide-tabCluster {

package/src/legacy/tool-ui/src/LiveBlog.css

@@ -1,5 +1,5 @@
 .objectId-edit-heading {
-  @apply btu-button btu-button-fill-none btu-button-primary blokk truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
+  @apply btu-button btu-button-fill-none btu-button-primary blokk truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left rtl:before:btu-icon-arrow-right before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
 }
 
 .Grid:has(.LiveBlogGrid),
@@ -15,7 +15,7 @@
 }
 
 .LiveBlogPostList-open {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute top-[calc(var(--page-broadcast-h)+var(--page-broadcastAlert-h)_+_52px_+_theme(spacing.2))] z-[1] before:btu-icon before:btu-icon-chevron-left md:hidden;
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute top-[calc(var(--page-broadcast-h)+var(--page-broadcastAlert-h)_+_52px_+_theme(spacing.2))] z-[1] before:btu-icon before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right md:hidden;
 }
 
 .LiveBlogGrid:not(.is-visible) .LiveBlogPostList-open {

package/src/legacy/tool-ui/src/MenuView.css

@@ -20,7 +20,7 @@
   > ul {
     --ProseMirror-toolbar-h: calc(theme(spacing.4) + theme(lineHeight.6));
 
-    @apply relative inline-flex h-[var(--ProseMirror-toolbar-h)] w-full flex-wrap items-center gap-y-3 overflow-clip py-2 pr-[calc(var(--ProseMirrorToolbar-rightControls)+var(--ProseMirror-wordCount)+var(--iconSize-xs))] ps-3;
+    @apply relative inline-flex h-[var(--ProseMirror-toolbar-h)] w-full flex-wrap items-center gap-y-3 overflow-clip py-2 pe-[calc(var(--ProseMirrorToolbar-rightControls)+var(--ProseMirror-wordCount)+var(--iconSize-xs))] ps-3;
 
     .rte2-toolbar-submenu-2,
     .rte2-toolbar-separator,
@@ -119,7 +119,8 @@
   }
 
   .CIG-wordCount {
-    @apply absolute end-3 top-1.5 z-10 opacity-100;
+    /* pointer-events-none keeps the status box from swallowing clicks meant for the overflow button beneath it */
+    @apply pointer-events-none absolute end-3 top-1.5 z-10 opacity-100;
 
     /* Override inline styles from JS */
     @apply [--ProseMirror-wordCountSpacingWithOneIcon:52px] [--ProseMirror-wordCountSpacingWithThreeIcons:120px] [--ProseMirror-wordCountSpacingWithTwoIcons:85px];

package/src/legacy/tool-ui/src/Message.css

@@ -34,16 +34,11 @@
   }
 
   a {
-    @apply order-3 ms-auto font-semibold text-[--link-color] decoration-solid decoration-auto max-md:ms-0;
+    @apply order-3 font-semibold text-[--link-color] decoration-solid decoration-auto;
   }
 
-  /* The Message-icon is always JS-appended last (see Message.js), so a leading anchor means the
-     message is just an icon + a bare link (e.g. Book Outline's link, ToolUser's password reset
-     link) - it should hug the icon now that the bar is full width, not drift to the far end.
-     Messages with real content before the link (e.g. a heading + a "view results" link) are
-     unaffected and keep the link pinned to the end. */
-  > a:first-child {
-    @apply ms-0;
+  .ContentEdit-revisionActions, .WorkInProgressRestoredMessage-actions a, .Message-returnToDashboard {
+    @apply ms-auto max-md:ms-0;
   }
 
   .is-emphasis {
@@ -174,7 +169,7 @@
   }
 
   a {
-    @apply order-[0] ms-0;
+    @apply order-[0];
   }
 
   .ComboInput {

package/src/legacy/tool-ui/src/Page.css

@@ -67,7 +67,7 @@
 }
 
 .Page-broadcastAlert {
-  @apply flex max-h-[--page-broadcastAlert-h] border-b border-b-error-200 bg-error-25 p-4 text-sm leading-4 text-error-600 before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)] md:col-span-full;
+  @apply flex items-center h-[--page-broadcastAlert-h] border-b border-b-error-200 bg-error-25 px-4 text-sm leading-4 text-error-600 before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)] md:col-span-full;
 }
 
 .Page-broadcastAlert a {
@@ -75,7 +75,7 @@
 }
 
 .Page-broadcastAlert-messages {
-  @apply me-auto overflow-y-hidden overflow-x-scroll;
+  @apply me-auto h-full py-4 overflow-y-hidden overflow-x-auto [scrollbar-width:thin];
 }
 
 .Page-broadcastAlert .pagination {
@@ -101,7 +101,7 @@
 }
 
 .Page-broadcast {
-  @apply max-h-[--page-broadcast-h] overflow-y-hidden overflow-x-scroll border-b border-b-warning-200 bg-warning-25 p-4 text-sm leading-4 text-warning-700 [--link-color:theme(colors.warning.800)] before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-warning-800 md:col-span-full;
+  @apply max-h-[--page-broadcast-h] overflow-y-hidden overflow-x-auto [scrollbar-width:thin] border-b border-b-warning-200 bg-warning-25 p-4 text-sm leading-4 text-warning-700 [--link-color:theme(colors.warning.800)] before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-warning-800 md:col-span-full;
 
   /*
     Submitting a form inside a broadcast (Ex: Stop scheduling)

package/src/legacy/tool-ui/src/ProseMirror.css

@@ -1,7 +1,7 @@
 .ProseMirror {
   --ProseMirror-numLines: 10;
 
-  @apply min-h-[calc(var(--ProseMirror-numLines)*theme(lineHeight.4))] whitespace-pre-wrap rounded-b-lg px-4 py-[var(--lineHeight-m)] focus:[box-shadow:none];
+  @apply min-h-[calc(var(--ProseMirror-numLines)*theme(lineHeight.4))] whitespace-pre-wrap rounded-b-lg px-4 py-[var(--lineHeight-m)] leading-[normal] focus:[box-shadow:none];
 }
 
 :where(.ProseMirror-fullscreen-container) {