Improve the display of the body scrollbar

Author: aiqlcom

src/renderer/App.vue

@@ -32,6 +32,10 @@ body {
   height: 100%;
 }
 
+body::-webkit-scrollbar {
+  display: none;
+}
+
 /* Do not force capitalization of button text */
 .v-btn {
   text-transform: unset !important;

src/renderer/components/layouts/DefaultLayout.vue

@@ -32,30 +32,29 @@ const { hasComponent } = useRouteFeatures()
           </v-btn>
         </template>
       </v-snackbar>
-      <SidebarLayout v-if="hasComponent('sideDrawer').value" class="position-fixed">
+      <SidebarLayout v-if="hasComponent('sideDrawer').value">
         <router-view name="sideDrawer" />
         <template #append>
           <router-view v-if="hasComponent('sideDock').value" name="sideDock" />
         </template>
       </SidebarLayout>
-      <HeaderLayout class="position-fixed" />
-      <v-main class="d-flex justify-center">
+      <HeaderLayout />
+      <v-main class="d-flex justify-center" scrollable>
         <v-container>
-          <router-view name="centralStage" />
-          <router-view />
+          <v-sheet>
+            <router-view name="centralStage" />
+            <router-view />
+          </v-sheet>
         </v-container>
       </v-main>
-      <FooterLayout v-if="hasComponent('bottomConsole').value" class="position-fixed">
+      <FooterLayout v-if="hasComponent('bottomConsole').value">
         <router-view name="bottomConsole" />
       </FooterLayout>
     </v-layout>
   </v-app>
 </template>
 
-<style scoped>
-.position-fixed {
-  position: fixed;
-}
+<style>
 .snack-span {
   word-break: break-word;
 }

src/renderer/components/layouts/FooterLayout.vue

@@ -1,4 +1,4 @@
-<script setup lang="tsx"></script>
+<script setup lang="ts"></script>
 <template>
   <v-footer app>
     <slot />

src/renderer/components/layouts/HeaderLayout.vue

@@ -78,7 +78,6 @@ const items = computed(() => {
     :order="-1"
     color="primary"
     height="36"
-    rounded="be-lg"
   >
     <v-app-bar-nav-icon
       class="ml-2 no-drag"

src/renderer/screens/PopupScreen.vue

@@ -27,7 +27,7 @@ const commandNotify = (item: PopupPromptsType) => {
 <template>
   <v-app>
     <v-layout>
-      <v-app-bar class="py-2 px-3 drag gradient-command" density="compact">
+      <v-app-bar class="py-2 px-3 drag gradient-command" block density="compact">
         <v-text-field
           v-model="search"
           class="no-drag"
@@ -39,43 +39,40 @@ const commandNotify = (item: PopupPromptsType) => {
           hide-details
         ></v-text-field>
       </v-app-bar>
-      <v-main scrollable>
-        <v-sheet variant="flat" class="pt-4">
-          <v-data-iterator
-            :items="promptData"
-            :items-per-page="-1"
-            :search="search"
-            class="container"
-          >
-            <template #default="{ items }">
-              <v-list density="compact" nav class="container">
-                <v-list-item
-                  v-for="(item, i) in items"
-                  :key="i"
-                  :value="item"
-                  color="primary"
-                  slim
-                  :title="item.raw.title"
-                  @click="commandNotify(item.raw)"
-                >
-                  <template #prepend>
-                    <v-icon class="mx-0" :icon="item.raw.icon || 'mdi-file-outline'"></v-icon>
-                  </template>
-                </v-list-item>
-              </v-list>
-            </template>
-          </v-data-iterator>
-        </v-sheet>
+      <v-main class="d-flex justify-center" scrollable>
+        <v-container class="px-0 pb-0">
+          <v-sheet>
+            <v-data-iterator
+              :items="promptData"
+              :items-per-page="-1"
+              :search="search"
+            >
+              <template #default="{ items }">
+                <v-list density="compact" nav>
+                  <v-list-item
+                    v-for="(item, i) in items"
+                    :key="i"
+                    :value="item"
+                    color="primary"
+                    slim
+                    :title="item.raw.title"
+                    @click="commandNotify(item.raw)"
+                  >
+                    <template #prepend>
+                      <v-icon class="mx-0" :icon="item.raw.icon || 'mdi-file-outline'"></v-icon>
+                    </template>
+                  </v-list-item>
+                </v-list>
+              </template>
+            </v-data-iterator>
+          </v-sheet>
+        </v-container>
       </v-main>
     </v-layout>
   </v-app>
 </template>
 
 <style>
-body::-webkit-scrollbar {
-  display: none;
-}
-
 .drag {
   app-region: drag;
 }

src/renderer/screens/chat/ChatInputScreen.vue

@@ -1,4 +1,4 @@
-<script setup lang="tsx">
+<script setup lang="ts">
 import ChatInputPage from '@/renderer/components/pages/ChatInputPage.vue'
 </script>
 <template>