open-consul/ui/packages/consul-ui/app/components/app-view/layout.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

/* layout */
%app-view-title {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title actions";
  position: relative;
  z-index: 5;
}
%app-view-title-left-container {
  grid-area: title;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  white-space: normal;
}
%app-view-title-left-container > :first-child {
  flex-basis: 100%;
}

%app-view-title-left-container > :not(:first-child) {
  margin-right: 8px;
}

%app-view-actions {
  grid-area: actions;
  align-self: end;
  display: flex;
  align-items: flex-start;
  margin-left: auto;
  margin-top: 9px;
}

/* units */
%app-view-title {
  padding-bottom: 1.4em;
}

/* content */
/* TODO: Think about an %app-form or similar */
%app-view-content form:not(.filter-bar) fieldset {
  padding-bottom: 0.3em;
  margin-bottom: 2em;
}