From cfd6af4be08dbc6b91bddd9b583bba765d77fe90 Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:42:51 +0100
Subject: [PATCH] fix(studio): autoscaling marker positioning (#47958)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Small UI fix to stop things bundling into each other on smaller
viewports. Autoscaling marker moves from bottom to top to preserve
structural integrity.

| Before | After |
|--------|--------|
| <img width="698" height="246" alt="Screenshot 2026-07-15 at 11 28 07"
src="https://github.com/user-attachments/assets/9bbb1bb1-a361-4658-9757-30e012098d0c"
/> | <img width="687" height="252" alt="Screenshot 2026-07-15 at 11 28
15"
src="https://github.com/user-attachments/assets/ca6b6c0a-b511-4136-835f-4321a30765b8"
/> |



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Fixed the Autoscaling tooltip placement on the disk space bar so it
consistently appears in the correct spot.
* Updated the tooltip trigger to use an info icon with a static
positioned tooltip, removing the previous animated trigger behavior
while preserving existing tooltip content and visibility rules.
* Improved tooltip/marker positioning accuracy by recalculating the
horizontal placement from the independently-rounded usage segments to
prevent drift.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../DiskManagement/ui/DiskSpaceBar.tsx        | 76 ++++++++++---------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
index c47a8bb2da8..1e7491d44e9 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
@@ -76,7 +76,14 @@ export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
   const newUsedPercentageSystem = Math.min((usedSizeSystem / newTotalSize) * 100, 100)
 
   const resizePercentage = AUTOSCALING_THRESHOLD * 100
-  const newResizePercentage = AUTOSCALING_THRESHOLD * 100
+  // Anchored to the actual right edge of the highlighted "border-r" zone below, rather than
+  // trusting resizePercentage alone, since usedPercentage* are each rounded independently and
+  // can drift a fraction of a percent from usedTotalPercentage.
+  const resizeMarkerLeftPercentage =
+    usedPercentageDatabase +
+    usedPercentageWAL +
+    usedPercentageSystem +
+    Math.max(0, resizePercentage - usedTotalPercentage)
 
   return (
     <div className="flex flex-col gap-2">
@@ -166,45 +173,40 @@ export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
               </motion.div>
             )}
           </AnimatePresence>
-        </div>
-        <AnimatePresence initial={true}>
           {!showNewSize && (
-            <motion.div
-              key="currentSize"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.1 }}
-              className="absolute h-8 w-full mx-[-2px]"
+            <div
+              className="absolute z-10"
+              style={{
+                left: `${resizeMarkerLeftPercentage}%`,
+                top: '-20px',
+                transform: 'translateX(-50%)',
+              }}
             >
-              <div
-                className="absolute top-0 left-0 h-full flex items-center transition-all duration-500 ease-in-out"
-                style={{ left: `${showNewSize ? newResizePercentage : resizePercentage}%` }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="absolute right-full bottom-0 border mr-2 px-2 py-1 bg-surface-400 rounded-sm text-xs text-foreground-light whitespace-nowrap flex items-center gap-x-1">
-                      Autoscaling <Info size={12} />
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" className="w-[310px] flex flex-col gap-y-1">
-                    <p>
-                      Supabase expands your disk storage automatically when the database reaches 90%
-                      of the disk size. However, disk modifications, including auto-scaling, are
-                      limited to 4 within a rolling 24-hour window.
-                    </p>
-                    <p>
-                      If you exhaust these modifications and reach 95% of the disk space, your
-                      project{' '}
-                      <span className="text-destructive-600">will enter read-only mode.</span>
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-                <div className="w-px h-full bg-border" />
-              </div>
-            </motion.div>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center justify-center cursor-help text-foreground-lighter hover:text-foreground transition-colors">
+                    <Info size={14} />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="top"
+                  className="w-[310px] flex flex-col gap-y-1 leading-relaxed text-foreground-light"
+                >
+                  <h3 className="text-sm font-medium text-foreground">Autoscaling</h3>
+                  <p>
+                    Supabase expands your disk storage automatically when the database reaches 90%
+                    of the disk size. However, disk modifications, including auto-scaling, are
+                    limited to 4 within a rolling 24-hour window.
+                  </p>
+                  <p>
+                    If you exhaust these modifications and reach 95% of the disk space, your project{' '}
+                    <span className="text-destructive-600">will enter read-only mode.</span>
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
           )}
-        </AnimatePresence>
+        </div>
       </div>
       {!showNewSize && (
         <div className="flex items-center space-x-3 text-xs text-foreground-lighter">