Toolbar enters vertical mode on iPad width while Gin remains horizontal, causing trays to stay visible and overlap admin pages

## Toolbar enters vertical mode on iPad width while Gin remains horizontal, causing trays to stay visible/overlay admin pages

### Problem

On iPad-sized viewports the Drupal toolbar can enter a conflicting state when Gin is configured to use the horizontal toolbar variant.

The page ends up with both:

gin--horizontal-toolbar
toolbar-vertical
toolbar-fixed

This causes toolbar trays to render incorrectly on admin pages. Trays can appear immediately, remain visible, overlap the page content, push the page content sideways, or be difficult/impossible to close. Submenu handling can also break.

### Environment

- Drupal core: 11.3.12
- Admin theme: Gin
- Toolbar variant: horizontal
- Viewport: iPad width, reproduced at 768px
- Browser: Safari on iPad, also visible in Edge responsive/mobile-sized testing
- Route type: admin routes

### Steps to Reproduce

1. Use Gin as the admin theme.
2. Configure Gin toolbar variant as horizontal.
3. Open an admin page at iPad width, for example 768px.
4. Open the toolbar item `Administration`.
5. Observe toolbar tray behavior.

### Actual Result

The page body has an inconsistent toolbar state:

gin--horizontal-toolbar toolbar-vertical toolbar-fixed

The toolbar/tray UI behaves incorrectly:

- toolbar trays may be visible without being intentionally opened
- more than one toolbar section/tray can be visible
- trays overlap the admin page content
- the vertical tray may push page content sideways
- the administration tray can be hard to close
- submenu controls may not work as expected

Example runtime state captured from the browser:

html=gin--dark-mode touchevents js
body=toolbar-icon-11 gin--horizontal-toolbar language_fi user-logged-in path-admin toolbar-vertical toolbar-fixed
vw=768 vh=909
toolbarState={"orientation":"vertical","hasActiveTab":false,"activeTabId":null,"isOriented":true,"isFixed":true}
activeTabID=null
trayVerticalLocked=null
ginExpanded=null

### Expected Result

Gin horizontal toolbar mode and Drupal toolbar orientation should not produce a conflicting state.

At iPad/tablet width, the toolbar should either:

- remain consistently horizontal, or
- switch to a vertical/mobile presentation that behaves correctly with Gin

In either case:

- trays should be hidden until opened
- only the selected tray should be visible
- tapping/clicking the toolbar item should reliably open/close the tray
- submenu controls should work
- the tray should not unexpectedly overlap or push the admin page in a broken layout

### Suspected Cause

Drupal core toolbar sets the orientation to `vertical` at the narrow breakpoint when no explicit orientation exists.

Relevant code:

// core/modules/toolbar/js/toolbar.js
// around lines 338-339

if (!mql.matches || !model.get('orientation')) {
  model.set({ orientation: 'vertical' }, { validate: true });
}

This happens in the `toolbar.narrow` media query handler.

Toolbar breakpoints:

# core/modules/toolbar/toolbar.breakpoints.yml

toolbar.narrow:
  mediaQuery: 'only screen and (min-width: 16.5em)'

toolbar.standard:
  mediaQuery: 'only screen and (min-width: 38.125em)'

toolbar.wide:
  mediaQuery: 'only screen and (min-width: 61em)'

At 768px, `toolbar.narrow` and `toolbar.standard` match, but `toolbar.wide` does not. Core therefore sets:

orientation = vertical
isFixed = true

The body classes are then updated here:

// core/modules/toolbar/js/views/ToolbarVisualView.js
// around lines 281-283

$('body')
  .toggleClass('toolbar-vertical', orientation === 'vertical')
  .toggleClass('toolbar-horizontal', orientation === 'horizontal');

Core CSS then applies vertical fixed tray behavior:

/* core/modules/toolbar/css/toolbar.module.css */
/* around lines 203-204 */

.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
  margin-inline-start: 15rem;
}

However, Gin still marks the page as using horizontal toolbar mode:

gin--horizontal-toolbar

Gin horizontal toolbar CSS applies its main fixed full-width horizontal toolbar rules only from `61em` upward:

/* themes/contrib/gin/dist/css/layout/horizontal_toolbar.css */
/* around line 189 */

@media (min-width: 61em) {
  .gin--horizontal-toolbar #toolbar-administration {
    position: fixed;
    width: 100%;
  }
}

This creates the conflicting runtime state:

gin--horizontal-toolbar + toolbar-vertical + toolbar-fixed

### Regression

This started after a Drupal core update. The same Gin theme/setup worked before the core update.

### Workaround Used Locally

A custom site module workaround was added on admin routes. It detects the conflicting Gin/iPad toolbar state and forces the toolbar tray behavior into a controlled vertical overlay mode.

This avoids modifying Gin or core, but it should not be necessary.

### Proposed Direction

Core and Gin should agree on toolbar orientation/variant behavior at tablet widths.

Possible fixes:

1. Core toolbar should not force `orientation: vertical` at tablet width when a theme/toolbar variant expects horizontal behavior.
2. Gin should explicitly handle the state where core sets `toolbar-vertical` while Gin is configured as `gin--horizontal-toolbar`.
3. Gin horizontal toolbar CSS/JS should include a tablet-width fallback for this conflicting state, or prevent the conflict by setting/locking the intended toolbar orientation.

The key issue is not only visual styling, but the inconsistent state between core toolbar orientation and Gin toolbar variant.