diff --git a/src/globals.css b/src/globals.css
index 7ced918d..e76d255d 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -83,6 +83,7 @@
     }
     body {
         @apply bg-background text-foreground;
+        overscroll-behavior-x: none;
     }
 
     .text-editable {
diff --git a/src/pages/editor-page/side-panel/tables-section/table-dbml/table-dbml.tsx b/src/pages/editor-page/side-panel/tables-section/table-dbml/table-dbml.tsx
index ef68fdf0..eb47c350 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-dbml/table-dbml.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-dbml/table-dbml.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import type { DBTable } from '@/lib/domain/db-table';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useTheme } from '@/hooks/use-theme';
@@ -76,12 +76,15 @@ export const TableDBML: React.FC<TableDBMLProps> = ({ filteredTables }) => {
     }, [currentDiagram, filteredTables, toast]);
 
     // Determine which DBML string to display
-    const dbmlToDisplay = dbmlFormat === 'inline' ? inlineDbml : standardDbml;
+    const dbmlToDisplay = useMemo(
+        () => (dbmlFormat === 'inline' ? inlineDbml : standardDbml),
+        [dbmlFormat, inlineDbml, standardDbml]
+    );
 
     // Toggle function
-    const toggleFormat = () => {
+    const toggleFormat = useCallback(() => {
         setDbmlFormat((prev) => (prev === 'inline' ? 'standard' : 'inline'));
-    };
+    }, []);
 
     return (
         <CodeSnippet