tranga-website/Website/styles/notificationConnector.css

.NotificationConnectorItem{
    position: relative;
    display: grid;
    grid-template-columns: 40% calc(60% - 10px);
    grid-template-rows: 30px auto auto 30px;
    column-gap: 4px;
    row-gap: 4px;
    grid-template-areas:
        "name name"
        "url explanation "
        "headers body"
        "footer footer";
    align-items: center;
}

.NotificationConnectorItem p{
    margin: 0;
}

.NotificationConnectorItem-Name{
    grid-area: name;
    justify-self: flex-start;
    width: fit-content;
}

.NotificationConnectorItem-Name::before {
    content: "Connector-Name";
    position: absolute;
    display: block;
}

.NotificationConnectorItem-Url{
    grid-area: url;
}

.NotificationConnectorItem-Body{
    grid-area: body;
    width: calc(100% - 2px);
    height: max-content;
    min-height: 100%;
    padding: 0;
    margin: 0;
    resize: vertical;
}

.NotificationConnectorItem-Explanation{
    grid-area: explanation;
    align-self: flex-end;
}

.NotificationConnectorItem-Priority {
    grid-area: explanation;
}

.NotificationConnectorItem-Ident {
    grid-area: body;
}

.NotificationConnectorItem-Headers{
    grid-area: headers;
    justify-self: flex-end;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
}
.NotificationConnectorItem-Header {
    display: flex;
    flex-direction: row;
}

.NotificationConnectorItem-Header > input {
    width: 48%;
}

.NotificationConnectorItem-Save{
    grid-area: footer;
    justify-self: flex-end;
}