From 720c544d6ef65c0a4f09e3fb9e7ddaa53af609ad Mon Sep 17 00:00:00 2001
From: Olli Mannevaara <olli.mannevaara@identio.fi>
Date: Mon, 11 Mar 2024 10:17:24 +0200
Subject: [PATCH] Fix layout by removing grid cells

---
 .../publications2.component.html              | 444 +++++++++---------
 .../publications2.component.scss              |  32 +-
 2 files changed, 229 insertions(+), 247 deletions(-)

diff --git a/src/app/portal/components/results/publications2/publications2.component.html b/src/app/portal/components/results/publications2/publications2.component.html
index 2b3c6d417..c77cc78d2 100644
--- a/src/app/portal/components/results/publications2/publications2.component.html
+++ b/src/app/portal/components/results/publications2/publications2.component.html
@@ -687,318 +687,322 @@ <h2>Julkaisut - {{total$ | async}}</h2>
     </div>
   </div>
 
-  <div class='search-summary'>
-    <ng-container *ngIf='(filterCount$ | async) > 0'>
-      <div class='filters-summary'>
-        <div>Rajaukset ({{filterCount$ | async}}):</div>
-
-        <!-- year -->
-        <ng-container *ngFor='let yearFilter of yearFilters$ | async'>
-          <ng-container *ngIf='yearFilter.enabled'>
-
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("year", yearFilter.year)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{yearFilter.year}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
 
+
+  <div class='search-combination'>
+    <div>
+      <ng-container *ngIf='(filterCount$ | async) > 0'>
+        <div class='filters-summary'>
+          <div>Rajaukset ({{filterCount$ | async}}):</div>
+
+          <!-- year -->
+          <ng-container *ngFor='let yearFilter of yearFilters$ | async'>
+            <ng-container *ngIf='yearFilter.enabled'>
+
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("year", yearFilter.year)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{yearFilter.year}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
+
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- organization -->
-        <ng-container *ngFor='let organizationFilter of organizationFilters$ | async'>
-          <ng-container *ngIf='organizationFilter.enabled'>
+          <!-- organization -->
+          <ng-container *ngFor='let organizationFilter of organizationFilters$ | async'>
+            <ng-container *ngIf='organizationFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("organization", organizationFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{organizationFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("organization", organizationFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{organizationFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- fieldOfScience -->
-        <ng-container *ngFor='let fieldsOfScienceFilter of fieldsOfScienceFilters$ | async'>
-          <ng-container *ngIf='fieldsOfScienceFilter.enabled'>
+          <!-- fieldOfScience -->
+          <ng-container *ngFor='let fieldsOfScienceFilter of fieldsOfScienceFilters$ | async'>
+            <ng-container *ngIf='fieldsOfScienceFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("fieldOfScience", fieldsOfScienceFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{fieldsOfScienceFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("fieldOfScience", fieldsOfScienceFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{fieldsOfScienceFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- publicationTypeCodeFilters$ -->
-        <ng-container *ngFor='let publicationTypeCodeFilter of publicationTypeCodeFilters$ | async'>
-          <ng-container *ngIf='publicationTypeCodeFilter.enabled'>
+          <!-- publicationTypeCodeFilters$ -->
+          <ng-container *ngFor='let publicationTypeCodeFilter of publicationTypeCodeFilters$ | async'>
+            <ng-container *ngIf='publicationTypeCodeFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("publicationType", publicationTypeCodeFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{publicationTypeCodeFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("publicationType", publicationTypeCodeFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{publicationTypeCodeFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- languageCode -->
-        <ng-container *ngFor='let languageCodeFilter of languageCodeFilters$ | async'>
-          <ng-container *ngIf='languageCodeFilter.enabled'>
+          <!-- languageCode -->
+          <ng-container *ngFor='let languageCodeFilter of languageCodeFilters$ | async'>
+            <ng-container *ngIf='languageCodeFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("language", languageCodeFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{languageCodeFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("language", languageCodeFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{languageCodeFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- publicationFormat -->
-        <ng-container *ngFor='let publicationFormatFilter of publicationFormatFilters$ | async'>
-          <ng-container *ngIf='publicationFormatFilter.enabled'>
+          <!-- publicationFormat -->
+          <ng-container *ngFor='let publicationFormatFilter of publicationFormatFilters$ | async'>
+            <ng-container *ngIf='publicationFormatFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("format", publicationFormatFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{publicationFormatFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("format", publicationFormatFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{publicationFormatFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- publicationAudience -->
-        <ng-container *ngFor='let publicationAudienceFilter of publicationAudienceFilters$ | async'>
-          <ng-container *ngIf='publicationAudienceFilter.enabled'>
+          <!-- publicationAudience -->
+          <ng-container *ngFor='let publicationAudienceFilter of publicationAudienceFilters$ | async'>
+            <ng-container *ngIf='publicationAudienceFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("audience", publicationAudienceFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{publicationAudienceFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("audience", publicationAudienceFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{publicationAudienceFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- peerReviewed -->
-        <ng-container *ngFor='let peerReviewedFilter of peerReviewedFilters$ | async'>
-          <ng-container *ngIf='peerReviewedFilter.enabled'>
+          <!-- peerReviewed -->
+          <ng-container *ngFor='let peerReviewedFilter of peerReviewedFilters$ | async'>
+            <ng-container *ngIf='peerReviewedFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("peerReviewed", peerReviewedFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{peerReviewedFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("peerReviewed", peerReviewedFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{peerReviewedFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- publicationType -->
-        <ng-container *ngFor='let parentPublicationTypeFilter of parentPublicationTypeFilters$ | async'>
-          <ng-container *ngIf='parentPublicationTypeFilter.enabled'>
+          <!-- publicationType -->
+          <ng-container *ngFor='let parentPublicationTypeFilter of parentPublicationTypeFilters$ | async'>
+            <ng-container *ngIf='parentPublicationTypeFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("parentPublicationType", parentPublicationTypeFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{parentPublicationTypeFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("parentPublicationType", parentPublicationTypeFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{parentPublicationTypeFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- international -->
-        <ng-container *ngFor='let internationalPublicationFilter of publisherInternationalityFilters$ | async'>
-          <ng-container *ngIf='internationalPublicationFilter.enabled'>
+          <!-- international -->
+          <ng-container *ngFor='let internationalPublicationFilter of publisherInternationalityFilters$ | async'>
+            <ng-container *ngIf='internationalPublicationFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("international", internationalPublicationFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{internationalPublicationFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("international", internationalPublicationFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{internationalPublicationFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- articleType -->
-        <ng-container *ngFor='let articleTypeCodeFilter of articleTypeCodeFilters$ | async'>
-          <ng-container *ngIf='articleTypeCodeFilter.enabled'>
+          <!-- articleType -->
+          <ng-container *ngFor='let articleTypeCodeFilter of articleTypeCodeFilters$ | async'>
+            <ng-container *ngIf='articleTypeCodeFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("articleType", articleTypeCodeFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{articleTypeCodeFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("articleType", articleTypeCodeFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{articleTypeCodeFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- jufo -->
-        <ng-container *ngFor='let jufoClassCodeFilter of jufoClassCodeFilters$ | async'>
-          <ng-container *ngIf='jufoClassCodeFilter.enabled'>
+          <!-- jufo -->
+          <ng-container *ngFor='let jufoClassCodeFilter of jufoClassCodeFilters$ | async'>
+            <ng-container *ngIf='jufoClassCodeFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("jufo", jufoClassCodeFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{jufoClassCodeFilter.id}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("jufo", jufoClassCodeFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{jufoClassCodeFilter.id}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- TODO new filter pills -->
+          <!-- TODO new filter pills -->
 
-        <!-- openAccess -->
-        <ng-container *ngFor='let openAccessFilter of openAccessFilters$ | async'>
-          <ng-container *ngIf='openAccessFilter.enabled'>
+          <!-- openAccess -->
+          <ng-container *ngFor='let openAccessFilter of openAccessFilters$ | async'>
+            <ng-container *ngIf='openAccessFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("openAccess", openAccessFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{openAccessFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("openAccess", openAccessFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{openAccessFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- publisherOpenAccess -->
-        <ng-container *ngFor='let publisherOpenAccessFilter of publisherOpenAccessFilters$ | async'>
-          <ng-container *ngIf='publisherOpenAccessFilter.enabled'>
+          <!-- publisherOpenAccess -->
+          <ng-container *ngFor='let publisherOpenAccessFilter of publisherOpenAccessFilters$ | async'>
+            <ng-container *ngIf='publisherOpenAccessFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("publisherOpenAccessCode", publisherOpenAccessFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{publisherOpenAccessFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("publisherOpenAccessCode", publisherOpenAccessFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{publisherOpenAccessFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- selfArchivedCode -->
-        <ng-container *ngFor='let selfArchivedCodeFilter of selfArchivedCodeFilters$ | async'>
-          <ng-container *ngIf='selfArchivedCodeFilter.enabled'>
+          <!-- selfArchivedCode -->
+          <ng-container *ngFor='let selfArchivedCodeFilter of selfArchivedCodeFilters$ | async'>
+            <ng-container *ngIf='selfArchivedCodeFilter.enabled'>
 
-            <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("selfArchivedCode", selfArchivedCodeFilter.id)'>
-              <div style='font-size: 0.8rem; padding-left: 8px'>{{selfArchivedCodeFilter.name}}</div>
-              <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
-            </div>
+              <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='toggleParam("selfArchivedCode", selfArchivedCodeFilter.id)'>
+                <div style='font-size: 0.8rem; padding-left: 8px'>{{selfArchivedCodeFilter.name}}</div>
+                <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+              </div>
 
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <!-- make "pill" for running clearFilters -->
-        <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='clearFilters()'>
-          <div style='font-size: 0.8rem; padding-left: 8px'>Tyhjennä rajaukset</div>
-          <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+          <!-- make "pill" for running clearFilters -->
+          <div style='display: inline-flex; align-items: center; background-color: white; border: 2px solid #4546b9; padding: 7px 3px; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 4px' (click)='clearFilters()'>
+            <div style='font-size: 0.8rem; padding-left: 8px'>Tyhjennä rajaukset</div>
+            <i class='fa fa-times' style='padding-left: 7px; padding-right: 8px' aria-hidden='true'></i>
+          </div>
+
         </div>
+      </ng-container>
+    </div>
 
-      </div>
-    </ng-container>
-  </div>
+    <div>
+      <table cdk-table [dataSource]="dataSource" style='width: 100%'>
+        <!-- icon column that's just for aeshetics without any data -->
+        <ng-container cdkColumnDef="icon">
+          <cdk-header-cell *cdkHeaderCellDef></cdk-header-cell>
 
-  <div class='search-results'>
-    <table cdk-table [dataSource]="dataSource" style='width: 100%'>
-      <!-- icon column that's just for aeshetics without any data -->
-      <ng-container cdkColumnDef="icon">
-        <cdk-header-cell *cdkHeaderCellDef></cdk-header-cell>
+          <cdk-cell *cdkCellDef="let element">
+            <!-- TODO is simply ugly -->
+            <!--<div style='width: 25px; height: 25px; background-color: magenta'></div>-->
 
-        <cdk-cell *cdkCellDef="let element">
-           <!-- TODO is simply ugly -->
-          <!--<div style='width: 25px; height: 25px; background-color: magenta'></div>-->
+            <i class='fa fa-file-lines'style='font-size: 2.5rem; color: #4546b9; vertical-align: top; padding: 1rem' aria-hidden='true'></i>
+          </cdk-cell>
+        </ng-container>
 
-          <i class='fa fa-file-lines'style='font-size: 2.5rem; color: #4546b9; vertical-align: top; padding: 1rem' aria-hidden='true'></i>
-        </cdk-cell>
-      </ng-container>
+        <ng-container cdkColumnDef="publicationName">
+          <cdk-header-cell cdk-header-cell *cdkHeaderCellDef style='min-width: 300px'>
+            <div style='display: flex' (click)='toggleSort("publicationName")'>
+              <div style='font-weight: bold;' i18n="@@publicationName">
+                Julkaisun nimi
+              </div>
 
-      <ng-container cdkColumnDef="publicationName">
-        <cdk-header-cell cdk-header-cell *cdkHeaderCellDef style='min-width: 300px'>
-          <div style='display: flex' (click)='toggleSort("publicationName")'>
-            <div style='font-weight: bold;' i18n="@@publicationName">
-              Julkaisun nimi
+              <app-column-sorter [name]='"publicationName"' [value]='sort'></app-column-sorter>
             </div>
+          </cdk-header-cell>
 
-            <app-column-sorter [name]='"publicationName"' [value]='sort'></app-column-sorter>
-          </div>
-        </cdk-header-cell>
+          <cdk-cell *cdkCellDef="let element">
+            <!--{{element | json}}-->
 
-        <cdk-cell *cdkCellDef="let element">
-          <!--{{element | json}}-->
+            <a style='text-decoration: underline' [routerLink]="'/results/publication/' + element.id" >
+              <div [innerHTML]='element.publicationName'></div>
+            </a>
 
-          <a style='text-decoration: underline' [routerLink]="'/results/publication/' + element.id" >
-            <div [innerHTML]='element.publicationName'></div>
-          </a>
+            <div style='margin-top: 0.5rem'>
+              <ng-container *ngIf='element.badges.peerReviewed'>
+                <div style='width: 115px; display: inline-block'>
+                  <app-tag-peer-reviewed></app-tag-peer-reviewed>
+                </div>
+              </ng-container>
 
-          <div style='margin-top: 0.5rem'>
-            <ng-container *ngIf='element.badges.peerReviewed'>
-              <div style='width: 115px; display: inline-block'>
-                <app-tag-peer-reviewed></app-tag-peer-reviewed>
-              </div>
-            </ng-container>
+              <ng-container *ngIf='element.badges.openAccess'>
+                <div style='width: 156px; display: inline-block'>
+                  <app-tag-open-access [link]='element.badges.openAccess'></app-tag-open-access>
+                </div>
+              </ng-container>
 
-            <ng-container *ngIf='element.badges.openAccess'>
-              <div style='width: 156px; display: inline-block'>
-                <app-tag-open-access [link]='element.badges.openAccess'></app-tag-open-access>
-              </div>
-            </ng-container>
+              <ng-container *ngIf='element.badges.doi'>
+                <div>
+                  <app-tag-doi [link]='element.badges.doi'></app-tag-doi>
+                </div>
+              </ng-container>
+            </div>
 
-            <ng-container *ngIf='element.badges.doi'>
-              <div>
-                <app-tag-doi [link]='element.badges.doi'></app-tag-doi>
-              </div>
-            </ng-container>
-          </div>
+          </cdk-cell>
+        </ng-container>
 
-        </cdk-cell>
-      </ng-container>
+        <ng-container cdkColumnDef="authorsText">
+          <cdk-header-cell *cdkHeaderCellDef>
 
-      <ng-container cdkColumnDef="authorsText">
-        <cdk-header-cell *cdkHeaderCellDef>
+            <div style='display: flex'(click)='toggleSort("authorsText")'>
+              <div style='font-weight: bold' i18n="@@publicationAuthors">Tekijät</div>
 
-          <div style='display: flex'(click)='toggleSort("authorsText")'>
-            <div style='font-weight: bold' i18n="@@publicationAuthors">Tekijät</div>
+              <app-column-sorter [name]='"authorsText"' [value]='sort'></app-column-sorter>
+            </div>
 
-            <app-column-sorter [name]='"authorsText"' [value]='sort'></app-column-sorter>
-          </div>
+          </cdk-header-cell>
 
-        </cdk-header-cell>
+          <cdk-cell *cdkCellDef="let element">
+            <div [innerHTML]='element.authorsText'></div>
+          </cdk-cell>
+        </ng-container>
 
-        <cdk-cell *cdkCellDef="let element">
-          <div [innerHTML]='element.authorsText'></div>
-        </cdk-cell>
-      </ng-container>
+        <ng-container cdkColumnDef="publisherName">
+          <cdk-header-cell *cdkHeaderCellDef>
 
-      <ng-container cdkColumnDef="publisherName">
-        <cdk-header-cell *cdkHeaderCellDef>
+            <div style='display: flex' (click)='toggleSort("publisherName")'>
+              <div style='font-weight: bold' i18n="@@publicationMedium">
+                Julkaisukanava
+              </div>
 
-          <div style='display: flex' (click)='toggleSort("publisherName")'>
-            <div style='font-weight: bold' i18n="@@publicationMedium">
-              Julkaisukanava
+              <app-column-sorter [name]='"publisherName"' [value]='sort'></app-column-sorter>
             </div>
 
-            <app-column-sorter [name]='"publisherName"' [value]='sort'></app-column-sorter>
-          </div>
+          </cdk-header-cell>
 
-        </cdk-header-cell>
+          <cdk-cell *cdkCellDef="let element">
+            <div [innerHTML]='element.publisherName'></div>
+          </cdk-cell>
+        </ng-container>
 
-        <cdk-cell *cdkCellDef="let element">
-          <div [innerHTML]='element.publisherName'></div>
-        </cdk-cell>
-      </ng-container>
+        <ng-container cdkColumnDef="publicationYear">
+          <cdk-header-cell *cdkHeaderCellDef>
 
-      <ng-container cdkColumnDef="publicationYear">
-        <cdk-header-cell *cdkHeaderCellDef>
+            <div style='display: flex' (click)='toggleSort("publicationYear")'>
+              <div style='font-weight: bold' i18n="@@yearOfPublication">
+                Julkaisuvuosi
+              </div>
 
-          <div style='display: flex' (click)='toggleSort("publicationYear")'>
-            <div style='font-weight: bold' i18n="@@yearOfPublication">
-              Julkaisuvuosi
+              <app-column-sorter [name]='"publicationYear"' [value]='sort'></app-column-sorter>
             </div>
 
-            <app-column-sorter [name]='"publicationYear"' [value]='sort'></app-column-sorter>
-          </div>
-
-        </cdk-header-cell>
+          </cdk-header-cell>
 
-        <cdk-cell *cdkCellDef="let element">
-          <div [innerHTML]='element.publicationYear'></div>
-        </cdk-cell>
-      </ng-container>
+          <cdk-cell *cdkCellDef="let element">
+            <div [innerHTML]='element.publicationYear'></div>
+          </cdk-cell>
+        </ng-container>
 
-      <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
-      <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
-    </table>
-  </div>
+        <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+        <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+    </div>
 
-  <div class='search-pagination'>
-    <div style='width: 990px'>
-      <app-pagination [page]='page' [pageSize]='size' [total]='total$ | async'></app-pagination>
+    <div class='search-pagination'>
+      <div style='width: 990px'>
+        <app-pagination [page]='page' [pageSize]='size' [total]='total$ | async'></app-pagination>
+      </div>
     </div>
   </div>
 
diff --git a/src/app/portal/components/results/publications2/publications2.component.scss b/src/app/portal/components/results/publications2/publications2.component.scss
index 392447b06..e0d45dcc2 100644
--- a/src/app/portal/components/results/publications2/publications2.component.scss
+++ b/src/app/portal/components/results/publications2/publications2.component.scss
@@ -8,22 +8,12 @@
     minmax(0, auto)
     minmax(0, auto);
 
-  // grid-template-columns: 0px 350px 1fr 100px 0px;
-  // grid-template-columns: 100px 350px auto auto 100px;
-  // grid-template-columns: 1fr 350px 4fr 4fr 1fr;
-  // grid-template-columns: 1fr 350px minmax(0, 1fr) minmax(0, 1fr) 1fr;
-  // grid-template-columns: minmax(0, 1fr) 350px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
-  // grid-template-columns: minmax(0, 1fr) 350px minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
-
   grid-template-columns: 1fr 350px 1100px 1fr;
 
   grid-template-areas:
     "search search search search"
-    /*". tabs tabs ."*/
     ". info info ."
-    ". filters summary ."
-    ". filters results ."
-    ". filters pagination .";
+    ". filters results .";
 }
 
 @media (max-width: 1200px) {
@@ -32,11 +22,8 @@
 
     grid-template-areas:
     "search search"
-    /*"tabs tabs"*/
     "info info"
-    "filters summary"
     "filters results"
-    "filters pagination";
   }
 }
 
@@ -46,12 +33,9 @@
 
     grid-template-areas:
     "search"
-    /*"tabs"*/
     "info"
-    "summary"
     "filters-toggle"
     "results"
-    "pagination";
   }
 }
 
@@ -75,21 +59,15 @@
   grid-area: filters-toggle;
 }
 
-.search-summary {
-  grid-area: summary;
-}
-
-.search-results {
-  grid-area: results;
-}
-
 .search-pagination {
-  grid-area: pagination;
-
   display: flex;
   justify-content: center;
 }
 
+.search-combination {
+  grid-area: results;
+}
+
 /* Ensure the table takes the full width */
 cdk-table {
   // width: 100%;