style: optimize layout

Author: zeevenn

apps/web/src/components/CodemirrorEditor/CssEditor.vue

@@ -135,7 +135,7 @@ function tabChanged(tabName: string | number) {
         'fixed top-0 right-0 w-full h-full z-100 bg-background border-l shadow-lg': store.isMobile,
         'animate': store.isMobile && enableAnimation,
         // 桌面端样式
-        'border-l-2 flex-1 order-2 border-gray/50': !store.isMobile,
+        'border-l-2 flex-1 order-2 border-gray/50 min-w-0': !store.isMobile,
       }"
       :style="{
         transform: store.isMobile ? (displayStore.isShowCssEditor ? 'translateX(0)' : 'translateX(100%)') : 'none',

apps/web/src/components/CodemirrorEditor/RightSlider.vue

@@ -72,7 +72,7 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
       'animate': store.isMobile && enableAnimation,
       // 桌面端样式
       'border-l-2 order-2 border-gray/20 bg-white transition-width duration-300 dark:bg-[#191919]': !store.isMobile,
-      'w-100': !store.isMobile && store.isOpenRightSlider,
+      'flex-1': !store.isMobile && store.isOpenRightSlider,
       'w-0 border-l-0': !store.isMobile && !store.isOpenRightSlider,
     }"
     :style="{

apps/web/src/views/CodemirrorEditor.vue

@@ -486,7 +486,7 @@ onUnmounted(() => {
         <ResizablePanelGroup direction="horizontal">
           <ResizablePanel
             :default-size="15"
-            :max-size="store.isOpenPostSlider ? 30 : 0"
+            :max-size="store.isOpenPostSlider ? 20 : 0"
             :min-size="store.isOpenPostSlider ? 10 : 0"
           >
             <PostSlider />
@@ -525,16 +525,19 @@ onUnmounted(() => {
               <div
                 id="preview"
                 ref="previewRef"
-                class="preview-wrapper w-full p-5"
+                class="preview-wrapper w-full p-5 flex justify-center"
               >
                 <div
                   id="output-wrapper"
-                  class="w-full"
+                  class="w-full max-w-full"
                   :class="{ output_night: !backLight }"
                 >
                   <div
-                    class="preview border-x shadow-xl"
-                    :class="[store.isMobile ? 'w-[100%]' : store.previewWidth]"
+                    class="preview border-x shadow-xl mx-auto"
+                    :class="[
+                      store.isMobile ? 'w-full' : store.previewWidth,
+                      store.previewWidth === 'w-[375px]' ? 'max-w-full' : '',
+                    ]"
                   >
                     <section id="output" class="w-full" v-html="output" />
                     <div v-if="isCoping" class="loading-mask">