From ed7db9f8cdae2168c60681541279d57c7ede1ebc Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 9 Feb 2026 13:34:07 +0530
Subject: [PATCH 1/3] fix: hide empty segment.

---
 .../components/progressbar/ProgressBar.svelte | 20 +++++++++++++++----
 src/lib/components/progressbar/index.ts       |  1 +
 .../table-[table]/columns/varchar.svelte      |  5 ++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte
index 4591e706e7..1221fefbe0 100644
--- a/src/lib/components/progressbar/ProgressBar.svelte
+++ b/src/lib/components/progressbar/ProgressBar.svelte
@@ -9,19 +9,31 @@
      */
     export let maxSize: $$Props['maxSize'];
 
+    /**
+     * Hides empty segments where size is < 0;
+     */
+    export let hideEmptySegments: $$Props['hideEmptySegments'];
+
     /**
      * The data for the progressbar
      */
     export let data: $$Props['data'];
 
+    $: segments = hideEmptySegments ? data.filter((item) => item.size > 0) : data;
+
     /**
      * The remaining value of the progressbar
      */
-    $: remainder = data.reduce((sum: number, item: ProgressbarData) => sum - item.size, maxSize);
+    $: remainder = segments.reduce(
+        (sum: number, item: ProgressbarData) => sum - item.size,
+        maxSize
+    );
+
+    $: segmentGap = segments.length > 1 ? '2px' : '0px';
 </script>
 
-<section class="progressbar__container">
-    {#each $$props.data as item}
+<section class="progressbar__container" style:--progressbar-segment-gap={segmentGap}>
+    {#each segments as item}
         <Tooltip disabled={!item.tooltip} maxWidth="max-content">
             <div
                 class="progressbar__content"
@@ -64,7 +76,7 @@
             border-radius: var(--progressbar-border-radius);
             display: flex;
             flex-direction: row;
-            gap: 2px;
+            gap: var(--progressbar-segment-gap, 2px);
             margin-top: 1rem;
             overflow: hidden;
         }
diff --git a/src/lib/components/progressbar/index.ts b/src/lib/components/progressbar/index.ts
index 48c2711b8f..9488b91d3a 100644
--- a/src/lib/components/progressbar/index.ts
+++ b/src/lib/components/progressbar/index.ts
@@ -11,6 +11,7 @@ export type ProgressbarData = {
 
 export type ProgressbarProps = {
     maxSize: number;
+    hideEmptySegments?: boolean;
     data: Array<ProgressbarData>;
 };
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/varchar.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/varchar.svelte
index f2f046a75d..47bd693de8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/varchar.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/varchar.svelte
@@ -145,7 +145,10 @@
                 </span>
             </Tooltip>
         </Layout.Stack>
-        <ProgressBar maxSize={bytesMax} data={getProgressData(bytesUsed, bytesMax, size)} />
+        <ProgressBar
+            hideEmptySegments
+            maxSize={bytesMax}
+            data={getProgressData(bytesUsed, bytesMax, size)} />
         {#if exceedsLimit}
             <Typography.Text variant="m-400" color="--fgcolor-danger">
                 This column exceeds the remaining row space. Consider using text, mediumtext, or

From a14c0b3c60e12d8fe0c6b0be55e8342d029ff7d9 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 9 Feb 2026 13:37:21 +0530
Subject: [PATCH 2/3] add: default value.

---
 src/lib/components/progressbar/ProgressBar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte
index 1221fefbe0..6ae9b5a8cd 100644
--- a/src/lib/components/progressbar/ProgressBar.svelte
+++ b/src/lib/components/progressbar/ProgressBar.svelte
@@ -12,7 +12,7 @@
     /**
      * Hides empty segments where size is < 0;
      */
-    export let hideEmptySegments: $$Props['hideEmptySegments'];
+    export let hideEmptySegments: $$Props['hideEmptySegments'] = false;
 
     /**
      * The data for the progressbar

From ba95658f3701bd1ed691080cc82b622d5f499301 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 9 Feb 2026 13:38:10 +0530
Subject: [PATCH 3/3] fix: doc.

---
 src/lib/components/progressbar/ProgressBar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte
index 6ae9b5a8cd..4b4b25c5a5 100644
--- a/src/lib/components/progressbar/ProgressBar.svelte
+++ b/src/lib/components/progressbar/ProgressBar.svelte
@@ -10,7 +10,7 @@
     export let maxSize: $$Props['maxSize'];
 
     /**
-     * Hides empty segments where size is < 0;
+     * Hides empty segments where size is <= 0;
      */
     export let hideEmptySegments: $$Props['hideEmptySegments'] = false;