/**
 * @file
 * Core Navigation top bar fix for phones and tablets.
 *
 * Logged in, core's Navigation module shows a top bar with the page title,
 * its status badge and the Edit / more actions buttons. Its grid is
 * "1fr auto 1fr", so the middle column is as wide as the title, which can be
 * 40 characters before core's ellipsis applies. On a phone that pushes the
 * buttons past the right edge, and the browser shrinks the whole page to fit,
 * leaving a white strip down the right side.
 *
 * Below core's 64rem breakpoint, let the middle column shrink so the title
 * is cut off with an ellipsis and the buttons stay on screen.
 *
 * Core wraps its rules in :is(#extra-specificity-hack,
 * [data-drupal-admin-styles]), so these use the same wrapper plus .top-bar.
 */

@media (max-width: 63.99rem) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]).top-bar .top-bar__content {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  :is(#extra-specificity-hack, [data-drupal-admin-styles]).top-bar .top-bar__context,
  :is(#extra-specificity-hack, [data-drupal-admin-styles]).top-bar .top-bar__title {
    min-width: 0;
  }
}