pref: search mobile adjust

src/components/search/KUNGalgameSearchBox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import SearchBox from './SearchBox.vue'
 import SearchHistory from './SearchHistory.vue'
 import SearchResult from './SearchResult.vue'
@@ -42,15 +42,11 @@ watch(
 
 const scrollHandler = async () => {
   if (isScrollAtBottom() && search.value.isLoading && search.value.keywords) {
-    console.log(12222)
-
     search.value.page++
 
     const lazyLoadTopics = await searchTopics()
 
     if (!lazyLoadTopics.length) {
-      console.log(1)
-
       search.value.isLoading = false
     }
 
@@ -141,4 +137,16 @@ onBeforeUnmount(() => {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
+
+@media (max-width: 1000px) {
+  .container {
+    width: 60vw;
+  }
+}
+
+@media (max-width: 700px) {
+  .container {
+    width: 90vw;
+  }
+}
 </style>

src/components/search/SearchBox.vue

@@ -61,7 +61,7 @@ onMounted(() => {
 .search-form {
   position: sticky;
   top: 0;
-  width: calc(40vw - 20px);
+  width: 100%;
   max-width: 777px;
   display: flex;
   justify-content: center;

src/components/search/SearchHistory.vue

@@ -38,8 +38,12 @@ const handleDeleteHistory = (historyIndex: number) => {
         @click="handleClickHistory(index)"
       >
         <span>{{ history }} </span>
-        <span @click="handleDeleteHistory(index)">
+        <span>
-          <Icon class="delete" icon="line-md:close-circle" />
+          <Icon
+            @click="handleDeleteHistory(index)"
+            class="delete"
+            icon="line-md:close-circle"
+          />
         </span>
       </div>
     </div>
@@ -107,7 +111,6 @@ const handleDeleteHistory = (historyIndex: number) => {
   }
 }
 
-/* Delete button */
 .delete {
   width: 30px;
   right: 5px;

src/components/top-bar/KUNGalgameTopBar.vue

@@ -311,12 +311,13 @@ $navNumber: v-bind(navItemNum);
       margin-right: 0 !important;
     }
   }
-}
 
-@media (max-width: 700px) {
   .settings {
     display: none !important;
   }
+}
+
+@media (max-width: 700px) {
   .top-bar {
     display: none;
   }
@@ -331,5 +332,11 @@ $navNumber: v-bind(navItemNum);
   .kungalgamer-info {
     margin-right: 30px;
   }
+
+  .avatar {
+    img {
+      margin-left: 0;
+    }
+  }
 }
 </style>