87968: Fix spacing issues via custom CSS

2025-10-07 10:04:11 +00:00 · 2022-04-08 13:48:45 +02:00
parent 042a0dd389
commit 3f340c18f2
42 changed files with 145 additions and 127 deletions
--- a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
+++ b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
@@ -1,28 +1,30 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
-  <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
-</a>
+<div class="space-children-mr my-1">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
+    <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
+  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary my-1 private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
    <i class="fa fa-eye-slash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-private" | translate}}</span>
-</a>
+  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary my-1 public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
    <i class="fa fa-eye"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-public" | translate}}</span>
-</a>
+  </a>

-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
-  <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
+    <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
+  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t my-1 withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
-  <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
+    <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
+  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning my-1 reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
-  <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
+    <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
+  </a>

-<a [ngClass]="{'btn-sm': small}" class="btn btn-danger my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-danger delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
    <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.delete" | translate}}</span>
-</a>
+  </a>
+</div>

--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html
@@ -1,7 +1,8 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.workflow.item.delete' | translate">
+<div class="space-children-mr">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.workflow.item.delete' | translate">
    <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.delete" | translate}}</span>
-</a>
-
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 send-back-link" [routerLink]="[getSendBackRoute()]" [title]="'admin.workflow.item.send-back' | translate">
+  </a>
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 send-back-link" [routerLink]="[getSendBackRoute()]" [title]="'admin.workflow.item.send-back' | translate">
    <i class="fa fa-hand-point-left"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.send-back" | translate}}</span>
-</a>
+  </a>
+</div>
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -34,7 +34,7 @@
                          [title]="'collection.page.news'">
                  </ds-comcol-page-content>
                </header>
-                <div class="pl-2">
+                <div class="pl-2 space-children-mr">
                  <ds-dso-page-edit-button *ngIf="isCollectionAdmin$ | async"  [pageRoute]="collectionPageRoute$ | async" [dso]="collection" [tooltipMsg]="'collection.page.edit'"></ds-dso-page-edit-button>
                </div>
              </div>
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
@@ -5,11 +5,11 @@
                <h2 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h2>
                <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dso.name } }}</p>
                <div class="form-group row">
-                  <div class="col text-right">
+                  <div class="col text-right space-children-mr">
                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                      <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                    </button>
-                    <button class="btn btn-danger mr-2" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
                      <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
                      <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
                    </button>
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,6 +1,6 @@
 <div class="container-fluid mb-2" *ngVar="(itemTemplateRD$ | async) as itemTemplateRD">
  <label>{{ 'collection.edit.template.label' | translate}}</label>
-  <div class="button-row">
+  <div class="button-row space-children-mr">
    <button *ngIf="!itemTemplateRD?.payload" class="btn btn-success" (click)="addItemTemplate()">
      <i class="fas fa-plus"></i>
      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.add-button" | translate}}</span>
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
@@ -1,5 +1,5 @@
 <div *ngVar="(contentSource$ |async) as contentSource">
-    <div class="container-fluid" *ngIf="shouldShow">
+    <div class="container-fluid space-children-mr" *ngIf="shouldShow">
        <h4>{{ 'collection.source.controls.head' | translate }}</h4>
        <div>
            <span class="font-weight-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <div class="d-inline-block float-right">
+    <div class="d-inline-block float-right space-children-mr">
        <button class=" btn btn-danger" *ngIf="!(isReinstatable() | async)"
                [disabled]="!(hasChanges() | async)"
                (click)="discard()"><i
@@ -43,7 +43,7 @@
 <div class="container mt-2" *ngIf="(contentSource?.harvestType !== harvestTypeNone)">
    <div class="row">
        <div class="col-12">
-            <div class="d-inline-block float-right ml-1">
+            <div class="d-inline-block float-right ml-1 space-children-mr">
                <button class=" btn btn-danger" *ngIf="!(isReinstatable() | async)"
                        [disabled]="!(hasChanges() | async)"
                        (click)="discard()"><i
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -20,7 +20,7 @@
            [title]="'community.page.news'">
          </ds-comcol-page-content>
        </header>
-        <div class="pl-2">
+        <div class="pl-2 space-children-mr">
          <ds-dso-page-edit-button *ngIf="isCommunityAdmin$ | async" [pageRoute]="communityPageRoute$ | async" [dso]="communityPayload" [tooltipMsg]="'community.page.edit'"></ds-dso-page-edit-button>
        </div>
      </div>
--- a/src/app/community-page/delete-community-page/delete-community-page.component.html
+++ b/src/app/community-page/delete-community-page/delete-community-page.component.html
@@ -5,11 +5,11 @@
                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
                <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dso.name } }}</p>
                <div class="form-group row">
-                    <div class="col text-right">
+                    <div class="col text-right space-children-mr">
                        <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                            <i class="fas fa-times"></i> {{'community.delete.cancel' | translate}}
                        </button>
-                        <button class="btn btn-danger mr-2" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                        <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
                            <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'community.delete.processing' | translate}}</span>
                            <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'community.delete.confirm' | translate}}</span>
                        </button>
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -2,7 +2,7 @@
  <h2 class="item-page-title-field mr-auto">
    {{'journalissue.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'journalissue.page.edit'"></ds-dso-page-edit-button>
  </div>
 </div>
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -2,7 +2,7 @@
  <h2 class="item-page-title-field mr-auto">
    {{'journalvolume.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'journalvolume.page.edit'"></ds-dso-page-edit-button>
  </div>
 </div>
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -2,7 +2,7 @@
  <h2 class="item-page-title-field mr-auto">
    {{'journal.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'journal.page.edit'"></ds-dso-page-edit-button>
  </div>
 </div>
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -2,7 +2,7 @@
  <h2 class="item-page-title-field mr-auto">
    {{'orgunit.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['organization.legalName'])"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'orgunit.page.edit'"></ds-dso-page-edit-button>
  </div>
 </div>
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -2,7 +2,7 @@
  <h2 class="item-page-title-field mr-auto">
    {{'person.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="[object?.firstMetadata('person.familyName'), object?.firstMetadata('person.givenName')]" [separator]="', '"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'person.page.edit'"></ds-dso-page-edit-button>
  </div>
 </div>
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -2,7 +2,7 @@
  <h2 class="item-page-title-field mr-auto">
    {{'project.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'project.page.edit'"></ds-dso-page-edit-button>
  </div>
 </div>
--- a/src/app/item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -25,7 +25,7 @@
                    </div>
                    <div class="button-row bottom">
                      <div class="text-right">
-                        <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary mr-1"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
+                        <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
                      </div>
                    </div>
                </div>
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -1,16 +1,16 @@
 <div class="item-bitstreams" *ngVar="(bundles$ | async) as bundles">
-  <div class="button-row top d-flex mt-2">
+  <div class="button-row top d-flex mt-2 space-children-mr">
    <button class="mr-auto btn btn-success"
            [routerLink]="[itemPageRoute, 'bitstreams', 'new']"><i
            class="fas fa-upload"></i>
      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.upload-button" | translate}}</span>
    </button>
-    <button class="btn btn-warning mr-1" *ngIf="isReinstatable() | async"
+    <button class="btn btn-warning" *ngIf="isReinstatable() | async"
            (click)="reinstate()"><i
            class="fas fa-undo-alt"></i>
      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
    </button>
-    <button class="btn btn-primary mr-1" [disabled]="!(hasChanges() | async) || submitting"
+    <button class="btn btn-primary" [disabled]="!(hasChanges() | async) || submitting"
            (click)="submit()"><i
            class="fas fa-save"></i>
      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
@@ -47,7 +47,7 @@
  <ds-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-loading>

  <div class="button-row bottom">
-    <div class="mt-4 float-right">
+    <div class="mt-4 float-right space-children-mr ml-gap">
      <button class="btn btn-warning" *ngIf="isReinstatable() | async"
              (click)="reinstate()"><i
        class="fas fa-undo-alt"></i>
--- a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
+++ b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
@@ -86,12 +86,14 @@

            </ng-container>

-            <button (click)="performAction()"
-                    class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
-            </button>
-            <button [routerLink]="[itemPageRoute, 'edit']" class="btn btn-outline-secondary cancel">
+            <div class="space-children-mr">
+              <button (click)="performAction()"
+                      class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
+              </button>
+              <button [routerLink]="[itemPageRoute, 'edit']" class="btn btn-outline-secondary cancel">
                {{cancelMessage| translate}}
-            </button>
+              </button>
+            </div>

        </div>
    </div>
--- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
+++ b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
@@ -1,5 +1,5 @@
 <div class="item-metadata">
-  <div class="button-row top d-flex mb-2">
+  <div class="button-row top d-flex mb-2 space-children-mr">
    <button class="mr-auto btn btn-success"
            (click)="add()"><i
      class="fas fa-plus"></i>
@@ -50,12 +50,12 @@
    <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
  </div>
  <div class="button-row bottom">
-    <div class="mt-2 float-right">
+    <div class="mt-2 float-right space-children-mr ml-gap">
      <button class="btn btn-warning" *ngIf="isReinstatable() | async"
              (click)="reinstate()"><i
        class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
      </button>
-      <button class="btn btn-primary mr-0" [disabled]="!(hasChanges() | async)"
+      <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
              (click)="submit()"><i
        class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
      </button>
--- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss
+++ b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss
@@ -1,6 +1,6 @@
 .button-row {
    .btn {
-        margin-right: calc(0.5 * var(--bs-spacer));
+        margin-right: var(--ds-gap);

        &:last-child {
            margin-right: 0;
--- a/src/app/item-page/edit-item-page/item-move/item-move.component.html
+++ b/src/app/item-page/edit-item-page/item-move/item-move.component.html
@@ -31,15 +31,15 @@
            </div>

          <div class="button-row bottom">
-            <div class="float-right">
+            <div class="float-right space-children-mr">
              <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
              </button>
-              <button class="btn btn-primary mr-0" [disabled]="!canMove" (click)="moveToCollection()">
+              <button class="btn btn-primary" [disabled]="!canMove" (click)="moveToCollection()">
              <span *ngIf="!processing">
                <i class="fas fa-save"></i> {{'item.edit.move.save-button' | translate}}
              </span>
-                <span *ngIf="processing">
+              <span *ngIf="processing">
                <i class="fas fa-circle-notch fa-spin"></i> {{'item.edit.move.processing' | translate}}
              </span>
              </button>
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
@@ -1,7 +1,7 @@
 <div class="item-relationships">
  <ng-container *ngVar="entityType$ | async as entityType">
    <ng-container *ngIf="entityType">
-      <div class="button-row top d-flex">
+      <div class="button-row top d-flex space-children-mr">
        <button class="btn btn-danger ml-auto" *ngIf="!(isReinstatable() | async)"
                [disabled]="!(hasChanges() | async)"
                (click)="discard()"><i
@@ -35,7 +35,7 @@
        <ds-loading *ngIf="!relationshipTypes"></ds-loading>
      </ng-container>
      <div class="button-row bottom">
-        <div class="float-right">
+        <div class="float-right space-children-mr ml-gap">
          <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
                  [disabled]="!(hasChanges() | async)"
                  (click)="discard()"><i
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.scss
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.scss
@@ -1,6 +1,6 @@
 .button-row {
  .btn {
-    margin-right: calc(0.5 * var(--bs-spacer));
+    margin-right: var(--ds-gap);

    &:last-child {
      margin-right: 0;
--- a/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
+++ b/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
@@ -4,12 +4,13 @@
            <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
            <p>{{descriptionMessage | translate}}</p>
            <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
+          <div class="space-children-mr">
            <button (click)="performAction()" class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
            </button>
            <button [routerLink]="[itemPageRoute, 'edit']" class="btn btn-outline-secondary cancel">
-                {{cancelMessage| translate}}
+              {{cancelMessage| translate}}
            </button>
-
+          </div>
        </div>
    </div>

--- a/src/app/item-page/full/full-item-page.component.html
+++ b/src/app/item-page/full/full-item-page.component.html
@@ -7,7 +7,7 @@
      <div *ngIf="!item.isWithdrawn || (isAdmin$|async)" class="full-item-info">
        <div class="d-flex flex-row">
          <ds-item-page-title-field class="mr-auto" [item]="item"></ds-item-page-title-field>
-          <div class="pl-2">
+          <div class="pl-2 space-children-mr">
            <ds-dso-page-edit-button [pageRoute]="itemPageRoute$ | async" [dso]="item"
                                     [tooltipMsg]="'item.page.edit'"></ds-dso-page-edit-button>
          </div>
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -11,7 +11,7 @@
  <h2 class="item-page-title-field mr-auto">
    {{'publication.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-edit-button [pageRoute]="itemPageRoute" [dso]="object" [tooltipMsg]="'publication.page.edit'"></ds-dso-page-edit-button>
  </div>
 </div>
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -11,7 +11,7 @@
  <h2 class="item-page-title-field mr-auto">
    <ds-metadata-values [mdValues]="object?.allMetadata(['dc.title'])"></ds-metadata-values>
  </h2>
-  <div class="pl-2">
+  <div class="pl-2 space-children-mr">
    <ds-dso-page-version-button (newVersionEvent)="onCreateNewVersion()" [dso]="object"
                                [tooltipMsgCreate]="'item.page.version.create'"
                                [tooltipMsgHasDraft]="'item.page.version.hasDraft'"></ds-dso-page-version-button>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -68,29 +68,27 @@
    </ng-container>
 </div>
 <div class="modal-footer">
-    <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
-    <div class="buttons-container">
+  <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
+  <div class="d-flex float-right space-children-mr">
    <div class="close-button">
        <button type="button" [disabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
            {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
    </div>
-     <div *ngIf="isEditRelationship" class="button-row bottom">
-        <div class="float-right">
-          <button class="btn btn-danger discard"
-                  [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
-                  (click)="discardEv()">
-                  <i class="fas fa-times"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
-          </button>
-          <button class="btn btn-primary submit"
-                [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
-                  (click)="submitEv()">
-                  <span *ngIf="isPending" class="spinner-border spinner-border-sm" role="status"
-                                  aria-hidden="true"></span>
-                  <i class="fas fa-save"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
-          </button>
-        </div>
-      </div>
-    </div>
+    <ng-container *ngIf="isEditRelationship">
+      <button class="btn btn-danger discard"
+              [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
+              (click)="discardEv()">
+              <i class="fas fa-times"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
+      </button>
+      <button class="btn btn-primary submit"
+            [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
+              (click)="submitEv()">
+              <span *ngIf="isPending" class="spinner-border spinner-border-sm" role="status"
+                              aria-hidden="true"></span>
+              <i class="fas fa-save"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
+      </button>
+    </ng-container>
+  </div>
 </div>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss
@@ -13,10 +13,3 @@
    vertical-align: middle;
  }
 }
-
-.buttons-container{
-  display: flex;
-  .close-button{
-    margin-right: 5px;
-  }
-}
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
@@ -201,9 +201,6 @@ describe('DsDynamicLookupRelationModalComponent', () => {


  describe('when initialized and is relationship show the list of buttons', () => {
-    it('should show buttons container', () => {
-      expect(debugElement.query(By.css('.button-row'))).toBeTruthy();
-    });
    it('submit button should be disabled', () => {
      expect(debugElement.query(By.css('.submit')).nativeElement?.disabled).toBeTrue();
    });
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -57,7 +57,7 @@
    <div *ngIf="displaySubmit || displayCancel">
      <hr>
      <div class="form-group row">
-        <div class="col text-right">
+        <div class="col text-right space-children-mr">
          <ng-content select="[before]"></ng-content>
            <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
              <i class="fa fa-times"></i> {{cancelLabel | translate}}
--- a/src/app/shared/item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component.html
+++ b/src/app/shared/item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component.html
@@ -19,14 +19,14 @@
 <!--      (keyup.enter)="$event.preventDefault(); $event.stopImmediatePropagation()"-->
    </div>
  </div>
-  <div class="modal-footer">
-      <button class="btn btn-outline-secondary btn-sm"
+  <div class="modal-footer space-children-mr">
+      <button class="btn btn-outline-secondary btn-sm ml-0"
              type="button"
              (click)="onModalClose()"
              title="{{'item.version.create.modal.button.cancel.tooltip' | translate}}">
        <i class="fas fa-times fa-fw"></i> {{'item.version.create.modal.button.cancel' | translate}}
      </button>
-      <button class="btn btn-success btn-sm"
+      <button class="btn btn-success btn-sm ml-0"
              type="submit"
              (click)="onModalSubmit()"
              title="{{'item.version.create.modal.button.confirm.tooltip' | translate}}">
--- a/src/app/shared/item/item-versions/item-versions.component.html
+++ b/src/app/shared/item/item-versions/item-versions.component.html
@@ -53,7 +53,7 @@

                  <div class="right-column">

-                    <div class="btn-group edit-field" *ngIf="displayActions">
+                    <div class="btn-group edit-field space-children-mr" *ngIf="displayActions">
                      <!--EDIT WORKSPACE ITEM-->
                      <button class="btn btn-outline-primary btn-sm version-row-element-edit"
                              *ngIf="workspaceId$ | async"
@@ -103,7 +103,7 @@
                </ng-template>
              </div>

-              <div class="float-right btn-group edit-field" *ngIf="displayActions">
+              <div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions">
                <!--DISCARD EDIT -->
                <ng-container *ngIf="(canEditVersion$(version) | async) && isThisBeingEdited(version)">
                  <button class="btn btn-sm"
--- a/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.html
+++ b/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngVar="(actionRD$ | async)?.payload as workflowAction">
-  <div class="mt-1 mb-3">
+  <div class="mt-1 mb-3 space-children-mr">
    <ds-claimed-task-actions-loader *ngFor="let option of workflowAction?.options"
                                    [option]="option"
                                    [object]="object"
--- a/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.scss
+++ b/src/app/shared/mydspace-actions/claimed-task/claimed-task-actions.component.scss
@@ -0,0 +1,3 @@
+ds-claimed-task-actions-loader:empty {
+  margin: 0 !important;  // make sure actions that don't load don't cause margins to stack
+}
--- a/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
+++ b/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
@@ -1,19 +1,21 @@
-<a class="btn btn-primary mt-1 mb-3"
-   id="{{'edit_' + object.id}}"
-   ngbTooltip="{{'submission.workflow.generic.edit-help' | translate}}"
-   [routerLink]="['/workspaceitems/' + object.id + '/edit']"
-   role="button">
-  <i class="fa fa-edit"></i> {{'submission.workflow.generic.edit' | translate}}
-</a>
+<div class="space-children-mr">
+  <a class="btn btn-primary mt-1 mb-3"
+     id="{{'edit_' + object.id}}"
+     ngbTooltip="{{'submission.workflow.generic.edit-help' | translate}}"
+     [routerLink]="['/workspaceitems/' + object.id + '/edit']"
+     role="button">
+    <i class="fa fa-edit"></i> {{'submission.workflow.generic.edit' | translate}}
+  </a>

-<button type="button"
-        id="{{'delete_' + object.id}}"
-        class="btn btn-danger mt-1 mb-3"
-        ngbTooltip="{{'submission.workflow.generic.delete-help' | translate}}"
-        (click)="$event.preventDefault();confirmDiscard(content)">
-  <span *ngIf="(processingDelete$ | async)"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
-  <span *ngIf="!(processingDelete$ | async)"><i class="fa fa-trash"></i> {{'submission.workflow.generic.delete' | translate}}</span>
-</button>
+  <button type="button"
+          id="{{'delete_' + object.id}}"
+          class="btn btn-danger mt-1 mb-3"
+          ngbTooltip="{{'submission.workflow.generic.delete-help' | translate}}"
+          (click)="$event.preventDefault();confirmDiscard(content)">
+    <span *ngIf="(processingDelete$ | async)"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
+    <span *ngIf="!(processingDelete$ | async)"><i class="fa fa-trash"></i> {{'submission.workflow.generic.delete' | translate}}</span>
+  </button>
+</div>

 <ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -29,13 +29,15 @@
  </div>
  <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
  <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
-  <div *ngVar="(selectedIds$ | async) as selectedIds">
-    <button class="btn collection-confirm float-right"
+  <div class="space-children-mr float-right" *ngVar="(selectedIds$ | async) as selectedIds">
+    <button class="btn btn-outline-secondary collection-cancel" (click)="onCancel()">
+      <i class="fas fa-times"></i> {{cancelButton | translate}}
+    </button>
+    <button class="btn collection-confirm"
            [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
            [disabled]="selectedIds?.length === 0"
            (click)="confirmSelected()">
      <i class="fas fa-trash"></i> {{confirmButton | translate}}
    </button>
-    <button class="btn btn-outline-secondary collection-cancel float-right mr-1" (click)="onCancel()"><i class="fas fa-times"></i> {{cancelButton | translate}}</button>
  </div>
 </ng-container>
--- a/src/app/shared/resource-policies/resource-policies.component.html
+++ b/src/app/shared/resource-policies/resource-policies.component.html
@@ -5,8 +5,8 @@
        <th colspan="10">
          <div class="d-flex justify-content-between align-items-center m-0">
            {{ 'resource-policies.table.headers.title.for.' + resourceType | translate }} {{resourceUUID}}
-            <div>
-              <button class="btn btn-danger float-right ml-1"
+            <div class="space-children-mr">
+              <button class="btn btn-danger"
                      [disabled]="(!(canDelete() | async)) || (isProcessingDelete() | async)"
                      [title]="'resource-policies.delete.btn.title' | translate"
                      (click)="deleteSelectedResourcePolicies()">
@@ -18,7 +18,7 @@
                  {{'resource-policies.delete.btn' | translate}}
                </span>
              </button>
-              <button class="btn btn-success float-right"
+              <button class="btn btn-success"
                      [disabled]="(isProcessingDelete() | async)"
                      [title]="'resource-policies.add.for.' + resourceType | translate"
                      (click)="redirectToResourcePolicyCreatePage()">
--- a/src/app/submission/form/footer/submission-form-footer.component.html
+++ b/src/app/submission/form/footer/submission-form-footer.component.html
@@ -22,7 +22,7 @@
        <div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
      </div>
    </div>
-    <div class="ml-2">
+    <div class="ml-2 space-children-mr">
      <button type="button"
              class="btn btn-secondary"
              id="save"
@@ -61,7 +61,7 @@
  <div class="modal-body">
    <p>{{'submission.general.discard.confirm.info' | translate}}</p>
  </div>
-  <div class="modal-footer">
+  <div class="modal-footer space-children-mr">
    <button type="button" id="discard_cancel" class="btn btn-secondary" (click)="c('cancel')">{{'submission.general.discard.confirm.cancel' | translate}}</button>
    <button type="button" id="discard_submit" class="btn btn-danger" (click)="c('ok')">{{'submission.general.discard.confirm.submit' | translate}}</button>
  </div>
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -12,7 +12,6 @@ import { RemoteData } from '../core/data/remote-data';
  selector: 'ds-thumbnail',
  styleUrls: ['./thumbnail.component.scss'],
  templateUrl: './thumbnail.component.html',
-  preserveWhitespaces: false,
 })
 export class ThumbnailComponent implements OnChanges {
  /**
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -85,4 +85,6 @@
  --ds-slider-handle-width: 18px;

  --ds-search-form-scope-max-width: 150px;
+
+  --ds-gap: 0.25rem;
 }
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -92,3 +92,19 @@ ngb-modal-backdrop {
  hyphens: auto;

 }
+
+/* Replicate default spacing look ~ preserveWhitespace=true
+   To be used e.g. on a div containing buttons that should have a bit of spacing in between
+ */
+.space-children-mr > :not(:last-child) {
+  margin-right: var(--ds-gap);
+}
+
+/* Complement .space-children-mr when spaced elements are not on the same level */
+.mr-gap {
+  margin-right: var(--ds-gap);
+}
+
+.ml-gap {
+  margin-left: var(--ds-gap);
+}