Small adjustment to branch paddings (supabase#37238)

* Small adjustment to branch paddings

* For merge request too

* DRY

Author: joshenlim

apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx

@@ -24,7 +24,9 @@ export const BranchManagementSection = ({
       <div className="bg-surface-100 shadow-sm flex justify-between items-center px-4 py-3 rounded-t-lg text-xs font-mono uppercase">
         {typeof header === 'string' ? <span>{header}</span> : header}
       </div>
-      <div className="bg-surface border-t shadow-sm rounded-b-lg text-sm divide-y">{children}</div>
+      <div className="bg-surface border-t shadow-sm rounded-b-lg text-sm divide-y px-4">
+        {children}
+      </div>
       {footer !== undefined && <div className="bg-surface-100 px-6 py-1 border-t">{footer}</div>}
     </div>
   )

apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx

@@ -6,6 +6,8 @@ import { BranchSelector } from './BranchSelector'
 import { DocsButton } from 'components/ui/DocsButton'
 import { Button } from 'ui'
 
+const EMPTY_STATE_CONTAINER = 'flex items-center flex-col justify-center w-full py-10 px-4'
+
 export const PullRequestsEmptyState = ({
   url,
   projectRef,
@@ -24,9 +26,9 @@ export const PullRequestsEmptyState = ({
   gitlessBranching: boolean
 }) => {
   return (
-    <div className="flex items-center flex-col justify-center w-full py-10">
+    <div className={EMPTY_STATE_CONTAINER}>
       <p>No merge requests</p>
-      <p className="text-foreground-light">
+      <p className="text-foreground-light text-center">
         Create your first merge request to merge changes back to the main branch
       </p>
       <div className="flex items-center space-x-2 mt-4">
@@ -60,9 +62,9 @@ export const PreviewBranchesEmptyState = ({
   onSelectCreateBranch: () => void
 }) => {
   return (
-    <div className="flex items-center flex-col justify-center w-full py-10">
+    <div className={EMPTY_STATE_CONTAINER}>
       <p>Create your first preview branch</p>
-      <p className="text-foreground-light mb-4">
+      <p className="text-foreground-light text-center mb-4">
         Preview branches are short-lived environments that let you safely experiment with changes to
         your database schema without affecting your main database.
       </p>

apps/studio/components/interfaces/BranchManagement/Overview.tsx

@@ -16,14 +16,14 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
+import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
 import { useBranchQuery } from 'data/branches/branch-query'
 import { useBranchResetMutation } from 'data/branches/branch-reset-mutation'
 import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
 import type { Branch } from 'data/branches/branches-query'
 import { branchKeys } from 'data/branches/keys'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import {
   Button,
   DropdownMenu,
@@ -32,10 +32,10 @@ import {
   DropdownMenuTrigger,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { BranchLoader, BranchManagementSection, BranchRow, BranchRowLoader } from './BranchPanels'
 import { EditBranchModal } from './EditBranchModal'
 import { PreviewBranchesEmptyState } from './EmptyStates'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface OverviewProps {
   isLoading: boolean
@@ -99,7 +99,7 @@ export const Overview = ({
         {isSuccess && persistentBranches.length === 0 && (
           <div className="flex items-center flex-col justify-center w-full py-10">
             <p>No persistent branches</p>
-            <p className="text-foreground-light">
+            <p className="text-foreground-light text-center">
               Persistent branches are long-lived, cannot be reset, and are ideal for staging
               environments.
             </p>