Search result header optimisation (#1155)

superdesk · Nov 13, 2024 · 7fbea78 · 7fbea78
1 parent a93479f
commit 7fbea78
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/assets/search/components/SearchResultsBar/SearchResultsAdvancedSearchRow.tsx b/assets/search/components/SearchResultsBar/SearchResultsAdvancedSearchRow.tsx
@@ -162,7 +162,7 @@ export function SearchResultsAdvancedSearchRow({
                 secondary={true}
                 title={gettext('inside')}
             >
-                <div className="toggle-button__group toggle-button__group--spaced toggle-button__group--loose">
+                <div className="toggle-button__group toggle-button__group--spaced toggle-button__group--compact">
                     {(Object.keys(fieldNameToLabel) as Array<keyof typeof fieldNameToLabel>)
                         .filter((fieldName) => availableFields.includes(fieldName))
                         .map((fieldName) => (

diff --git a/assets/styles/agenda.scss b/assets/styles/agenda.scss
@@ -26,8 +26,8 @@
     gap: 0;
     flex-shrink: 0;
     display: grid;
-    grid-template-rows: auto auto 1fr auto;
-    max-height: clamp(360px, 50svh, 50svh);
+    grid-template-rows: auto auto auto auto;
+    max-height: clamp(320px, 50svh, 50svh);
     @include phone {
         .search-result__tags-list {
             border-bottom: 2px solid var(--main-header-color-bg);

diff --git a/assets/styles/search-results.scss b/assets/styles/search-results.scss
@@ -69,16 +69,20 @@
 .search-result__tags-list-row {
     display: flex;
     flex-direction: row;
-    padding-block: 12px;
+    padding-block: var(--space--0-5);
     gap: var(--space--2);
-    min-height: 56px;
-    border-block-start: 1px dashed hsla(0, 0%, 20%, 0.2);
+    //min-height: 56px;
+    //border-block-start: 1px dashed hsla(0, 0%, 20%, 0.2);
     flex-shrink: 0;
     &:first-child {
         border: none;
     }
+    &:last-child {
+        padding-block-end: var(--space--1-5);
+    }
     .tags-list {
         flex-grow: 1;
+        gap: var(--space--0-5);
     }
     .search-result__tags-list-row-label {
         display: inline-flex;
@@ -121,6 +125,7 @@
         z-index: 1;
         background-color: var(--search-result-tags-list-color-bg);
         box-shadow: inset 0 1px 3px -2px hsla(0, 0%, 0%, 0.2);
+        padding-block-start: var(--space--1-5);
     }
 }
 .tags-list-row__button-group {