From 63de97f34762d5ae1f63b7313b52c49b1e62333e Mon Sep 17 00:00:00 2001
From: CF3B5 <cf3b5bb@gmail.com>
Date: Fri, 19 Jul 2024 15:54:16 +0800
Subject: [PATCH] change to flex

---
 src/components/TheEditor.vue | 38 ++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 3acc752904..770ea11a85 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -35,7 +35,6 @@
                         v-if="configFileStructure"
                         text
                         tile
-                        target="_blank"
                         class="d-none d-md-flex"
                         @click="showFileStructure()">
                         <v-icon small class="mr-1">{{ mdiFormatListCheckbox }}</v-icon>
@@ -58,11 +57,18 @@
                         <v-icon>{{ mdiCloseThick }}</v-icon>
                     </v-btn>
                 </template>
-                <v-card-text class="pa-0">
+                <v-card-text class="pa-0 d-flex">
+                    <codemirror-async
+                        class="codemirror"
+                        v-if="show"
+                        ref="editor"
+                        v-model="sourcecode"
+                        :name="filename"
+                        :file-extension="fileExtension"
+                        @lineChange="lineChanges" />
                     <div
                         v-if="fileStructureSidebar"
-                        class="d-none d-md-flex float-right structure-sidebar cm-editor ͼo">
-                        <div class="cm-scroller cursor-pointer" style="width: 100%">
+                        class="d-none d-md-flex cursor-pointer cm-editor ͼo structure-sidebar">
                             <v-treeview
                                 activatable
                                 dense
@@ -88,16 +94,6 @@
                                     </v-btn>
                                 </template>
                             </v-treeview>
-                        </div>
-                    </div>
-                    <div :class="fileStructureSidebar ? 'structure' : ''">
-                        <codemirror-async
-                            v-if="show"
-                            ref="editor"
-                            v-model="sourcecode"
-                            :name="filename"
-                            :file-extension="fileExtension"
-                            @lineChange="lineChanges" />
                     </div>
                 </v-card-text>
             </panel>
@@ -510,13 +506,13 @@ export default class TheEditor extends Mixins(BaseMixin) {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fffff'/%3E %3C/svg%3E");
 }
 
-@media screen and (min-width: 960px) {
-    .structure {
-        margin-right: 300px;
-    }
-    .structure-sidebar {
-        width: 300px;
-        overflow-y: auto;
+@media screen and (min-width: 960px){
+    .codemirror{
+        width: calc(100% - 300px);
     }
 }
+.structure-sidebar {
+    width: 300px;
+    overflow-y: auto;
+}
 </style>