Style/fix alignment

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -1,95 +1,101 @@
-@if (hasPermissionToFilterByType) {
+<div class="d-flex justify-content-between">
   <div class="d-none d-lg-flex">
-    <mat-form-field appearance="outline" class="without-hint">
+    @if (hasPermissionToFilterByType) {
-      <mat-label i18n>Type</mat-label>
+      <mat-form-field appearance="outline" class="without-hint">
-      <mat-select multiple [formControl]="typesFilter">
+        <mat-label i18n>Type</mat-label>
-        @for (
+        <mat-select multiple [formControl]="typesFilter">
-          activityType of activityTypes | keyvalue;
+          @for (
-          track activityType.key
+            activityType of activityTypes | keyvalue;
-        ) {
+            track activityType.key
-          <mat-option [value]="activityType.key">
+          ) {
-            {{ activityType.value }}
+            <mat-option [value]="activityType.key">
-          </mat-option>
+              {{ activityType.value }}
-        }
+            </mat-option>
-      </mat-select>
+          }
-    </mat-form-field>
+        </mat-select>
+      </mat-form-field>
+    }
   </div>
-}
 
-@if (hasPermissionToCreateActivity) {
+  @if (hasPermissionToCreateActivity) {
-  <div class="d-flex justify-content-end">
+    <div class="d-flex justify-content-end">
-    <button
-      class="align-items-center d-flex"
-      mat-stroked-button
-      (click)="onImport()"
-    >
-      <ion-icon class="mr-2" name="cloud-upload-outline" />
-      <span><ng-container i18n>Import Activities</ng-container>...</span>
-    </button>
-    @if (hasPermissionToExportActivities) {
       <button
-        class="mx-1 no-min-width px-2"
+        class="align-items-center d-flex"
         mat-stroked-button
-        [matMenuTriggerFor]="activitiesMenu"
+        (click)="onImport()"
-        (click)="$event.stopPropagation()"
       >
-        <ion-icon name="ellipsis-vertical" />
+        <ion-icon class="mr-2" name="cloud-upload-outline" />
-      </button>
+        <span><ng-container i18n>Import Activities</ng-container>...</span>
-    }
-    <mat-menu #activitiesMenu="matMenu" class="no-max-width" xPosition="before">
-      <button
-        mat-menu-item
-        [disabled]="dataSource()?.data.length === 0"
-        (click)="onImportDividends()"
-      >
-        <span class="align-items-center d-flex">
-          <ion-icon class="mr-2" name="color-wand-outline" />
-          <span><ng-container i18n>Import Dividends</ng-container>...</span>
-        </span>
       </button>
       @if (hasPermissionToExportActivities) {
         <button
-          class="align-items-center d-flex"
+          class="mx-1 no-min-width px-2"
+          mat-stroked-button
+          [matMenuTriggerFor]="activitiesMenu"
+          (click)="$event.stopPropagation()"
+        >
+          <ion-icon name="ellipsis-vertical" />
+        </button>
+      }
+      <mat-menu
+        #activitiesMenu="matMenu"
+        class="no-max-width"
+        xPosition="before"
+      >
+        <button
           mat-menu-item
           [disabled]="dataSource()?.data.length === 0"
-          (click)="onExport()"
+          (click)="onImportDividends()"
         >
           <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="cloud-download-outline" />
+            <ion-icon class="mr-2" name="color-wand-outline" />
-            <span i18n>Export Activities</span>
+            <span><ng-container i18n>Import Dividends</ng-container>...</span>
           </span>
         </button>
-      }
+        @if (hasPermissionToExportActivities) {
-      @if (hasPermissionToExportActivities) {
+          <button
+            class="align-items-center d-flex"
+            mat-menu-item
+            [disabled]="dataSource()?.data.length === 0"
+            (click)="onExport()"
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="cloud-download-outline" />
+              <span i18n>Export Activities</span>
+            </span>
+          </button>
+        }
+        @if (hasPermissionToExportActivities) {
+          <button
+            class="align-items-center d-flex"
+            mat-menu-item
+            [disabled]="!hasDrafts"
+            (click)="onExportDrafts()"
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="calendar-clear-outline" />
+              <span i18n>Export Drafts as ICS</span>
+            </span>
+          </button>
+        }
+        <hr class="m-0" />
         <button
           class="align-items-center d-flex"
           mat-menu-item
-          [disabled]="!hasDrafts"
+          [disabled]="
-          (click)="onExportDrafts()"
+            dataSource()?.data.length === 0 || !hasPermissionToDeleteActivity
+          "
+          (click)="onDeleteActivities()"
         >
           <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="calendar-clear-outline" />
+            <ion-icon class="mr-2" name="trash-outline" />
-            <span i18n>Export Drafts as ICS</span>
+            <span i18n>Delete Activities</span>
           </span>
         </button>
-      }
+      </mat-menu>
-      <hr class="m-0" />
+    </div>
-      <button
+  }
-        class="align-items-center d-flex"
+</div>
-        mat-menu-item
-        [disabled]="
-          dataSource()?.data.length === 0 || !hasPermissionToDeleteActivity
-        "
-        (click)="onDeleteActivities()"
-      >
-        <span class="align-items-center d-flex">
-          <ion-icon class="mr-2" name="trash-outline" />
-          <span i18n>Delete Activities</span>
-        </span>
-      </button>
-    </mat-menu>
-  </div>
-}
 
 <div class="overflow-x-auto">
   <table