tweak search options menu

src/components/SearchToolbar.vue

 <template>
     <v-card rounded="xl">
-              <v-btn v-if="$vuetify.breakpoint.smAndDown"
-          class="search_options"
-          small
-           text
-           rounded
-           
-           @click="expanded=!expanded">
-           <v-icon small left color="primary">filter_alt</v-icon>Søkealternativer<v-icon small right>{{expanded ? 'expand_less': 'expand_more'}}</v-icon></v-btn>
+          
         <v-container fluid v-if="expanded || $vuetify.breakpoint.mdAndUp">
           <v-row >
           <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
@@ -42,6 +35,16 @@
            </v-row>
          
         </v-container>
+        <v-btn v-if="$vuetify.breakpoint.smAndDown"
+          class="search_options"
+          v-bind:class="{'expanded': expanded}"
+          x-small
+          rounded
+           text
+           
+           
+           @click="expanded=!expanded">
+           <v-icon v-if="!expanded" small left color="primary">filter_alt</v-icon>{{expanded? '' : 'Søkealternativer'}}<v-icon small :right="!expanded">{{expanded ? 'expand_less': 'expand_more'}}</v-icon></v-btn>
         </v-card>
      
 </template>
@@ -113,18 +116,32 @@ export default {
   padding-left: 24px !important;
   padding-right: 24px !important;
   padding-bottom: 10px !important;
+  padding-top: 10px;
   margin-top: 10px;
   margin-right: 10px;
   margin-left: 10px;
+  min-height: 36px;
 }
 
 .search_options {
-    justify-content: center;
+    position: absolute;
+    min-height: 36px;
+    bottom: 0px;
+    left: 0px;
+    border-radius: 28px;
+
+
+    float: left;
 
-    padding-right: 24px !important;
     width: 100%;
 }
 
+.search_options.expanded {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  min-height: 24px;
+}
+
 
 </style>