fix(layout): add scroll container for improved responsiveness and adjust container styles

src/components/modelAlias/ModelMappingDiagram.module.scss

@@ -1,13 +1,26 @@
 @use '../../styles/variables' as *;
 
-.container {
-  display: flex;
-  position: relative;
+.scrollContainer {
   width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.container {
+  display: inline-flex;
+  position: relative;
+  min-width: 100%;
   min-height: 300px;
   justify-content: space-between;
   padding: 20px 0;
   user-select: none;
+
+  @media (max-width: 768px) {
+    justify-content: flex-start;
+    gap: 16px;
+    padding: 12px 0;
+  }
 }
 
 // SVG layer for connection lines (behind columns so links are visible)

src/components/modelAlias/ModelMappingDiagram.tsx

@@ -430,8 +430,9 @@ export const ModelMappingDiagram = forwardRef<ModelMappingDiagramRef, ModelMappi
 
 
   return (
+    <div className={[styles.scrollContainer, className].filter(Boolean).join(' ')}>
       <div
-      className={[styles.container, className].filter(Boolean).join(' ')} 
+        className={styles.container}
         ref={containerRef}
         onContextMenu={(e) => {
           e.preventDefault();
@@ -497,6 +498,7 @@ export const ModelMappingDiagram = forwardRef<ModelMappingDiagramRef, ModelMappi
           onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
           label={t('oauth_model_alias.diagram_aliases')}
         />
+      </div>
 
       <DiagramContextMenu
         contextMenu={contextMenu}