DigitalData.StaffDBServer/ClientApp/staff-db-ui/src/app/modules/employee/employee-detail/employee-content/employee-content.component.scss

.employeeDetailsContent {
  // z-index: 10;
  // position: relative; //otherwise z-index is not working
  padding: 0 0 0 0; // no extra padding -> padding is calculated in the child comp
  margin: 0; // see above
  overflow: hidden; // overflow hidden => all "to big" child components are hidden
  display: grid; // we define a grid
  width: 100%; // 100 % view width (hardware screen)
  height: 100%; // 100% view height
  grid-column-gap: 8px;
  grid-template-columns: repeat(2, minmax(1px, 1fr)); // column relationship
  grid-template-rows: repeat(7, 42px); // auto auto auto auto auto auto auto auto auto; //  row relationships
  grid-template-areas:
    "input-employeeno input-title"
    "input-salutation input-position"
    "input-firstname input-rang"
    "input-lastname input-mobilephoneno"
    "input-shortname input-phoneno"
    "input-loginname input-mandant"
    "input-email input-isActive "
   ;
}

.input-isActive {

  margin-top: 12px;
grid-area: input-isActive;
}
.input-mandant {
  grid-area: input-mandant;
}

.input-employeeno {
  grid-area: input-employeeno;
}

.input-firstname {
  grid-area: input-firstname;
}

.input-lastname {
  grid-area: input-lastname;
}

.input-shortname {
  grid-area: input-shortname;
}

.input-loginname {
  grid-area: input-loginname;
}

.input-email {
  grid-area: input-email;
}

.input-salutation {
  grid-area: input-salutation;
}

.input-title {
  grid-area: input-title;
}

.input-position {
  grid-area: input-position;
}

.input-rang {
  grid-area: input-rang;
}

.input-email {
  grid-area: input-email;
}

.input-mobilephoneno {
  grid-area: input-mobilephoneno;
}

.input-phoneno {
  grid-area: input-phoneno;
}

.check-box {
  margin-top: 13px;
}

.card {
  padding: 12px;
  margin: 2px 2px 2px 2px;
}

.abstand {
  margin-right: 1px !important;
}