Restyle dialog with scrollpanel

src/components/dialog/content/SettingDialogContent.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="settings-container">
-    <div class="settings-sidebar">
+    <ScrollPanel class="settings-sidebar flex-shrink-0 p-2 w-64">
       <SearchBox
-        class="settings-search-box"
+        class="settings-search-box w-full mb-2"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         :placeholder="$t('searchSettings') + '...'"
@@ -13,11 +13,11 @@
         optionLabel="label"
         scrollHeight="100%"
         :disabled="inSearch"
-        :pt="{ root: { class: 'border-none' } }"
+        class="border-none w-full"
       />
-    </div>
+    </ScrollPanel>
     <Divider layout="vertical" />
-    <div class="settings-content">
+    <ScrollPanel class="settings-content flex-grow">
       <Tabs :value="tabValue">
         <TabPanels class="settings-tab-panels">
           <TabPanel key="search-results" value="Search Results">
@@ -72,7 +72,7 @@
           </TabPanel>
         </TabPanels>
       </Tabs>
-    </div>
+    </ScrollPanel>
   </div>
 </template>
 
@@ -83,6 +83,7 @@ import Tabs from 'primevue/tabs'
 import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
+import ScrollPanel from 'primevue/scrollpanel'
 import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
 import { SettingParams } from '@/types/settingTypes'
 import SettingGroup from './setting/SettingGroup.vue'
@@ -208,44 +209,8 @@ const tabValue = computed(() =>
   display: flex;
   height: 70vh;
   width: 60vw;
-  max-width: 1000px;
+  max-width: 1024px;
   overflow: hidden;
-  /* Prevents container from scrolling */
-}
-
-.settings-sidebar {
-  width: 250px;
-  flex-shrink: 0;
-  /* Prevents sidebar from shrinking */
-  overflow-y: auto;
-  padding: 10px;
-}
-
-.settings-search-box {
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.settings-content {
-  flex-grow: 1;
-  overflow-y: auto;
-  /* Allows vertical scrolling */
-}
-
-/* Ensure the Listbox takes full width of the sidebar */
-.settings-sidebar :deep(.p-listbox) {
-  width: 100%;
-}
-
-/* Optional: Style scrollbars for webkit browsers */
-.settings-sidebar::-webkit-scrollbar,
-.settings-content::-webkit-scrollbar {
-  width: 1px;
-}
-
-.settings-sidebar::-webkit-scrollbar-thumb,
-.settings-content::-webkit-scrollbar-thumb {
-  background-color: transparent;
 }
 
 @media (max-width: 768px) {