From 7495f905585b02999317edc3d4e7107c52832a98 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <70828596+Isaiah-Hamilton@users.noreply.github.com>
Date: Sun, 17 Jul 2022 23:00:50 -0400
Subject: [PATCH 1/2] fix: text overflow

---
 studio/components/ui/ConfirmationModal.tsx     | 2 +-
 studio/pages/project/[ref]/database/tables.tsx | 2 +-
 studio/pages/project/[ref]/editor/[id].tsx     | 2 +-
 studio/pages/project/[ref]/editor/index.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/studio/components/ui/ConfirmationModal.tsx b/studio/components/ui/ConfirmationModal.tsx
index b503b3e0939..d74b83f7765 100644
--- a/studio/components/ui/ConfirmationModal.tsx
+++ b/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
diff --git a/studio/pages/project/[ref]/database/tables.tsx b/studio/pages/project/[ref]/database/tables.tsx
index 568daed8d04..bfbd67bff28 100644
--- a/studio/pages/project/[ref]/database/tables.tsx
+++ b/studio/pages/project/[ref]/database/tables.tsx
@@ -139,7 +139,7 @@ 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">
diff --git a/studio/pages/project/[ref]/editor/[id].tsx b/studio/pages/project/[ref]/editor/[id].tsx
index d897c547f1e..e188368b5f9 100644
--- a/studio/pages/project/[ref]/editor/[id].tsx
+++ b/studio/pages/project/[ref]/editor/[id].tsx
@@ -188,7 +188,7 @@ 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">
diff --git a/studio/pages/project/[ref]/editor/index.tsx b/studio/pages/project/[ref]/editor/index.tsx
index d5d80e71450..16a6d5968d1 100644
--- a/studio/pages/project/[ref]/editor/index.tsx
+++ b/studio/pages/project/[ref]/editor/index.tsx
@@ -78,7 +78,7 @@ 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"

From 01e23e10886816e7d6dd8f854e33a34551916f36 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <70828596+Isaiah-Hamilton@users.noreply.github.com>
Date: Sun, 17 Jul 2022 23:05:36 -0400
Subject: [PATCH 2/2] chore: run prettier

---
 studio/components/interfaces/Settings/Logs/Logs.constants.ts | 2 +-
 studio/pages/project/[ref]/database/tables.tsx               | 4 +++-
 studio/pages/project/[ref]/editor/[id].tsx                   | 4 +++-
 studio/pages/project/[ref]/editor/index.tsx                  | 4 +++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index 4c0740a1812..643a0ed5839 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/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 },
diff --git a/studio/pages/project/[ref]/database/tables.tsx b/studio/pages/project/[ref]/database/tables.tsx
index bfbd67bff28..541095f6f05 100644
--- a/studio/pages/project/[ref]/database/tables.tsx
+++ b/studio/pages/project/[ref]/database/tables.tsx
@@ -139,7 +139,9 @@ const DatabaseTables: NextPageWithLayout = () => {
       <ConfirmationModal
         danger
         visible={isDeleting && !isUndefined(selectedTableToDelete)}
-        header={<span className='break-words'>{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>}
+        header={
+          <span className="break-words">{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>
+        }
         children={
           <Modal.Content>
             <p className="text-scale-1100 py-4 text-sm">
diff --git a/studio/pages/project/[ref]/editor/[id].tsx b/studio/pages/project/[ref]/editor/[id].tsx
index e188368b5f9..b0aadab9925 100644
--- a/studio/pages/project/[ref]/editor/[id].tsx
+++ b/studio/pages/project/[ref]/editor/[id].tsx
@@ -188,7 +188,9 @@ const TableEditorPage: NextPage = () => {
       <ConfirmationModal
         danger
         visible={isDeleting && !isUndefined(selectedTableToDelete)}
-        header={<span className='break-words'>{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>}
+        header={
+          <span className="break-words">{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>
+        }
         children={
           <Modal.Content>
             <p className="text-scale-1100 py-4 text-sm">
diff --git a/studio/pages/project/[ref]/editor/index.tsx b/studio/pages/project/[ref]/editor/index.tsx
index 16a6d5968d1..406a8316992 100644
--- a/studio/pages/project/[ref]/editor/index.tsx
+++ b/studio/pages/project/[ref]/editor/index.tsx
@@ -78,7 +78,9 @@ const Editor: NextPage = () => {
       <ConfirmationModal
         danger
         visible={isDeleting && !isUndefined(selectedTableToDelete)}
-        header={<span className='break-words'>{`Confirm deletion of table "${selectedTableToDelete?.name}"`}</span>}
+        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"