优化拉伸动画特效

src/components/about/index.vue

@@ -59,6 +59,7 @@ const { t } = useI18n();
 <style>
 .about-wrapper {
     margin-top: 10px;
+    min-width: 300px;
 }
 
 .version-caption {

src/components/setting/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="setting-wrapper">
+    <div class="setting-wrapper" :style="settingStyle">
         <el-scrollbar height="98vh">
             <div class="setting-section">
                 <h2>{{ t('general-setting') }}</h2>
@@ -164,11 +164,13 @@
                 </div>
                 <br>
 
-                <div class="setting-option" style="width: 380px;">
-                    <span class="option-title" style="width: 200px;">
+                <div class="setting-option">
+                    <span class="option-title">
                         {{ t('setting.pulsation-speed') }}
                     </span>
-                    <el-slider v-model="globalSetting.pulsationSpeed" show-stops :min="1" :max="11" :step="2"/>
+                    <span style="width: 200px;">
+                        <el-slider v-model="globalSetting.pulsationSpeed" show-stops :min="1" :max="11" :step="2"/>
+                    </span>
                 </div>
                 <br>
             </div>
@@ -178,12 +180,13 @@
 
 <script setup>
 import { globalLookup, globalSetting } from '@/hook/global';
-import { reactive, defineComponent, watch, ref, onMounted } from 'vue';
+import { computed, defineComponent, watch, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { languageSetting } from './language';
 import { crossDotStyle, onConnectStyleChange } from './cross-dot-style';
 import { colorManager, onCellColorChange, onGeneralColorChange, predefinedColors } from './color';
 import { LINE_WIDTH } from '@/hook/render/layout';
+import { horizontalResizer } from '../right-nav';
 
 defineComponent({ name: "dide-setting" });
 const { t, locale } = useI18n();
@@ -238,6 +241,12 @@ function onBoldMultiWidthWireChange() {
     }
 }
 
+
+
+const settingStyle = computed(() => ({
+    width: horizontalResizer.width - 10 + 'px'
+}));
+
 onMounted(() => {
     colorManager.initColor();
 });
@@ -246,7 +255,7 @@ onMounted(() => {
 
 <style>
 .setting-wrapper {
-    width: fit-content;
+    min-width: 260px;
     padding: 10px;
 }
 
@@ -266,7 +275,6 @@ onMounted(() => {
     margin: 3px;
     padding: 8px 12px;
     height: 40px;
-    width: 320px !important;
     border-radius: .5em;
     background-color: var(--background);
     display: flex;

src/components/treeview/index.vue

@@ -53,6 +53,7 @@ const netlistModuleStyle = computed(() => ({
 <style>
 .netlist-module-info {
     padding-right: 5px;
+    min-width: 260px;
 }
 
 .netlist-signal-title {