Merge pull request #7746 from supabase/fix/table-delete-modal-overflow

Fix: delete modal text overflow

studio/components/interfaces/Settings/Logs/Logs.constants.ts

@@ -471,7 +471,7 @@ export const getDefaultHelper = (helpers: DatetimeHelper[]) =>
   helpers.find((helper) => helper.default) || helpers[0]
 
 export const TIER_QUERY_LIMITS: {
-  [x: string]: { text: string; value: 1 | 7 | 90; unit: 'day', promptUpgrade: boolean }
+  [x: string]: { text: string; value: 1 | 7 | 90; unit: 'day'; promptUpgrade: boolean }
 } = {
   FREE: { text: '1 day', value: 1, unit: 'day', promptUpgrade: true },
   PRO: { text: '7 days', value: 7, unit: 'day', promptUpgrade: true },

studio/components/ui/ConfirmationModal.tsx

@@ -5,7 +5,7 @@ import { FC, useState, useEffect } from 'react'
 interface Props {
   visible: boolean
   danger?: boolean
-  header: string
+  header: string | JSX.Element
   description?: string
   size?: 'small' | 'tiny' | 'medium' | 'large'
   buttonLabel: string

studio/pages/project/[ref]/database/tables.tsx

@@ -139,7 +139,9 @@ const DatabaseTables: NextPageWithLayout = () => {
       <ConfirmationModal
         danger
         visible={isDeleting && !isUndefined(selectedTableToDelete)}
-        header={`Confirm deletion of table "${selectedTableToDelete?.name}"`}
+        header={
+          <span className="break-words">{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>
+        }
         children={
           <Modal.Content>
             <p className="text-scale-1100 py-4 text-sm">

studio/pages/project/[ref]/editor/[id].tsx

@@ -188,7 +188,9 @@ const TableEditorPage: NextPage = () => {
       <ConfirmationModal
         danger
         visible={isDeleting && !isUndefined(selectedTableToDelete)}
-        header={`Confirm deletion of table "${selectedTableToDelete?.name}"`}
+        header={
+          <span className="break-words">{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>
+        }
         children={
           <Modal.Content>
             <p className="text-scale-1100 py-4 text-sm">

studio/pages/project/[ref]/editor/index.tsx

@@ -78,7 +78,9 @@ const Editor: NextPage = () => {
       <ConfirmationModal
         danger
         visible={isDeleting && !isUndefined(selectedTableToDelete)}
-        header={`Confirm deletion of table "${selectedTableToDelete?.name}"`}
+        header={
+          <span className="break-words">{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>
+        }
         description={`Are you sure you want to delete the selected table? This action cannot be undone`}
         buttonLabel="Delete"
         buttonLoadingLabel="Deleting"