breadcrumb-the-shire/web/css/components/app-details.css

@layer components {
  /* Detail page layout — aside panel, card sections, sticky titlebar integration. */
  .app-details-container > aside {
    padding-top: var(--app-spacing);
  }

  .app-details-container > section > form [data-tab-panel] {
    max-width: min(70ch, 100%);
  }

  .app-details-container > section > form [data-tab-panel-wide] {
    max-width: none;
  }

  .app-details-aside-actions {
    display: grid;
    gap: calc(var(--app-spacing) * 0.5);
  }

  .app-details-aside-actions form {
    margin: 0;
  }

  .app-details-aside-actions a[role="button"],
  .app-details-aside-actions button {
    width: 100%;
  }

  .user-avatar-block,
  .entity-avatar-block {
    --avatar-size: 96px;
    --avatar-ratio: 1 / 1;
    display: grid;
    gap: calc(var(--app-spacing) * 0.75);
    margin-bottom: calc(var(--app-spacing) * 1.25);
    width: var(--avatar-size);
    aspect-ratio: var(--avatar-ratio);
  }

  .user-avatar-image,
  .user-avatar-placeholder,
  .entity-avatar-image,
  .entity-avatar-placeholder {
    width: 100%;
    height: 100%;
    border: 1px solid var(--app-muted-border-color);
    background: var(--app-card-background-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    color: var(--app-muted-color);
  }

  .user-avatar-placeholder,
  .entity-avatar-placeholder {
    font-size: var(--text-2xl);
  }

  .user-avatar-image {
    object-fit: cover;
  }

  .entity-avatar-image {
    object-fit: contain;
    padding: 3px;
  }

  .avatar-round .user-avatar-image,
  .avatar-round .user-avatar-placeholder,
  .avatar-round .entity-avatar-image,
  .avatar-round .entity-avatar-placeholder {
    border-radius: 999px;
    aspect-ratio: 1;
  }

  .avatar-square .user-avatar-image,
  .avatar-square .user-avatar-placeholder,
  .avatar-square .entity-avatar-image,
  .avatar-square .entity-avatar-placeholder {
    border-radius: var(--app-border-radius);
  }

  .avatar-ratio-1-1 {
    --avatar-ratio: 1 / 1;
  }

  .avatar-ratio-3-2 {
    --avatar-ratio: 3 / 2;
  }

  .avatar-ratio-4-3 {
    --avatar-ratio: 4 / 3;
  }

  .avatar-ratio-16-9 {
    --avatar-ratio: 16 / 9;
  }

  .avatar-borderless .user-avatar-image,
  .avatar-borderless .user-avatar-placeholder,
  .avatar-borderless .entity-avatar-image,
  .avatar-borderless .entity-avatar-placeholder {
    border: none;
  }

  .avatar-size-auto {
    width: auto;
    aspect-ratio: auto;
  }

  .avatar-size-auto .user-avatar-image,
  .avatar-size-auto .user-avatar-placeholder,
  .avatar-size-auto .entity-avatar-image,
  .avatar-size-auto .entity-avatar-placeholder {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .app-details-container > section > * {
    padding-inline: calc(var(--app-spacing) * 2);
  }

  .app-details-container .app-details-titlebar {
    position: sticky;
    top: var(--app-topbar-height);
    z-index: 10;
    padding-block-start: calc(var(--app-spacing) * 2);
    background: var(--app-background-color);
  }

  @media (max-width: 768px) {
    .app-details-container > section > * {
      padding-inline: calc(var(--app-spacing) * 0);
    }
  }

  @media (min-width: 1024px) {
    .app-details-container:has(> aside) {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 300px);
      min-height: 82vh;
    }
    .app-details-container.is-aside-collapsed {
      grid-template-columns: minmax(0, 1fr);
    }
    .app-details-container.is-aside-collapsed > aside {
      display: none;
    }
    .app-details-container > aside {
      border-left: 1px solid var(--app-border);
      padding: calc(var(--app-spacing) * 2);
      border-top: none;
      min-height: 100vh;
    }
  }
}