fix(vite): adjust ui for narrow screens (#127)

Author: liangmiQwQ

packages/vite/src/app/components/data/AssetDetails.vue

@@ -115,7 +115,7 @@ function openInEditor() {
           Chunks
         </div>
         <NuxtLink
-          v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1
+          v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1 min-w-fit
           :to="{ path: route.path, query: { chunk: chunk.chunk_id } }"
         >
           <DataChunkDetails

packages/vite/src/app/components/data/AssetRelationships.vue

@@ -170,7 +170,7 @@ onMounted(() => {
 
       <!-- dot: current asset -->
       <div
-        bg-base rounded-full border-3 font-mono border-active :style="{
+        bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style="{
           margin: dotNodeMargin,
           width: `${SPACING.dot}px`,
           height: `${SPACING.dot}px`,

packages/vite/src/app/components/data/ModuleImportRelationships.vue

@@ -171,7 +171,7 @@ onMounted(() => {
       </div>
       <!-- dot: current module -->
       <div
-        bg-base rounded-full border-3 font-mono border-active :style="{
+        bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style="{
           margin: dotNodeMargin,
           width: `${SPACING.dot}px`,
           height: `${SPACING.dot}px`,

packages/vite/src/app/components/flowmap/ModuleFlow.vue

@@ -32,21 +32,12 @@ function handleClose() {
 </script>
 
 <template>
-  <Splitpanes class="!h-auto !of-visible p4 module-flow-splitter">
-    <Pane size="45" min-size="10" max-size="90" class="!h-auto !of-visible">
-      <ModuleFlowTimeline
-        :info="info"
-        :session="session"
-        :transforms-loading="transformsLoading"
-        :selected="selected"
-        @select="handleSelect"
-      />
-    </Pane>
-
-    <Pane v-if="selected" size="55" min-size="10" max-size="90" class="!h-auto !of-visible">
+  <Splitpanes v-if="selected" class="!h-auto w-full module-flow-splitter right-4 bottom-4 fixed z-10 pointer-events-none">
+    <Pane size="45" min-size="10" max-size="90" class="!h-auto pointer-events-none" />
+    <Pane size="55" min-size="10" max-size="90" class="!h-auto !of-visible ">
       <!-- the origin of the height: -->
       <!-- DialogTopMargin (20) + HandleHeight (30) + padding (4*2) = 58 -->
-      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter', '.flowmap-node-inline'] }]" w-full h="[calc(100vh-(var(--spacing)*58))]" sticky top-4>
+      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter', '.flowmap-node-inline'] }]" w-full h="[calc(100vh-(var(--spacing)*58))]" pointer-events-auto sticky top-4>
         <div absolute left-0 top="1/2" translate-x="-1/2" translate-y="-1/2" bg="#DFDFDF dark:#313131" h-10 w-2 rounded-full z-10 cursor-col-resize />
         <ModuleFlowDetails
           :selected="selected"
@@ -56,10 +47,23 @@ function handleClose() {
       </div>
     </Pane>
   </Splitpanes>
+  <div p4>
+    <ModuleFlowTimeline
+      :info="info"
+      :session="session"
+      :transforms-loading="transformsLoading"
+      :selected="selected"
+      @select="handleSelect"
+    />
+  </div>
 </template>
 
 <style>
 .module-flow-splitter>.splitpanes__splitter:before {
   background-color: transparent;
 }
+
+.splitpanes__splitter{
+  pointer-events: auto;
+}
 </style>