use flex instead of absolute for search field css

web/style/index.sass

@@ -169,30 +169,42 @@ div.sticker
     margin: 15%
 
 div.search-box
-  position: relative
   display: flex
+  margin: $search-box-input-margin
+  border-radius: .4rem
+  overflow: hidden
 
-  >input[type="text"]
-    flex-grow: 1
+  input,.icon-display
+    color: var(--text-color)
+    opacity: .5
+    transition: opacity .1s
     background-color: var(--search-box-color)
+
+    &:focus,&:focus+.icon-display
+      opacity: 1
+
+  .icon-display
+    padding: $search-box-input-padding
+    width: $search-box-input-height
+    height: $search-box-input-height
+
+    &.reset-click-zone
+      cursor: pointer
+
+    .icon
+      display: block
+      width: $search-box-icon-size
+      height: $search-box-icon-size
+
+  input
+    flex-grow: 1
     outline: none
     border: none
-    border-radius: .25rem
-    height: $search-box-input-height
+    margin: 0
     padding: $search-box-input-padding
-    padding-right: calc(#{$search-box-icon-size} + #{$search-box-input-padding})
-    margin: $search-box-input-margin
+    padding-right: 0
+    height: $search-box-input-height
     font-size: 1rem
-    color: var(--text-color)
-
-  >span.icon
-    display: flex
-    position: absolute
-    top: calc(50% - #{$search-box-icon-size} / 2)
-    right: $search-box-icon-size
-    width: $search-box-icon-size
-    height: $search-box-icon-size
-    box-sizing: border-box
 
 div.settings-list
   display: flex
@@ -205,5 +217,5 @@ div.settings-list
     padding: .5rem
     border-radius: .25rem
 
-  input
+  input:not([type="checkbox"])
     width: 100%