update style

frontend/src/components/Search.vue

@@ -143,11 +143,10 @@
 }
 
 #result-desktop #result-list {
+  width: 100%;
   -webkit-transition: width 0.3s ease 0s;
   transition: width 0.3s ease 0s;
-  max-width: 100%;
   overflow: auto;
-  width: 30em;
   padding-top: 0em;
   border-width: 1px;
   border-style: solid;
@@ -182,11 +181,6 @@
   margin-right: .3em;
 }
 
-#result-list.active {
-  width: 65em !important;
-  max-width: 85vw !important;
-}
-
 /* Animations */
 @keyframes SlideDown {
   0% {
@@ -203,7 +197,7 @@
 /* Search */
 #search {
   flex-basis: auto;
-  min-width: 35em;
+  width: 100%;
   height: 3em;
   display: flex;
   flex-direction: column;
@@ -262,7 +256,6 @@
   padding-top: 1em;
   overflow: hidden;
   background: white;
-  display: flex;
   top: -4em;
   flex-direction: column;
   align-items: center;
@@ -313,7 +306,9 @@ body.rtl #search #result ul>* {
 #search.ongoing #renew {
   display: block;
 }
-
+#search.active {
+  width: 80%;
+}
 #search.active #input {
   border-bottom-left-radius: 1px;
   background-color: lightgray;

frontend/src/css/mobile.css

@@ -54,9 +54,21 @@
   }
   #search {
     min-width: unset;
+    max-width: 60%
+  }
+
+  #search .boxes {
+    text-align: center;
+    width: 100%;
+    padding: 1em;
+    padding-top: 0;
+    max-width: 30em;
+    margin:auto;
+
   }
 
   #search.active {
+    min-width: 100%;
     display: block;
     position: fixed;
     top: 0;
@@ -98,16 +110,15 @@
     margin-right: 0.3em;
     user-select: none;
   }
-
+  #result {
+    overflow:scroll
+  }
   #result-list {
     width:100%;
     left: 0;
     top: 4em;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
     overflow: scroll;
-    display: flex;
+    display: contents;
-    flex-direction: column;
   }
 }