fix(console): changes, project grant create, member add, org setup, project search autocomplete, grpc header url decoding (#303)

* mobile max-width container

* fix project search autocomplete

* remove changes error, add bottom label

* fix project grant, contributor add

console/src/app/app.component.html

@@ -59,7 +59,7 @@
                         <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
                     </a>
 
-                    <div class="divider"><span></span></div>
+                    <div *ngIf="authService.authenticationChanged | async" class="divider"><span></span></div>
 
                     <a *ngIf="iamreadwrite" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
                         <i class="icon las la-gem"></i>
@@ -71,7 +71,7 @@
                         <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
                     </a>
 
-                    <div class="divider"><span></span></div>
+                    <div *ngIf="showOrgSection" class="divider"><span></span></div>
 
                     <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
                         [routerLink]="[ '/projects']">
@@ -85,7 +85,7 @@
                         <span class="label">{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
                     </a>
 
-                    <div class="divider"><span></span></div>
+                    <div *ngIf="showProjectSection" class="divider"><span></span></div>
 
                     <a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']"
                         [routerLink]="[ '/users']" [routerLinkActiveOptions]="{ exact: true }">

console/src/app/modules/changes/changes.component.html

@@ -11,5 +11,5 @@
     <div class="sp-wrapper">
         <mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>
     </div>
-    <span class="err-container" *ngIf="errorMessage">{{errorMessage}}</span>
+    <span class="end-container" *ngIf="bottom">{{'CHANGES.BOTTOM' | translate}}</span>
 </div>

console/src/app/modules/changes/changes.component.scss

@@ -39,8 +39,8 @@
         justify-content: center;
     }
 
-    .err-container {
+    .end-container {
-        font-size: 14px;
+        font-size: 12px;
-        color: rgb(201,51,71);
+        color: #81868a;
     }
 }

console/src/app/modules/changes/changes.component.ts

@@ -19,7 +19,6 @@ export class ChangesComponent implements OnInit {
     @Input() public changeType: ChangeType = ChangeType.USER;
     @Input() public id: string = '';
     @Input() public sortDirectionAsc: boolean = true;
-    public errorMessage: string = '';
     public bottom: boolean = false;
 
     // Source data
@@ -118,7 +117,6 @@ export class ChangesComponent implements OnInit {
                 catchError(err => {
                     console.error(err);
                     this._loading.next(false);
-                    this.errorMessage = decodeURI(err.message);
                     this.bottom = true;
                     return of([]);
                 }),

console/src/app/modules/project-contributors/project-contributors.component.html

@@ -7,11 +7,15 @@
                 <ng-container *ngFor="let member of membersSubject | async">
                     <div (click)="showDetail()" class="avatar-circle"
                         matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
-                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                        <app-avatar
+                            *ngIf="member && (member.displayName || (member.firstName && member.lastName)); else thumbavatar"
                             class="avatar dontcloseonclick"
                             [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
                             [size]="32">
                         </app-avatar>
+                        <ng-template #thumbavatar>
+                            <i class="avatar las la-tools"></i>
+                        </ng-template>
                     </div>
                 </ng-container>
             </ng-container>

console/src/app/modules/project-contributors/project-contributors.component.ts

@@ -56,6 +56,7 @@ export class ProjectContributorsComponent implements OnInit {
                 finalize(() => this.loadingSubject.next(false)),
             ).subscribe(members => {
                 this.membersSubject.next(members);
+                console.log(members);
             });
         }
     }

console/src/app/modules/project-members/project-members-datasource.ts

@@ -42,6 +42,7 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
                 finalize(() => this.loadingSubject.next(false)),
             ).subscribe(members => {
                 this.membersSubject.next(members);
+                console.log(members);
             });
         }
     }

console/src/app/modules/project-members/project-members.component.html

@@ -60,6 +60,13 @@
                         </td>
                     </ng-container>
 
+
+                    <ng-container matColumnDef="userId">
+                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
+                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                            {{member.userId}} </td>
+                    </ng-container>
+
                     <ng-container matColumnDef="firstname">
                         <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
                         <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">

console/src/app/modules/project-members/project-members.component.ts

@@ -1,13 +1,15 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { tap } from 'rxjs/operators';
-import { ProjectMember, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
+import { ProjectMember, ProjectType, ProjectView, User } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { CreationType, MemberCreateDialogComponent } from '../add-member-dialog/member-create-dialog.component';
 import { ProjectMembersDataSource } from './project-members-datasource';
 
 @Component({
@@ -25,9 +27,11 @@ export class ProjectMembersComponent implements AfterViewInit {
     public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
 
     /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-    public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
+    public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
 
-    constructor(private projectService: ProjectService,
+    constructor(
+        private projectService: ProjectService,
+        private dialog: MatDialog,
         private toast: ToastService,
         private route: ActivatedRoute) {
         this.route.params.subscribe(params => {
@@ -88,33 +92,29 @@ export class ProjectMembersComponent implements AfterViewInit {
     }
 
     public openAddMember(): void {
+        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
+            data: {
+                creationType: CreationType.PROJECT_OWNED,
+                projectId: this.project.projectId,
+            },
+            width: '400px',
+        });
 
-        // TODO
+        dialogRef.afterClosed().subscribe(resp => {
-        // const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
+            if (resp) {
-        //     data: {
+                const users: User.AsObject[] = resp.users;
-        //         creationType: this.project.type ===
+                const roles: string[] = resp.roles;
-        //             ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED :
-        //             ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : undefined,
-        //         projectId: this.project.id,
-        //     },
-        //     width: '400px',
-        // });
 
-        // dialogRef.afterClosed().subscribe(resp => {
+                if (users && users.length && roles && roles.length) {
-        //     if (resp) {
+                    Promise.all(users.map(user => {
-        //         const users: User.AsObject[] = resp.users;
+                        return this.projectService.AddProjectMember(this.project.projectId, user.id, roles);
-        //         const roles: string[] = resp.roles;
+                    })).then(() => {
-
+                        this.toast.showError('members added');
-        //         if (users && users.length && roles && roles.length) {
+                    }).catch(error => {
-        //             Promise.all(users.map(user => {
+                        this.toast.showError(error.message);
-        //                 return this.projectService.AddProjectMember(this.project.id, user.id, roles);
+                    });
-        //             })).then(() => {
+                }
-        //                 this.toast.showError('members added');
+            }
-        //             }).catch(error => {
+        });
-        //                 this.toast.showError(error.message);
-        //             });
-        //         }
-        //     }
-        // });
     }
 }

console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.html

@@ -7,7 +7,7 @@
         <mat-chip-list *ngIf="!singleOutput" #chipList aria-label="name selection">
             <mat-chip class="chip" *ngFor="let selectedProject of projects" [selectable]="selectable"
                 [removable]="removable" (removed)="remove(selectedProject)">
-                {{selectedProject.name}}
+                {{selectedProject?.name ? selectedProject.name + ' (owned)' : selectedProject?.projectName ? selectedProject.projectName + ' (granted)': ''}}
                 <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
             </mat-chip>
             <input placeholder="{{'PROJECT.NAME' | translate}}" #nameInput [formControl]="myControl"
@@ -21,7 +21,7 @@
                 <mat-spinner diameter="30"></mat-spinner>
             </mat-option>
             <mat-option *ngFor="let project of filteredProjects" [value]="project">
-                {{project.name}}
+                {{project?.name ? project.name + ' (owned)' : project?.projectName ? project.projectName + ' (granted)': ''}}
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>

console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts

@@ -3,13 +3,13 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@
 import { FormControl } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { from } from 'rxjs';
+import { from, merge } from 'rxjs';
 import { debounceTime, switchMap, tap } from 'rxjs/operators';
 import {
-    Project,
     ProjectGrantView,
     ProjectSearchKey,
     ProjectSearchQuery,
+    ProjectView,
     SearchMethod,
 } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -26,14 +26,18 @@ export class SearchProjectAutocompleteComponent {
     public separatorKeysCodes: number[] = [ENTER, COMMA];
     public myControl: FormControl = new FormControl();
     public names: string[] = [];
-    public projects: Array<ProjectGrantView.AsObject> = [];
+    public projects: Array<ProjectGrantView.AsObject | ProjectView.AsObject | any> = [];
-    public filteredProjects: Array<ProjectGrantView.AsObject> = [];
+    public filteredProjects: Array<ProjectGrantView.AsObject | ProjectView.AsObject | any> = [];
     public isLoading: boolean = false;
     @ViewChild('nameInput') public nameInput!: ElementRef<HTMLInputElement>;
     @ViewChild('auto') public matAutocomplete!: MatAutocomplete;
     @Input() public singleOutput: boolean = false;
-    @Output() public selectionChanged: EventEmitter<ProjectGrantView.AsObject[] | ProjectGrantView.AsObject>
+    @Output() public selectionChanged: EventEmitter<
-        = new EventEmitter();
+        ProjectGrantView.AsObject[]
+        | ProjectGrantView.AsObject
+        | ProjectView.AsObject
+        | ProjectView.AsObject[]
+    > = new EventEmitter();
     constructor(private projectService: ProjectService) {
         this.myControl.valueChanges
             .pipe(
@@ -44,17 +48,22 @@ export class SearchProjectAutocompleteComponent {
                     query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
                     query.setValue(value);
                     query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
-                    return from(this.projectService.SearchGrantedProjects(10, 0, [query]));
+                    return merge(
+                        from(this.projectService.SearchGrantedProjects(10, 0, [query])),
+                        from(this.projectService.SearchProjects(10, 0, [query])),
+                    );
                 }),
                 // finalize(() => this.isLoading = false),
             ).subscribe((projects) => {
                 this.isLoading = false;
                 this.filteredProjects = projects.toObject().resultList;
+                console.log(this.filteredProjects);
             });
     }
 
-    public displayFn(project?: Project.AsObject): string | undefined {
+    public displayFn(project?: any): string | undefined {
-        return project ? `${project.name}` : undefined;
+        return (project && project.projectName) ? `${project.projectName}` :
+            (project && project.name) ? `${project.name}` : undefined;
     }
 
     public add(event: MatChipInputEvent): void {
@@ -64,8 +73,10 @@ export class SearchProjectAutocompleteComponent {
 
             if ((value || '').trim()) {
                 const index = this.filteredProjects.findIndex((project) => {
-                    if (project.projectName) {
+                    if (project?.projectName) {
                         return project.projectName === value;
+                    } else if (project?.name) {
+                        return project.name === value;
                     }
                 });
                 if (index > -1) {
@@ -92,22 +103,19 @@ export class SearchProjectAutocompleteComponent {
     }
 
     public selected(event: MatAutocompleteSelectedEvent): void {
-        const index = this.filteredProjects.findIndex((project) => project === event.option.value);
+        console.log(event.option.value);
-        if (index !== -1) {
+        if (this.singleOutput) {
-            if (this.singleOutput) {
+            this.selectionChanged.emit(event.option.value);
-                this.selectionChanged.emit(this.filteredProjects[index]);
+        } else {
+            if (this.projects && this.projects.length > 0) {
+                this.projects.push(event.option.value);
             } else {
-                if (this.projects && this.projects.length > 0) {
+                this.projects = [event.option.value];
-                    this.projects.push(this.filteredProjects[index]);
-                } else {
-                    this.projects = [this.filteredProjects[index]];
-                }
-                this.selectionChanged.emit(this.projects);
-
-                this.nameInput.nativeElement.value = '';
-                this.myControl.setValue(null);
             }
+            this.selectionChanged.emit(this.projects);
 
+            this.nameInput.nativeElement.value = '';
+            this.myControl.setValue(null);
         }
     }
 }

console/src/app/pages/orgs/org-create/org-create.component.html

@@ -164,7 +164,7 @@
 
                 </div>
                 <div class="btn-container">
-                    <button color="accent" class="continue-button" [disabled]="orgForm.invalid || userForm.invalid"
+                    <button color="primary" class="continue-button" [disabled]="orgForm.invalid || userForm.invalid"
                         type="submit" mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
                 </div>
             </form>

console/src/app/pages/orgs/org-create/org-create.component.ts

@@ -68,7 +68,7 @@ export class OrgCreateComponent {
 
         this.orgForm = this.fb.group({
             name: ['', [Validators.required]],
-            domain: ['', [Validators.required]],
+            domain: [''],
         });
         this.orgService.GetPasswordComplexityPolicy().then(data => {
             this.policy = data.toObject();

console/src/app/pages/orgs/org-grid/org-grid.component.html

@@ -37,7 +37,7 @@
         </div>
 
         <ng-template appHasRole [appHasRole]="['iam.write']">
-            <div class="card add-org-button" [routerLink]="[ '/orgs/create' ]">
+            <div class="card add-org-button" [routerLink]="[ '/org/create' ]">
                 <mat-icon class="icon">add</mat-icon>
                 <span>Add new organization</span>
             </div>

console/src/app/pages/project-grant-create/project-grant-create.component.html

@@ -11,7 +11,7 @@
     <ng-container *ngIf="currentCreateStep === 1">
         <h1>{{'PROJECT.GRANT.CREATE.SEL_ORG' | translate}}</h1>
 
-        <form (ngSubmit)="searchOrg(domain)">
+        <form (ngSubmit)="searchOrg(domain.value)">
             <mat-form-field class="org-domain">
                 <mat-label>{{'PROJECT.GRANT.CREATE.SEL_ORG' | translate}}</mat-label>
                 <input #domain matInput />

console/src/app/pages/project-grant-create/project-grant-create.component.ts

@@ -42,15 +42,19 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
         this.routeSubscription.unsubscribe();
     }
 
-    public searchOrg(domain: any): void {
+    public searchOrg(domain: string): void {
-        this.orgService.getOrgByDomainGlobal(domain.value).then((ret) => {
+        console.log(domain);
+        this.orgService.getOrgByDomainGlobal(domain).then((ret) => {
             const tmp = ret.toObject();
+            console.log(ret.toObject());
             this.authService.GetActiveOrg().then((org) => {
+                console.log(org);
                 if (tmp !== org) {
                     this.org = tmp;
                 }
             });
             this.org = ret.toObject();
+            console.log(this.org);
         }).catch(error => {
             this.toast.showError(error.message);
         });

console/src/app/pages/user-create/user-create.component.html

@@ -90,7 +90,7 @@
                             {{ 'USER.VALIDATION.REQUIRED' | translate }}
                         </mat-error>
                     </mat-form-field>
-                    <mat-form-field class="formfield">
+                    <!-- <mat-form-field class="formfield">
                         <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
                         <input matInput formControlName="streetAddress" />
                         <mat-error *ngIf="streetAddress?.invalid && streetAddress?.errors?.required">
@@ -124,7 +124,7 @@
                         <mat-error *ngIf="country?.invalid && country?.errors?.required">
                             {{ 'USER.VALIDATION.REQUIRED' | translate }}
                         </mat-error>
-                    </mat-form-field>
+                    </mat-form-field> -->
                 </div>
                 <div class="btn-container">
                     <button color="accent" [disabled]="userForm.invalid" type="submit"

console/src/app/pages/user-grant-create/user-grant-create.component.ts

@@ -3,7 +3,7 @@ import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { Org } from 'src/app/proto/generated/auth_pb';
-import { Project, ProjectRole, UserGrant } from 'src/app/proto/generated/management_pb';
+import { ProjectGrantView, ProjectRole, ProjectView, UserGrant } from 'src/app/proto/generated/management_pb';
 import { AuthService } from 'src/app/services/auth.service';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -56,8 +56,8 @@ export class UserGrantCreateComponent implements OnDestroy {
         });
     }
 
-    public selectProject(project: Project.AsObject): void {
+    public selectProject(project: ProjectView.AsObject | ProjectGrantView.AsObject | any): void {
-        this.projectId = project.id;
+        this.projectId = project.id ? project.id : project.projectId ? project.projectId : undefined;
     }
 
     public selectRoles(roles: ProjectRole.AsObject[]): void {

console/src/app/proto/generated/management_pb.d.ts

@@ -52,6 +52,9 @@ export class ChangeRequest extends jspb.Message {
   getSequenceOffset(): number;
   setSequenceOffset(value: number): void;
 
+  getAsc(): boolean;
+  setAsc(value: boolean): void;
+
   serializeBinary(): Uint8Array;
   toObject(includeInstance?: boolean): ChangeRequest.AsObject;
   static toObject(includeInstance: boolean, msg: ChangeRequest): ChangeRequest.AsObject;
@@ -66,6 +69,7 @@ export namespace ChangeRequest {
     secId: string,
     limit: number,
     sequenceOffset: number,
+    asc: boolean,
   }
 }
 

console/src/app/proto/generated/management_pb.js

@@ -3377,7 +3377,8 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.toObject = function(includeIn
     id: jspb.Message.getFieldWithDefault(msg, 1, ""),
     secId: jspb.Message.getFieldWithDefault(msg, 2, ""),
     limit: jspb.Message.getFieldWithDefault(msg, 3, 0),
-    sequenceOffset: jspb.Message.getFieldWithDefault(msg, 4, 0)
+    sequenceOffset: jspb.Message.getFieldWithDefault(msg, 4, 0),
+    asc: jspb.Message.getFieldWithDefault(msg, 5, false)
   };
 
   if (includeInstance) {
@@ -3430,6 +3431,10 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.deserializeBinaryFromReader =
       var value = /** @type {number} */ (reader.readUint64());
       msg.setSequenceOffset(value);
       break;
+    case 5:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setAsc(value);
+      break;
     default:
       reader.skipField();
       break;
@@ -3487,6 +3492,13 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.serializeBinaryToWriter = fun
       f
     );
   }
+  f = message.getAsc();
+  if (f) {
+    writer.writeBool(
+      5,
+      f
+    );
+  }
 };
 
 
@@ -3550,6 +3562,23 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.prototype.setSequenceOffset =
 };
 
 
+/**
+ * optional bool asc = 5;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.caos.zitadel.management.api.v1.ChangeRequest.prototype.getAsc = function() {
+  return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 5, false));
+};
+
+
+/** @param {boolean} value */
+proto.caos.zitadel.management.api.v1.ChangeRequest.prototype.setAsc = function(value) {
+  jspb.Message.setProto3BooleanField(this, 5, value);
+};
+
+
 
 /**
  * List of repeated fields within this message type.

console/src/app/services/grpc-org.interceptor.ts

@@ -21,10 +21,6 @@ export class GrpcOrgInterceptor implements GrpcInterceptor {
         if (!metadata[orgKey] && org) {
             metadata[orgKey] = org.id ?? '';
         }
-
-        // metadata['x-zitadel-login'] = 'true';
-        // metadata['x-zitadel-userid'] = '58922557365027097';
-        // metadata['x-zitadel-orgid'] = '58922556878487833';
         return await next.handle(req, metadata);
     }
 }

console/src/app/services/org.service.ts

@@ -6,6 +6,7 @@ import { ManagementServicePromiseClient } from '../proto/generated/management_gr
 import {
     AddOrgDomainRequest,
     AddOrgMemberRequest,
+    Domain,
     Iam,
     Org,
     OrgDomain,
@@ -123,7 +124,7 @@ export class OrgService {
     }
 
     public async getOrgByDomainGlobal(domain: string): Promise<Org> {
-        const req = new OrgDomain();
+        const req = new Domain();
         req.setDomain(domain);
         return await this.request(
             c => c.getOrgByDomainGlobal,

console/src/app/services/toast.service.ts

@@ -12,7 +12,7 @@ export class ToastService {
     }
 
     public showError(message: string): void {
-        this.showMessage(message, 'close');
+        this.showMessage(decodeURI(message), 'close');
     }
 
     private showMessage(message: string, action: string): void {

console/src/assets/environment.json

@@ -3,5 +3,5 @@
     "mgmtServiceUrl": "https://api.zitadel.dev",
     "adminServiceUrl":"https://api.zitadel.dev",
     "issuer": "https://issuer.zitadel.dev",
-    "clientid": "60073514127912158@zitadel"
+    "clientid": "61542534056307917@zitadel"
 }

console/src/assets/i18n/de.json

@@ -344,7 +344,8 @@
             "FIRSTNAME": "Vorname",
             "LASTNAME": "Nachname",
             "EMAIL": "Email",
-            "ROLES": "Rollen"
+            "ROLES": "Rollen",
+            "USERID":"User Id"
         },
         "GRANT": {
             "TITLE": "Grants",
@@ -503,6 +504,7 @@
     },
     "CHANGES": {
         "LISTTITLE":"Letzte Änderungen",
+        "BOTTOM":"Ende",
         "ORG": {
             "TITLE":"Aktivität",
             "DESCRIPTION":"Hier sehen Sie die letzten Vorkommnisse die die Organisation betreffen"

console/src/assets/i18n/en.json

@@ -345,7 +345,8 @@
             "FIRSTNAME": "Firstname",
             "LASTNAME": "Lastname",
             "EMAIL": "Email",
-            "ROLES": "Roles"
+            "ROLES": "Roles",
+            "USERID":"User Id"
         },
         "GRANT": {
             "TITLE": "Grants",
@@ -504,6 +505,7 @@
     },
     "CHANGES": {
         "LISTTITLE":"Last Changes",
+        "BOTTOM":"Bottom",
         "ORG": {
             "TITLE":"Activity",
             "DESCRIPTION":"Here you can see the latest events that have affected an organization change"

console/src/styles.scss

@@ -188,26 +188,35 @@ body {
     "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
+
 .max-width-container {
-  max-width: 1350px;
+    max-width: 1350px;
-  padding: 0 1.5rem;
-  padding-top: 4rem;
-  padding-left: 4rem;
-
-  @media only screen and (min-width: 1024px) {
-    max-width: 1120px;
-  }
-
-  @media only screen and (min-width: 899px) {
-    max-width: 899px;
-  }
-}
-
-.enlarged-container {
     padding: 0 1.5rem;
     padding-top: 4rem;
     padding-left: 4rem;
-}
+  
+    @media only screen and (min-width: 1024px) {
+      max-width: 1120px;
+    }
+  
+    @media only screen and (min-width: 899px) {
+      max-width: 899px;
+    }
+  
+    @media only screen and (max-width: 500px) {
+      padding-left: 1.5rem;
+    }
+  }
+  
+  .enlarged-container {
+      padding: 0 1.5rem;
+      padding-top: 4rem;
+      padding-left: 4rem;
+  
+      @media only screen and (max-width: 500px) {
+          padding-left: 1.5rem;
+      }
+  }
 
 .mat-dialog-container {
   border-radius: 0.5rem;