wrap searchBar to align reset / delete button

rohberg · May 16, 2021 · 3add591 · 3add591
1 parent c7deddc
commit 3add591
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 37 deletions.
diff --git a/src/components/Views/FacetedSearch.jsx b/src/components/Views/FacetedSearch.jsx
@@ -514,48 +514,46 @@ const FacetedSearch = ({
                     document.querySelectorAll(relocation)[0]
                   }
                 >
-                  <SearchBar
-                    placeholder="Suche"
-                    autofocus="true"
-                    actionProps={{
-                      content: 'reset',
-                    }}
-                    uiProps={{
-                      icon: 'search',
-                      iconPosition: 'left',
-                      onKeyUp: onKeyUpHandler,
-                      class: 'searchbarinput',
-                    }}
-                  />
-                  <Icon
-                    basic
-                    icon
-                    name="delete"
-                    onClick={(event) => onResetHandler(event)}
-                  />
+                  <div className="searchbar-wrapper">
+                    <SearchBar
+                      placeholder="Suche"
+                      autofocus="true"
+                      uiProps={{
+                        icon: 'search',
+                        iconPosition: 'left',
+                        onKeyUp: onKeyUpHandler,
+                        class: 'searchbarinput',
+                      }}
+                    />
+                    <Icon
+                      basic
+                      icon
+                      name="delete"
+                      onClick={(event) => onResetHandler(event)}
+                    />
+                  </div>
                 </Portal>
               ) : (
                 <Grid relaxed style={{ padding: '2em 0' }}>
                   <Grid.Row>
                     <Grid.Column width={12}>
-                      <SearchBar
-                        placeholder="Suche"
-                        autofocus="true"
-                        actionProps={{
-                          content: 'reset',
-                        }}
-                        uiProps={{
-                          icon: 'search',
-                          iconPosition: 'left',
-                          onKeyUp: onKeyUpHandler,
-                        }}
-                      />
-                      <Icon
-                        basic
-                        icon
-                        name="delete"
-                        onClick={(event) => onResetHandler(event)}
-                      />
+                      <div className="searchbar-wrapper">
+                        <SearchBar
+                          placeholder="Suche"
+                          autofocus="true"
+                          uiProps={{
+                            icon: 'search',
+                            iconPosition: 'left',
+                            onKeyUp: onKeyUpHandler,
+                          }}
+                        />
+                        <Icon
+                          basic
+                          icon
+                          name="delete"
+                          onClick={(event) => onResetHandler(event)}
+                        />
+                      </div>
                     </Grid.Column>
                   </Grid.Row>
                 </Grid>

diff --git a/src/components/Views/less/springisnow-volto-searchkit-block.less b/src/components/Views/less/springisnow-volto-searchkit-block.less
@@ -8,6 +8,17 @@
 
 @import (multiple) '../../theme.config';
 
+.searchbar-wrapper {
+    display: flex;
+    align-items: baseline;
+    .ui.fluid.input > input {
+        width: unset !important;
+    }
+    .icon.delete {
+        cursor: pointer;
+    }
+}
+
 // .ui.grid > .row > .column.facetedsearch_filter {
 .facetedsearch_filter {
     &.cards {