fix(rolldown): improve responsiveness for smaller screens

packages/rolldown/src/app/components/data/SearchPanel.vue

@@ -71,7 +71,7 @@ function unselectToggle() {
 </script>
 
 <template>
-  <div flex="col gap-2" max-w-90vw min-w-30vw border="~ base rounded-xl" bg-glass>
+  <div flex="col gap-2" min-w-30vw border="~ base rounded-xl" bg-glass>
     <slot name="search">
       <div v-if="modelValue.search !== false" class="flex items-center">
         <input

packages/rolldown/src/app/components/modules/Folder.vue

@@ -57,7 +57,7 @@ const moduleTree = computed(() => {
 </script>
 
 <template>
-  <div of-auto max-h-screen pt-45 relative>
+  <div of-auto max-h-screen relative>
     <div flex="~ col gap-2" p4>
       <DisplayTreeNode
         v-if="Object.keys(moduleTree.workspace.children).length"

packages/rolldown/src/app/pages/session/[session]/assets.vue

@@ -136,10 +136,10 @@ watch(() => settings.value.assetViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else relative max-h-screen of-hidden>
-    <div absolute left-4 top-4 z-panel-nav>
+  <div v-else relative>
+    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="[]">
-        <div flex="~ gap-2 items-center" p2 border="t base">
+        <div flex="~ wrap gap-2 items-center" p2 border="t base">
           <span op50 pl2 text-sm>View as</span>
           <button
             v-for="viewType of assetViewTypes"
@@ -154,47 +154,45 @@ watch(() => settings.value.assetViewType, () => {
         </div>
       </DataSearchPanel>
     </div>
-    <div of-auto h-screen flex="~ col gap-2" pt32>
-      <template v-if="settings.assetViewType === 'list'">
-        <AssetsList v-if="searched?.length" :assets="searched" :session="session" />
-        <div
-          absolute bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
-        >
-          <span op50>{{ searched.length }} of {{ assets?.length || 0 }}</span>
-        </div>
-      </template>
-      <template v-else-if="settings.assetViewType === 'folder'">
-        <AssetsFolder v-if="searched?.length" :assets="searched" :session="session" />
-      </template>
-      <template v-else-if="settings.assetViewType === 'treemap'">
-        <ChartTreemap
-          v-if="graph" :graph="graph"
-          :selected="nodeSelected"
-          @select="x => selectNode(x)"
-        >
-          <template #default="{ selected, options, onSelect }">
-            <ChartNavBreadcrumb
-              border="b base" py2 min-h-10
-              :selected="selected"
-              :options="options"
-              @select="onSelect"
-            />
-          </template>
-        </ChartTreemap>
-      </template>
-      <template v-else-if="settings.assetViewType === 'sunburst'">
-        <AssetsSunburst
-          v-if="graph" :graph="graph"
-          :selected="nodeSelected"
-          @select="x => selectNode(x)"
-        />
-      </template>
-      <template v-else-if="settings.assetViewType === 'flamegraph'">
-        <AssetsFlamegraph
-          v-if="graph" :graph="graph"
-        />
-      </template>
-    </div>
+    <template v-if="settings.assetViewType === 'list'">
+      <AssetsList v-if="searched?.length" :assets="searched" :session="session" />
+      <div
+        fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+      >
+        <span op50>{{ searched.length }} of {{ assets?.length || 0 }}</span>
+      </div>
+    </template>
+    <template v-else-if="settings.assetViewType === 'folder'">
+      <AssetsFolder v-if="searched?.length" :assets="searched" :session="session" />
+    </template>
+    <template v-else-if="settings.assetViewType === 'treemap'">
+      <ChartTreemap
+        v-if="graph" :graph="graph"
+        :selected="nodeSelected"
+        @select="x => selectNode(x)"
+      >
+        <template #default="{ selected, options, onSelect }">
+          <ChartNavBreadcrumb
+            border="b base" py2 min-h-10
+            :selected="selected"
+            :options="options"
+            @select="onSelect"
+          />
+        </template>
+      </ChartTreemap>
+    </template>
+    <template v-else-if="settings.assetViewType === 'sunburst'">
+      <AssetsSunburst
+        v-if="graph" :graph="graph"
+        :selected="nodeSelected"
+        @select="x => selectNode(x)"
+      />
+    </template>
+    <template v-else-if="settings.assetViewType === 'flamegraph'">
+      <AssetsFlamegraph
+        v-if="graph" :graph="graph"
+      />
+    </template>
     <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
       <div
         v-if="nodeHover?.meta"

packages/rolldown/src/app/pages/session/[session]/chunks.vue

@@ -204,8 +204,8 @@ watch(() => settings.value.chunkViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else relative max-h-screen of-hidden>
-    <div absolute left-4 top-4 z-panel-nav>
+  <div v-else relative :class="{ 'max-h-screen of-hidden': settings.chunkViewType === 'graph' }">
+    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="[]">
         <template v-if="pathSelectorVisible" #search>
           <DataPathSelector :session="session" :data="searched" import-id-key="chunk_id" :search-keys="['name']" @select="selectPathNodes" @close="togglePathSelector(false)">
@@ -224,7 +224,10 @@ watch(() => settings.value.chunkViewType, () => {
           </DataPathSelector>
         </template>
         <template #search-end>
-          <div v-if="settings.chunkViewType === 'graph'" h10 mr2 flex="~ items-center">
+          <div
+            v-if="settings.chunkViewType === 'graph'"
+            h10 mr2 flex="~ items-center"
+          >
             <button
               w-8 h-8 rounded-full flex items-center justify-center
               hover="bg-active op100" op50 title="Graph Path Selector" @click="togglePathSelector(true)"
@@ -233,7 +236,7 @@ watch(() => settings.value.chunkViewType, () => {
             </button>
           </div>
         </template>
-        <div flex="~ gap-2 items-center" p2 border="t base">
+        <div flex="~ wrap gap-2 items-center" p2 border="t base">
           <span op50 pl2 text-sm>View as</span>
           <button
             v-for="viewType of chunkViewTypes"
@@ -248,69 +251,76 @@ watch(() => settings.value.chunkViewType, () => {
         </div>
       </DataSearchPanel>
     </div>
-    <template v-if="settings.chunkViewType === 'list'">
-      <div class="px5 pt32 of-auto h-screen" flex="~ col gap-4">
-        <ChunksFlatList
-          :session="session"
-          :chunks="searched"
-        />
-      </div>
-    </template>
-    <template v-if="settings.chunkViewType === 'detailed-list'">
-      <div class="px5 pt32 of-auto h-screen" flex="~ col gap-4">
-        <template v-for="chunk of searched" :key="chunk.id">
-          <DataChunkDetails
-            border="~ base rounded-lg"
-            p3
-            :chunk="chunk"
-            :chunks="searched!"
-            :session="session"
+    <div
+      v-if="settings.chunkViewType === 'list'"
+      class="px5 pt-4" flex="~ col gap-4"
+    >
+      <ChunksFlatList
+        :session="session"
+        :chunks="searched"
+      />
+    </div>
+    <div
+      v-if="settings.chunkViewType === 'detailed-list'"
+      class="px5 pt-4" flex="~ col gap-4"
+    >
+      <DataChunkDetails
+        v-for="chunk of searched"
+        :key="chunk.id"
+        border="~ base rounded-lg"
+        p3
+        :chunk="chunk"
+        :chunks="searched!"
+        :session="session"
+      />
+    </div>
+    <ChunksGraph
+      v-else-if="settings.chunkViewType === 'graph'"
+      class="pt32"
+      :session="session"
+      :chunks="normalizedGraph"
+      :entry-id="pathNodes.start"
+    />
+    <div
+      v-else-if="settings.chunkViewType === 'treemap'"
+      flex="~ col gap-2"
+    >
+      <ChartTreemap
+        v-if="graph"
+        :graph="graph"
+        :selected="nodeSelected"
+        @select="x => selectNode(x)"
+      >
+        <template #default="{ selected, options, onSelect }">
+          <ChartNavBreadcrumb
+            border="b base" py2 min-h-10
+            :selected="selected"
+            :options="options"
+            @select="onSelect"
           />
         </template>
-      </div>
-    </template>
-    <template v-else-if="settings.chunkViewType === 'graph'">
-      <ChunksGraph
-        class="pt32"
-        :session="session"
-        :chunks="normalizedGraph"
-        :entry-id="pathNodes.start"
+      </ChartTreemap>
+    </div>
+    <div
+      v-else-if="settings.chunkViewType === 'sunburst'"
+      flex="~ col gap-2" pt-4
+    >
+      <ChunksSunburst
+        v-if="graph"
+        :graph="graph"
+        :selected="nodeSelected"
+        @select="x => selectNode(x)"
       />
-    </template>
-    <template v-else-if="settings.chunkViewType === 'treemap'">
-      <div of-auto h-screen flex="~ col gap-2" pt32>
-        <ChartTreemap
-          v-if="graph" :graph="graph"
-          :selected="nodeSelected"
-          @select="x => selectNode(x)"
-        >
-          <template #default="{ selected, options, onSelect }">
-            <ChartNavBreadcrumb
-              border="b base" py2 min-h-10
-              :selected="selected"
-              :options="options"
-              @select="onSelect"
-            />
-          </template>
-        </ChartTreemap>
-      </div>
-    </template>
-    <template v-else-if="settings.chunkViewType === 'sunburst'">
-      <div of-auto h-screen flex="~ col gap-2" pt32>
-        <ChunksSunburst
-          v-if="graph" :graph="graph"
-          :selected="nodeSelected"
-          @select="x => selectNode(x)"
-        />
-      </div>
-    </template>
-    <template v-else-if="settings.chunkViewType === 'flamegraph'">
-      <div of-auto h-screen flex="~ col gap-2" pt32>
-        <ChunksFlamegraph
-          v-if="graph" :graph="graph"
-        />
-      </div>
-    </template>
+    </div>
+    <div
+      v-else-if="settings.chunkViewType === 'flamegraph'"
+      flex="~ col gap-2" pt-4
+    >
+      <ChunksFlamegraph
+        v-if="graph" :graph="graph"
+      />
+    </div>
+
     <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
       <div
         v-if="nodeHover?.meta"

packages/rolldown/src/app/pages/session/[session]/graph/index.vue

@@ -134,8 +134,8 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
 </script>
 
 <template>
-  <div relative max-h-screen of-hidden>
-    <div absolute left-4 top-4 z-panel-nav>
+  <div relative :class="{ 'max-h-screen of-hidden': settings.moduleGraphViewType === 'graph' }">
+    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
         <template v-if="pathSelectorVisible" #search>
           <DataPathSelector :session="session" :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
@@ -170,7 +170,7 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
             </button>
           </div>
         </template>
-        <div flex="~ gap-2 items-center" p2 border="t base">
+        <div flex="~ wrap gap-2 items-center" p2 border="t base">
           <span op50 pl2 text-sm>View as</span>
           <button
             v-for="viewType of moduleViewTypes"
@@ -185,43 +185,31 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
         </div>
       </DataSearchPanel>
     </div>
-    <template v-if="settings.moduleGraphViewType === 'list'">
-      <div of-auto h-screen pt-45>
-        <ModulesFlatList
-          :session="session"
-          :modules="searched"
-        />
-        <div
-          absolute bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
-        >
-          <span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
-        </div>
-      </div>
-    </template>
-    <template v-else-if="settings.moduleGraphViewType === 'detailed-list'">
-      <div of-auto h-screen pt-45>
-        <ModulesDetailedList
-          :session="session"
-          :modules="searched"
-        />
-        <div
-          absolute bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
-        >
-          <span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
-        </div>
-      </div>
-    </template>
-    <template v-else-if="settings.moduleGraphViewType === 'graph'">
-      <ModulesGraph
-        :session="session"
-        :modules="normalizedGraph"
-      />
-    </template>
-    <template v-else>
-      <ModulesFolder
-        :session="session"
-        :modules="searched"
-      />
-    </template>
+    <ModulesFlatList
+      v-if="settings.moduleGraphViewType === 'list'"
+      :session="session"
+      :modules="searched"
+    />
+    <ModulesDetailedList
+      v-else-if="settings.moduleGraphViewType === 'detailed-list'"
+      :session="session"
+      :modules="searched"
+    />
+    <ModulesGraph
+      v-else-if="settings.moduleGraphViewType === 'graph'"
+      :session="session"
+      :modules="normalizedGraph"
+    />
+    <ModulesFolder
+      v-else
+      :session="session"
+      :modules="searched"
+    />
+    <div
+      v-if="settings.moduleGraphViewType === 'list' || settings.moduleGraphViewType === 'detailed-list'"
+      fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+    >
+      <span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
+    </div>
   </div>
 </template>

packages/rolldown/src/app/pages/session/[session]/index.vue

@@ -85,7 +85,7 @@ const dataTable = computed<DataTableItem[]>(() => {
         <div>
           {{ item.title }}
         </div>
-        <div font-mono>
+        <div font-mono truncate>
           <time v-if="(item.value instanceof Date)" :datetime="item.value.toISOString()">{{ item.value.toLocaleString() }}</time>
           <DisplayBadge v-else-if="item.type === 'badge'" :text="String(item.value)" py1 />
           <DisplayDuration v-else-if="item.type === 'duration'" :duration="+item.value" />
@@ -108,7 +108,7 @@ const dataTable = computed<DataTableItem[]>(() => {
     <div op50 mt-4>
       Views
     </div>
-    <div flex="~ gap-2">
+    <div flex="~ wrap gap-2">
       <template v-for="item of sideNavItems" :key="item.to">
         <NuxtLink v-if="item.category === 'session'" btn-action :to="{ path: item.to }" flex="~ col" min-w-40 p4>
           <div :class="item.icon" text-2xl />