From 8e350c1d1101d5570546bb8bd2f280ed16e47a2d Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Tue, 15 Sep 2026 12:02:17 +1000
Subject: [PATCH] split text size into a follow-up

---
 .../Account/Preferences/TextSizeSettings.tsx  | 39 -------------------
 .../Account/Preferences/ThemeSettings.tsx     |  2 -
 .../App/AppearanceSettingsProvider.tsx        |  7 +---
 .../App/AppearanceSettingsScript.tsx          | 10 -----
 apps/studio/hooks/misc/useTextSize.ts         | 31 ---------------
 apps/studio/lib/__tests__/text-size.test.ts   | 29 --------------
 apps/studio/lib/text-size.ts                  | 20 ----------
 apps/studio/pages/_app.tsx                    |  2 -
 apps/studio/routes/__root.tsx                 |  2 -
 apps/studio/styles/globals.css                | 34 ----------------
 packages/common/constants/local-storage.ts    |  2 -
 11 files changed, 1 insertion(+), 177 deletions(-)
 delete mode 100644 apps/studio/components/interfaces/Account/Preferences/TextSizeSettings.tsx
 delete mode 100644 apps/studio/components/interfaces/App/AppearanceSettingsScript.tsx
 delete mode 100644 apps/studio/hooks/misc/useTextSize.ts
 delete mode 100644 apps/studio/lib/__tests__/text-size.test.ts
 delete mode 100644 apps/studio/lib/text-size.ts

diff --git a/apps/studio/components/interfaces/Account/Preferences/TextSizeSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/TextSizeSettings.tsx
deleted file mode 100644
index 52f3f7c6743..00000000000
--- a/apps/studio/components/interfaces/Account/Preferences/TextSizeSettings.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { CardContent, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-
-import { useTextSize } from '@/hooks/misc/useTextSize'
-import { applyTextSize, parseTextSize, TEXT_SIZE_OPTIONS } from '@/lib/text-size'
-
-export const TextSizeSettings = () => {
-  const { textSize, setTextSize } = useTextSize()
-  return (
-    <CardContent>
-      <FormItemLayout
-        isReactForm={false}
-        label="Text size"
-        layout="flex-row-reverse"
-        description="Adjust the size of interface text without changing layout density."
-      >
-        <Select
-          value={textSize}
-          onValueChange={(next) => {
-            const value = parseTextSize(next)
-            applyTextSize(document.documentElement, value)
-            setTextSize(value)
-          }}
-        >
-          <SelectTrigger aria-label="Text size">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {TEXT_SIZE_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value}>
-                {option.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </FormItemLayout>
-    </CardContent>
-  )
-}
diff --git a/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx
index 4d461b13757..d5117cc6206 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx
@@ -25,7 +25,6 @@ import {
   PageSectionTitle,
 } from 'ui-patterns/PageSection'
 
-import { TextSizeSettings } from './TextSizeSettings'
 import { ThemeColorSettings } from './ThemeColorSettings'
 import { DEFAULT_SIDEBAR_BEHAVIOR } from '@/components/interfaces/Sidebar'
 import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
@@ -114,7 +113,6 @@ export const ThemeSettings = () => {
             </div>
           </CardContent>
           <ThemeColorSettings />
-          <TextSizeSettings />
           <CardContent>
             <FormItemLayout
               isReactForm={false}
diff --git a/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx b/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx
index 8b7abf24013..b638732a180 100644
--- a/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx
+++ b/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx
@@ -1,21 +1,16 @@
 import { useTheme } from 'next-themes'
 import { useLayoutEffect } from 'react'
 
-import { useTextSize } from '@/hooks/misc/useTextSize'
 import { useThemeOverrides } from '@/hooks/misc/useThemeOverrides'
-import { applyTextSize } from '@/lib/text-size'
 import { applyThemeOverrides } from '@/lib/theme-overrides'
 
 export const AppearanceSettingsProvider = () => {
   const { theme, setTheme } = useTheme()
   const { mode, overrides } = useThemeOverrides()
-  const { textSize } = useTextSize()
-
   useLayoutEffect(() => {
     if (theme === 'classic-dark') setTheme('dark')
     applyThemeOverrides(document.documentElement, mode, overrides)
-    applyTextSize(document.documentElement, textSize)
-  }, [mode, overrides, setTheme, textSize, theme])
+  }, [mode, overrides, setTheme, theme])
 
   return null
 }
diff --git a/apps/studio/components/interfaces/App/AppearanceSettingsScript.tsx b/apps/studio/components/interfaces/App/AppearanceSettingsScript.tsx
deleted file mode 100644
index 38bd0689444..00000000000
--- a/apps/studio/components/interfaces/App/AppearanceSettingsScript.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LOCAL_STORAGE_KEYS } from 'common'
-
-const textSizeKey = JSON.stringify(LOCAL_STORAGE_KEYS.UI_TEXT_SIZE)
-
-const appearanceSettingsScript = `try{const value=JSON.parse(localStorage.getItem(${textSizeKey}));document.documentElement.dataset.textSize=value==='small'||value==='large'?value:'default'}catch{document.documentElement.dataset.textSize='default'}`
-
-/** Applies persisted typography before Studio paints to avoid a layout shift. */
-export const AppearanceSettingsScript = () => (
-  <script dangerouslySetInnerHTML={{ __html: appearanceSettingsScript }} />
-)
diff --git a/apps/studio/hooks/misc/useTextSize.ts b/apps/studio/hooks/misc/useTextSize.ts
deleted file mode 100644
index 2205f156cf4..00000000000
--- a/apps/studio/hooks/misc/useTextSize.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { LOCAL_STORAGE_KEYS, safeLocalStorage } from 'common'
-import { useCallback, useMemo } from 'react'
-
-import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
-import { parseTextSize, TextSize } from '@/lib/text-size'
-
-function readStoredTextSize(): TextSize {
-  const stored = safeLocalStorage.getItem(LOCAL_STORAGE_KEYS.UI_TEXT_SIZE)
-  if (stored === null) return 'default'
-
-  try {
-    return parseTextSize(JSON.parse(stored))
-  } catch {
-    return 'default'
-  }
-}
-
-export function useTextSize() {
-  const [storedTextSize, setStoredTextSize] = useLocalStorageQuery<unknown>(
-    LOCAL_STORAGE_KEYS.UI_TEXT_SIZE,
-    readStoredTextSize()
-  )
-  const textSize = useMemo(() => parseTextSize(storedTextSize), [storedTextSize])
-
-  const setTextSize = useCallback(
-    (value: TextSize) => setStoredTextSize(value),
-    [setStoredTextSize]
-  )
-
-  return { textSize, setTextSize }
-}
diff --git a/apps/studio/lib/__tests__/text-size.test.ts b/apps/studio/lib/__tests__/text-size.test.ts
deleted file mode 100644
index 7a97a6eccd2..00000000000
--- a/apps/studio/lib/__tests__/text-size.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { applyTextSize, parseTextSize, TEXT_SIZE_OPTIONS } from '@/lib/text-size'
-
-describe('text size', () => {
-  it('provides the three supported options', () => {
-    expect(TEXT_SIZE_OPTIONS).toEqual([
-      { label: 'Small', value: 'small' },
-      { label: 'Default', value: 'default' },
-      { label: 'Large', value: 'large' },
-    ])
-  })
-
-  it.each(['small', 'default', 'large'] as const)('parses %s', (textSize) => {
-    expect(parseTextSize(textSize)).toBe(textSize)
-  })
-
-  it.each([undefined, null, 'compact', 1, {}])('defaults malformed data: %j', (value) => {
-    expect(parseTextSize(value)).toBe('default')
-  })
-
-  it('applies the root data attribute', () => {
-    const root = document.createElement('html')
-
-    applyTextSize(root, 'large')
-
-    expect(root.dataset.textSize).toBe('large')
-  })
-})
diff --git a/apps/studio/lib/text-size.ts b/apps/studio/lib/text-size.ts
deleted file mode 100644
index d45c6da1ee3..00000000000
--- a/apps/studio/lib/text-size.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as z from 'zod'
-
-export const TEXT_SIZE_OPTIONS = [
-  { label: 'Small', value: 'small' },
-  { label: 'Default', value: 'default' },
-  { label: 'Large', value: 'large' },
-] as const
-
-const textSizeSchema = z.enum(['small', 'default', 'large'])
-
-export type TextSize = z.infer<typeof textSizeSchema>
-
-export function parseTextSize(value: unknown): TextSize {
-  const parsed = textSizeSchema.safeParse(value)
-  return parsed.success ? parsed.data : 'default'
-}
-
-export function applyTextSize(root: HTMLElement, textSize: TextSize) {
-  root.dataset.textSize = textSize
-}
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index 24c12a81197..30b960d01b0 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -39,7 +39,6 @@ import { studioThemeValues, TooltipProvider } from 'ui'
 import { TimestampInfoProvider } from 'ui-patterns/TimestampInfo'
 
 import { AppearanceSettingsProvider } from '@/components/interfaces/App/AppearanceSettingsProvider'
-import { AppearanceSettingsScript } from '@/components/interfaces/App/AppearanceSettingsScript'
 import { StudioCommandMenu } from '@/components/interfaces/App/CommandMenu'
 import { StudioCommandProvider as CommandProvider } from '@/components/interfaces/App/CommandMenu/StudioCommandProvider'
 import { FeaturePreviewContextProvider } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
@@ -184,7 +183,6 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                     <TimestampInfoTimezoneBridge>
                       <Head>
                         <title>{appTitle ?? 'Supabase'}</title>
-                        <AppearanceSettingsScript />
                         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                         <meta property="og:image" content={`${BASE_PATH}/img/supabase-og.png`} />
                         <meta name="googlebot" content="notranslate" />
diff --git a/apps/studio/routes/__root.tsx b/apps/studio/routes/__root.tsx
index 1f84b0e37c9..48fc7e5a0a9 100644
--- a/apps/studio/routes/__root.tsx
+++ b/apps/studio/routes/__root.tsx
@@ -61,7 +61,6 @@ import { studioThemeValues, TooltipProvider } from 'ui'
 import { TimestampInfoProvider } from 'ui-patterns/TimestampInfo'
 
 import { AppearanceSettingsProvider } from '@/components/interfaces/App/AppearanceSettingsProvider'
-import { AppearanceSettingsScript } from '@/components/interfaces/App/AppearanceSettingsScript'
 import { StudioCommandMenu } from '@/components/interfaces/App/CommandMenu'
 import { StudioCommandProvider as CommandProvider } from '@/components/interfaces/App/CommandMenu/StudioCommandProvider'
 import { FeaturePreviewContextProvider } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
@@ -431,7 +430,6 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
     // prerendered shell can't know. Scoped to this element only.
     <html lang="en" suppressHydrationWarning>
       <head>
-        <AppearanceSettingsScript />
         <HeadContent />
       </head>
       <body>
diff --git a/apps/studio/styles/globals.css b/apps/studio/styles/globals.css
index ce54eafeaf1..44e8f55b3c1 100644
--- a/apps/studio/styles/globals.css
+++ b/apps/studio/styles/globals.css
@@ -68,40 +68,6 @@
   --font-weight-normal: 450;
 }
 
-:root[data-text-size='small'] {
-  --text-grid: 12.22px;
-  --text-xs: 0.705rem;
-  --text-sm: 0.7638rem;
-  --text-base: 0.8813rem;
-  --text-lg: 0.94rem;
-  --text-xl: 1.0575rem;
-  --text-2xl: 1.2925rem;
-  --text-3xl: 1.645rem;
-  --text-4xl: 1.9975rem;
-  --text-5xl: 2.7025rem;
-  --text-6xl: 3.4075rem;
-  --text-7xl: 4.1125rem;
-  --text-8xl: 5.5225rem;
-  --text-9xl: 7.4025rem;
-}
-
-:root[data-text-size='large'] {
-  --text-grid: 13.78px;
-  --text-xs: 0.795rem;
-  --text-sm: 0.8613rem;
-  --text-base: 0.9938rem;
-  --text-lg: 1.06rem;
-  --text-xl: 1.1925rem;
-  --text-2xl: 1.4575rem;
-  --text-3xl: 1.855rem;
-  --text-4xl: 2.2525rem;
-  --text-5xl: 3.0475rem;
-  --text-6xl: 3.8425rem;
-  --text-7xl: 4.6375rem;
-  --text-8xl: 6.2275rem;
-  --text-9xl: 8.3475rem;
-}
-
 @keyframes shimmer {
   0% {
     background-position: -1000px 0;
diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts
index 98e61be95b3..dfd47aa7692 100644
--- a/packages/common/constants/local-storage.ts
+++ b/packages/common/constants/local-storage.ts
@@ -18,7 +18,6 @@ export const LOCAL_STORAGE_KEYS = {
 
   UI_TIMEZONE: 'supabase-ui-timezone',
   UI_THEME_OVERRIDES: 'supabase-ui-theme-overrides',
-  UI_TEXT_SIZE: 'supabase-ui-text-size',
   UI_PREVIEW_CLS: 'supabase-ui-cls',
   UI_PREVIEW_INLINE_EDITOR: 'supabase-ui-preview-inline-editor',
   UI_PREVIEW_UNIFIED_LOGS: 'supabase-ui-preview-unified-logs',
@@ -182,7 +181,6 @@ const LOCAL_STORAGE_KEYS_ALLOWLIST = [
   LOCAL_STORAGE_KEYS.SIDEBAR_BEHAVIOR,
   LOCAL_STORAGE_KEYS.UI_TIMEZONE,
   LOCAL_STORAGE_KEYS.UI_THEME_OVERRIDES,
-  LOCAL_STORAGE_KEYS.UI_TEXT_SIZE,
 ]
 
 export function clearLocalStorage() {