From c9a6606aec5dcf6420b280fdaa8fa31db6c5bb1a Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Mon, 16 Mar 2026 22:50:36 -0600
Subject: [PATCH 1/8] fix(rolldown): improve layout and truncation for session
 data display

---
 packages/rolldown/src/app/pages/session/[session]/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rolldown/src/app/pages/session/[session]/index.vue b/packages/rolldown/src/app/pages/session/[session]/index.vue
index e7530441..42250fb4 100644
--- a/packages/rolldown/src/app/pages/session/[session]/index.vue
+++ b/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 />

From 7deb769d2629bbfa99e3c39918746c028e77cf2e Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Tue, 17 Mar 2026 19:32:39 -0600
Subject: [PATCH 2/8] fix: update graph layout

---
 .../src/app/components/data/SearchPanel.vue   |  2 +-
 .../src/app/components/modules/Folder.vue     |  2 +-
 .../pages/session/[session]/graph/index.vue   | 74 +++++++++----------
 3 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/packages/rolldown/src/app/components/data/SearchPanel.vue b/packages/rolldown/src/app/components/data/SearchPanel.vue
index 1e8fb739..e8d18271 100644
--- a/packages/rolldown/src/app/components/data/SearchPanel.vue
+++ b/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
diff --git a/packages/rolldown/src/app/components/modules/Folder.vue b/packages/rolldown/src/app/components/modules/Folder.vue
index 225804ce..06ba399b 100644
--- a/packages/rolldown/src/app/components/modules/Folder.vue
+++ b/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"
diff --git a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
index 7bb71305..569a6980 100644
--- a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
+++ b/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 max-h-screen>
+    <div sticky left-4 top-4 right-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,35 @@ 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>

From 5e392cb98e5d90e788c262a5db44d959a068e425 Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Tue, 17 Mar 2026 19:37:02 -0600
Subject: [PATCH 3/8] fix: update plugins layout

---
 .../app/pages/session/[session]/graph/index.vue  |  4 ++--
 .../src/app/pages/session/[session]/plugins.vue  | 16 +++++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
index 569a6980..13c89d66 100644
--- a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
+++ b/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>
-    <div sticky left-4 top-4 right-4 z-panel-nav p-4>
+  <div relative min-h-screen>
+    <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)">
diff --git a/packages/rolldown/src/app/pages/session/[session]/plugins.vue b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
index 56cc0e07..d2a257ab 100644
--- a/packages/rolldown/src/app/pages/session/[session]/plugins.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
@@ -76,17 +76,15 @@ watchDebounced(
 </script>
 
 <template>
-  <div relative max-h-screen of-hidden>
-    <div absolute left-4 top-4 z-panel-nav>
+  <div relative min-h-screen>
+    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes" />
     </div>
-    <div of-auto h-screen flex="~ col gap-2" pt32>
-      <PluginsFlatList :plugins="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?.meta?.plugins?.length || 0 }}</span>
-      </div>
+    <PluginsFlatList :plugins="searched ?? []" />
+    <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 {{ session?.meta?.plugins?.length || 0 }}</span>
     </div>
   </div>
 </template>

From b9754e78b629c11afceccec8ffbd3656d7cb4c7f Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Tue, 17 Mar 2026 19:50:43 -0600
Subject: [PATCH 4/8] fix: update chunks layout

---
 .../app/pages/session/[session]/chunks.vue    | 131 +++++++++---------
 .../pages/session/[session]/graph/index.vue   |   4 -
 2 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/packages/rolldown/src/app/pages/session/[session]/chunks.vue b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
index b99ea434..203b6473 100644
--- a/packages/rolldown/src/app/pages/session/[session]/chunks.vue
+++ b/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 min-h-screen>
+    <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)">
@@ -248,69 +248,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"
diff --git a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
index 13c89d66..ed2426e4 100644
--- a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
@@ -190,25 +190,21 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
       :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"

From 1fecbfd37164b5568ca477e63502cc8b27a153a5 Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Tue, 17 Mar 2026 22:46:04 -0600
Subject: [PATCH 5/8] fix: update assets layout

---
 .../app/pages/session/[session]/assets.vue    | 86 +++++++++----------
 .../app/pages/session/[session]/chunks.vue    |  7 +-
 .../pages/session/[session]/graph/index.vue   |  2 +-
 3 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/packages/rolldown/src/app/pages/session/[session]/assets.vue b/packages/rolldown/src/app/pages/session/[session]/assets.vue
index 76d5f01b..b5986e9b 100644
--- a/packages/rolldown/src/app/pages/session/[session]/assets.vue
+++ b/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"
diff --git a/packages/rolldown/src/app/pages/session/[session]/chunks.vue b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
index 203b6473..66e951d5 100644
--- a/packages/rolldown/src/app/pages/session/[session]/chunks.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
@@ -204,7 +204,7 @@ watch(() => settings.value.chunkViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else relative min-h-screen>
+  <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>
@@ -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)"
diff --git a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
index ed2426e4..3867a1e8 100644
--- a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
@@ -134,7 +134,7 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
 </script>
 
 <template>
-  <div relative min-h-screen>
+  <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>

From fc83503b67c1cbcd5b9deb817a70a76f8c485bdf Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Tue, 17 Mar 2026 22:56:55 -0600
Subject: [PATCH 6/8] fix: update packages layout

---
 .../rolldown/src/app/pages/session/[session]/packages.vue   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rolldown/src/app/pages/session/[session]/packages.vue b/packages/rolldown/src/app/pages/session/[session]/packages.vue
index 4eaeeb87..a3c01fb4 100644
--- a/packages/rolldown/src/app/pages/session/[session]/packages.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/packages.vue
@@ -151,8 +151,8 @@ watch(() => settings.value.packageViewType, () => {
 
 <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="packageTypeRules">
         <div flex="~ gap-2 items-center" p2 border="t base">
           <span op50 pl2 text-sm>View as</span>
@@ -169,7 +169,7 @@ watch(() => settings.value.packageViewType, () => {
         </div>
       </DataSearchPanel>
     </div>
-    <div of-auto h-screen flex="~ col gap-2" pt44 px4 pb4>
+    <div flex="~ col gap-2" pt4 px4 pb4>
       <template v-if="settings.packageViewType === 'table'">
         <PackagesTable :packages="normalizedPackages" :session="session" />
         <div

From 695fd9ed65c2ff6cb79f9c15dc03fff65b0ea7f6 Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Tue, 17 Mar 2026 22:59:24 -0600
Subject: [PATCH 7/8] fix: small fixes

---
 packages/rolldown/src/app/pages/session/[session]/chunks.vue  | 2 +-
 .../rolldown/src/app/pages/session/[session]/packages.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rolldown/src/app/pages/session/[session]/chunks.vue b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
index 66e951d5..951c3305 100644
--- a/packages/rolldown/src/app/pages/session/[session]/chunks.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
@@ -236,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"
diff --git a/packages/rolldown/src/app/pages/session/[session]/packages.vue b/packages/rolldown/src/app/pages/session/[session]/packages.vue
index a3c01fb4..831866ef 100644
--- a/packages/rolldown/src/app/pages/session/[session]/packages.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/packages.vue
@@ -154,7 +154,7 @@ watch(() => settings.value.packageViewType, () => {
   <div v-else relative>
     <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="packageTypeRules">
-        <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 packageViewTypes"
@@ -173,7 +173,7 @@ watch(() => settings.value.packageViewType, () => {
       <template v-if="settings.packageViewType === 'table'">
         <PackagesTable :packages="normalizedPackages" :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"
+          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 {{ packages?.length || 0 }}</span>
         </div>

From cc91d9bc0befd46b78e70f88c21360dc11376803 Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <hi@arashsheyda.me>
Date: Wed, 18 Mar 2026 00:30:03 -0600
Subject: [PATCH 8/8] fix: overflow

---
 packages/rolldown/src/app/pages/session/[session]/packages.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rolldown/src/app/pages/session/[session]/packages.vue b/packages/rolldown/src/app/pages/session/[session]/packages.vue
index 831866ef..0902a1f2 100644
--- a/packages/rolldown/src/app/pages/session/[session]/packages.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/packages.vue
@@ -169,7 +169,7 @@ watch(() => settings.value.packageViewType, () => {
         </div>
       </DataSearchPanel>
     </div>
-    <div flex="~ col gap-2" pt4 px4 pb4>
+    <div flex="~ col gap-2" pt4 px4 pb4 overflow-x-auto>
       <template v-if="settings.packageViewType === 'table'">
         <PackagesTable :packages="normalizedPackages" :session="session" />
         <div