breadcrumb-the-shire/web/css/components/app-list-toolbar.css

@layer components {
  /* List toolbar — page-size selector, filter toggle, and search controls above grids. */
  .app-list-toolbar {
    --app-list-toolbar-gap: 10px;
    --app-list-toolbar-padding-x: 10px;
    --app-list-toolbar-padding-y: 6px;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--app-list-toolbar-gap);
    margin-bottom: var(--app-spacing);
  }

  .app-list-toolbar > * {
    margin: 0;
    width: auto;
    font-size: var(--text-sm);
    height: auto;
  }

  .app-list-toolbar
    :is(
      .app-field,
      label,
      button,
      [role="button"],
      input,
      select,
      .multi-select
    ) {
    margin: 0;
    width: auto;
  }

  .app-list-toolbar :is(button, [role="button"], input, select) {
    --app-form-element-spacing-horizontal: var(--app-list-toolbar-padding-x);
    --app-form-element-spacing-vertical: var(--app-list-toolbar-padding-y);
    font-size: var(--text-sm);
    min-height: calc(var(--app-list-toolbar-padding-y) * 2 + 1.4em);
  }

  .app-list-toolbar input[type=search],
  .app-list-toolbar input[type=text],
  .app-list-toolbar > button,
  .app-list-toolbar > [role="button"] {
    padding: var(--app-list-toolbar-padding-y) var(--app-list-toolbar-padding-x);
    height: auto;
  }

  .app-list-toolbar
    input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    ):is(
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"]
    ) {
    width: auto;
  }

  .app-list-toolbar > label > span,
  .app-list-toolbar > .app-field > span {
    display: block;
    font-size: var(--text-xs);
    margin-bottom: 2px;
  }

  .app-list-toolbar .app-grid-page-size {
    margin-inline-start: auto;
  }

  .app-list-toolbar .app-grid-page-size select {
    min-width: 84px;
  }

  .app-list-toolbar .multi-select {
    width: 200px;
  }

  .app-list-toolbar
    .multi-select
    .multi-select-header
    .multi-select-header-placeholder {
    font-size: var(--text-sm);
  }

  .app-list-toolbar .multi-select .multi-select-header,
  .app-list-toolbar .multi-select .multi-select-option,
  .app-list-toolbar .multi-select .multi-select-all {
    min-height: unset;
    padding-left: 5px;
  }

  .app-list-toolbar span.multi-select-header-option {
    background: transparent;
    border: 0;
    padding: 0 0 0 3px;
    font-size: var(--text-xs);
  }

  @media (max-width: 768px) {
    .app-list-toolbar .app-grid-page-size {
      margin-inline-start: 0;
    }
  }

  /* xs — only the "wide" controls stack full-width so they don't overflow the
     grid; compact controls (page-size, small buttons) keep their natural width. */
  @media (max-width: 576px) {
    .app-list-toolbar {
      width: 100%;
    }

    .app-list-toolbar > .multi-select,
    .app-list-toolbar > label:has(input[type="search"]),
    .app-list-toolbar > label:has(input[type="text"]),
    .app-list-toolbar > .app-field:has(input[type="search"]),
    .app-list-toolbar > .app-field:has(input[type="text"]),
    .app-list-toolbar > .app-field:has(textarea) {
      width: 100%;
    }

    .app-list-toolbar > .multi-select .multi-select-header {
      width: 100%;
    }

    .app-list-toolbar > :is(.app-field, label):has(input[type="search"]) input,
    .app-list-toolbar > :is(.app-field, label):has(input[type="text"]) input,
    .app-list-toolbar > .app-field:has(textarea) textarea {
      width: 100%;
    }
  }
}