From 3baeee80026a03222c2cb1a8bf8d0066afa9dc4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Wed, 18 Mar 2026 08:36:36 +0300
Subject: [PATCH] =?UTF-8?q?Developer=20Kits=20i=C3=A7in=20Responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../developerKit/CrudEndpointManager.tsx      | 13 +++++++-----
 .../developerKit/DynamicServiceEditor.tsx     |  6 +++---
 .../developerKit/DynamicServiceManager.tsx    | 20 +++++++++----------
 ui/src/views/developerKit/SqlQueryManager.tsx | 18 ++++++++---------
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/ui/src/views/developerKit/CrudEndpointManager.tsx b/ui/src/views/developerKit/CrudEndpointManager.tsx
index e281254..aa3f5e1 100644
--- a/ui/src/views/developerKit/CrudEndpointManager.tsx
+++ b/ui/src/views/developerKit/CrudEndpointManager.tsx
@@ -372,9 +372,12 @@ const CrudEndpointManager: React.FC = () => {
       </div>
 
       {/* Main two-panel layout */}
-      <div className="flex gap-4" style={{ height: 'calc(100vh - 250px)', minHeight: 400 }}>
+      <div
+        className="flex flex-col gap-4 lg:flex-row"
+        style={{ minHeight: 400, height: 'calc(100vh - 250px)' }}
+      >
         {/* Left Panel: Table List */}
-        <div className="w-72 flex-shrink-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden">
+        <div className="w-full lg:w-72 lg:flex-shrink-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden h-[38vh] min-h-[260px] lg:h-auto lg:min-h-0">
           {/* DataSource selector */}
           <div className="p-3 border-b border-slate-200 bg-slate-50">
             <select
@@ -494,7 +497,7 @@ const CrudEndpointManager: React.FC = () => {
         </div>
 
         {/* Right Panel: Endpoint Management */}
-        <div className="flex-1 min-w-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden">
+        <div className="flex-1 min-w-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden min-h-0">
           {!selectedTable ? (
             <div className="flex-1 flex flex-col items-center justify-center text-slate-400 p-8">
               <FaDatabase className="text-4xl mb-3 text-slate-200" />
@@ -506,7 +509,7 @@ const CrudEndpointManager: React.FC = () => {
           ) : (
             <div className="flex flex-col h-full overflow-hidden">
               {/* Table header */}
-              <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50">
+              <div className="flex flex-col gap-3 p-4 border-b border-slate-200 bg-slate-50 sm:flex-row sm:items-center sm:justify-between">
                 <div className="flex items-center gap-3">
                   <div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
                     <FaTable />
@@ -515,7 +518,7 @@ const CrudEndpointManager: React.FC = () => {
                     <h4 className="text-slate-900">{selectedTable.schemaName}.{selectedTable.tableName}</h4>
                   </div>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex flex-wrap items-center gap-2">
                   {selectedTableEndpoints.length > 0 && (
                     <button
                       onClick={() => handleDeleteAll(selectedTable)}
diff --git a/ui/src/views/developerKit/DynamicServiceEditor.tsx b/ui/src/views/developerKit/DynamicServiceEditor.tsx
index e90b98b..dae11d2 100644
--- a/ui/src/views/developerKit/DynamicServiceEditor.tsx
+++ b/ui/src/views/developerKit/DynamicServiceEditor.tsx
@@ -301,9 +301,9 @@ const DynamicServiceEditor: React.FC = () => {
       )}
 
       {/* Two-panel layout */}
-      <div className="flex gap-4 items-start">
+      <div className="flex flex-col xl:flex-row gap-4 items-stretch xl:items-start">
         {/* LEFT PANEL — Servis Ayarları */}
-        <div className="w-1/4 shrink-0 bg-white rounded-lg border border-slate-200 p-5 space-y-4">
+        <div className="w-full xl:w-1/4 shrink-0 bg-white rounded-lg border border-slate-200 p-5 space-y-4">
           {/* Panel header */}
           <div className="flex items-center gap-2 pb-3 border-b border-slate-100">
             <FaCog className="w-4 h-4 text-blue-500" />
@@ -377,7 +377,7 @@ const DynamicServiceEditor: React.FC = () => {
         </div>
 
         {/* RIGHT PANEL — Önizleme + Editor */}
-        <div className="flex-1 min-w-0 space-y-4">
+        <div className="w-full flex-1 min-w-0 space-y-4">
           {/* Monaco Editor */}
           <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
             <div className="px-5 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
diff --git a/ui/src/views/developerKit/DynamicServiceManager.tsx b/ui/src/views/developerKit/DynamicServiceManager.tsx
index c5bf204..239615d 100644
--- a/ui/src/views/developerKit/DynamicServiceManager.tsx
+++ b/ui/src/views/developerKit/DynamicServiceManager.tsx
@@ -126,7 +126,7 @@ const DynamicServiceManager: React.FC = () => {
       />
 
       {/* Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-5 gap-6 mt-2 mb-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4 mt-2 mb-4">
         {stats.map((stat, index) => (
           <div key={index} className="bg-white rounded-lg border border-slate-200 p-6">
             <div className="flex items-center justify-between">
@@ -143,7 +143,7 @@ const DynamicServiceManager: React.FC = () => {
       </div>
 
       {/* Toolbar */}
-      <div className="flex flex-col sm:flex-row gap-4">
+      <div className="flex flex-col lg:flex-row lg:items-center gap-3">
         <div className="flex-1 relative">
           <FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
           <input
@@ -154,14 +154,14 @@ const DynamicServiceManager: React.FC = () => {
             className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           />
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 w-full lg:w-auto">
           <FaFilter className="w-4 h-4 text-slate-500" />
           <select
             value={filterStatus}
             onChange={(e) =>
               setFilterStatus(e.target.value as 'all' | 'Success' | 'Failed' | 'Pending')
             }
-            className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full lg:w-auto px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           >
             <option value="all">{translate('::App.DeveloperKit.DynamicServices.FilterAll')}</option>
             <option value="Success">{translate('::App.DeveloperKit.DynamicServices.Successful')}</option>
@@ -169,19 +169,19 @@ const DynamicServiceManager: React.FC = () => {
             <option value="Pending">{translate('::App.DeveloperKit.DynamicServices.FilterPending')}</option>
           </select>
         </div>
-        <div>
+        <div className="w-full sm:w-auto">
           <Link
             to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesNew}
-            className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+            className="w-full sm:w-auto justify-center flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
           >
             <FaPlus className="w-4 h-4" />
             {translate('::App.DeveloperKit.DynamicServices.NewService')}
           </Link>
         </div>
-        <div>
+        <div className="w-full sm:w-auto">
           <button
             onClick={openSwagger}
-            className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
+            className="w-full sm:w-auto justify-center flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
           >
             <FaExternalLinkAlt className="w-3 h-3" />
             Swagger
@@ -202,7 +202,7 @@ const DynamicServiceManager: React.FC = () => {
               className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
             >
               <div className="p-6">
-                <div className="flex items-start justify-between">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                   <div className="flex-1">
                     <div className="flex items-center gap-2 mb-1">
                       <h3 className="text-base font-semibold text-slate-900">{service.name}</h3>
@@ -227,7 +227,7 @@ const DynamicServiceManager: React.FC = () => {
                     )}
                   </div>
                   {service.lastSuccessfulCompilation && (
-                    <div className="flex items-center gap-1 text-xs text-slate-400 ml-4 whitespace-nowrap">
+                    <div className="flex items-center gap-1 text-xs text-slate-400 sm:ml-4 whitespace-nowrap">
                       <FaCalendarAlt className="w-3 h-3" />
                       <span>
                         {new Date(service.lastSuccessfulCompilation).toLocaleDateString()}
diff --git a/ui/src/views/developerKit/SqlQueryManager.tsx b/ui/src/views/developerKit/SqlQueryManager.tsx
index 6b73200..7aaa939 100644
--- a/ui/src/views/developerKit/SqlQueryManager.tsx
+++ b/ui/src/views/developerKit/SqlQueryManager.tsx
@@ -404,14 +404,11 @@ GO`,
       <div className="flex flex-col flex-1 min-h-0 p-1">
         {/* Toolbar */}
         <div className="flex-shrink-0 shadow-sm mb-4">
-          <div className="flex items-center justify-between px-1 py-1">
-            <div className="flex items-center gap-3">
+          <div className="flex flex-col gap-2 px-1 py-1 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-3">
               <FaDatabase className="text-lg text-blue-500" />
-              <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
-                {translate('::App.Platform.DataSource')}:
-              </span>
               <select
-                className="border border-gray-300 rounded px-1 py-1"
+                className="border border-gray-300 rounded px-2 py-1 max-w-full"
                 disabled={state.selectedDataSource?.length === 0}
                 value={state.selectedDataSource || ''}
                 onChange={(e) => {
@@ -427,7 +424,7 @@ GO`,
               </select>
             </div>
 
-            <div className="flex items-center gap-3">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-3">
               <Button
                 size="sm"
                 variant="default"
@@ -452,12 +449,13 @@ GO`,
               </Button>
             </div>
           </div>
+
         </div>
 
         {/* Main Content Area */}
-        <div className="flex-1 flex min-h-0">
+        <div className="flex-1 flex min-h-0 flex-col gap-3 lg:flex-row lg:gap-4">
           {/* Left Panel - Object Explorer */}
-          <div className="w-1/3 flex-shrink-0 flex flex-col min-h-0 mr-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 shadow">
+          <div className="w-full lg:w-1/3 flex-shrink-0 flex flex-col h-[35vh] min-h-[260px] max-h-[420px] lg:h-auto lg:min-h-0 lg:max-h-none bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 shadow">
             <div className="border-b px-4 py-2 bg-gray-50 dark:bg-gray-800 flex-shrink-0 rounded-t-lg">
               <h6 className="font-semibold text-sm">
                 {translate('::App.Platform.ObjectExplorer')}
@@ -476,7 +474,7 @@ GO`,
           </div>
 
           {/* Center Panel - Editor and Results */}
-          <div className="flex-1 flex flex-col min-h-0 mr-4">
+          <div className="flex-1 flex flex-col min-h-0">
             {state.executionResult || state.tableColumns ? (
               <Splitter direction="vertical" initialSize={250} minSize={150} maxSize={1200}>
                 <div className="border rounded-lg shadow-sm bg-white dark:bg-gray-800 flex flex-col h-full">