diff --git a/ui/src/css/app.css b/ui/src/css/app.css
index aacb3d6..a723fd4 100644
--- a/ui/src/css/app.css
+++ b/ui/src/css/app.css
@@ -295,18 +295,16 @@ body {
   margin-top: calc(-1 * var(--header-h) - 58px);
 }
 
-.body--drawer-left-open .q-page-container {
-  margin-left: var(--drawer-w);
+.body--drawer-left-open .order-page {
   width: calc(100% - var(--drawer-w));
 }
-.body--drawer-left-closed .q-page-container {
-  margin-left: 0; width: 100%;
+.body--drawer-left-closed .order-page {
+  width: 100%;
 }
 
 @media (max-width: 1023px) {
-  .body--drawer-left-open .q-page-container,
-  .body--drawer-left-closed .q-page-container {
-    margin-left: 0 !important;
+  .body--drawer-left-open .order-page,
+  .body--drawer-left-closed .order-page {
     width: 100% !important;
   }
 }
diff --git a/ui/src/layouts/MainLayout.vue b/ui/src/layouts/MainLayout.vue
index e1f8ee8..9c212f8 100644
--- a/ui/src/layouts/MainLayout.vue
+++ b/ui/src/layouts/MainLayout.vue
@@ -23,7 +23,10 @@
     <q-drawer
       v-if="perm.loaded"
       v-model="leftDrawerOpen"
-      show-if-above
+      :show-if-above="!$q.screen.lt.md"
+      :overlay="$q.screen.lt.md"
+      :behavior="$q.screen.lt.md ? 'mobile' : 'desktop'"
+      :breakpoint="1023"
       bordered
       class="bg-secondary text-white"
     >
@@ -186,6 +189,15 @@ watch(
   }
 )
 
+watch(
+  () => $q.screen.lt.md,
+  (isMobile) => {
+    if (isMobile) {
+      leftDrawerOpen.value = false
+    }
+  }
+)
+
 
 /* ================= MENU CONFIG ================= */
 
diff --git a/ui/src/pages/OrderProductionUpdate.vue b/ui/src/pages/OrderProductionUpdate.vue
index 49ba160..6ff3dba 100644
--- a/ui/src/pages/OrderProductionUpdate.vue
+++ b/ui/src/pages/OrderProductionUpdate.vue
@@ -82,6 +82,7 @@
         :loading="store.loading"
         no-data-label="Uretime verilecek urun bulunamadi"
         :rows-per-page-options="[0]"
+        :table-style="{ tableLayout: 'fixed', width: '100%' }"
         hide-bottom
       >
       <template #header-cell-select="props">
@@ -105,22 +106,6 @@
         </q-td>
       </template>
 
-      <template #body-cell-actions="props">
-        <q-td :props="props" class="text-center">
-          <q-btn
-            color="primary"
-            icon="save"
-            flat
-            round
-            dense
-            :loading="rowSavingId === props.row.RowKey"
-            @click="onRowSubmit(props.row)"
-          >
-            <q-tooltip>Satiri Guncelle</q-tooltip>
-          </q-btn>
-        </q-td>
-      </template>
-
       <template #body-cell-NewItemCode="props">
         <q-td :props="props">
           <q-input
@@ -247,21 +232,19 @@ const rows = ref([])
 const descFilter = ref('')
 const productOptions = ref([])
 const productSearch = ref('')
-const rowSavingId = ref('')
 const selectedMap = ref({})
 
 const columns = [
   { name: 'select', label: '', field: 'select', align: 'center', sortable: false, style: 'width:44px;', headerStyle: 'width:44px;' },
-  { name: 'OldItemCode', label: 'Eski Urun Kodu', field: 'OldItemCode', align: 'left', sortable: true, style: 'min-width:120px;white-space:nowrap', headerStyle: 'min-width:120px;white-space:nowrap', headerClasses: 'col-old', classes: 'col-old' },
-  { name: 'OldColor', label: 'Eski Urun Rengi', field: 'OldColor', align: 'left', sortable: true, style: 'min-width:100px;white-space:nowrap', headerStyle: 'min-width:100px;white-space:nowrap', headerClasses: 'col-old', classes: 'col-old' },
-  { name: 'OldDim2', label: 'Eski 2. Renk', field: 'OldDim2', align: 'left', sortable: true, style: 'min-width:90px;white-space:nowrap', headerStyle: 'min-width:90px;white-space:nowrap', headerClasses: 'col-old', classes: 'col-old' },
-  { name: 'OldDesc', label: 'Eski Aciklama', field: 'OldDesc', align: 'left', sortable: false, style: 'min-width:160px;', headerStyle: 'min-width:160px;', headerClasses: 'col-old col-desc', classes: 'col-old col-desc' },
-  { name: 'OldSizes', label: 'Bedenler', field: 'OldSizesLabel', align: 'left', sortable: false, style: 'min-width:130px;', headerStyle: 'min-width:130px;', headerClasses: 'col-old col-wrap', classes: 'col-old col-wrap' },
-  { name: 'NewItemCode', label: 'Yeni Urun Kodu', field: 'NewItemCode', align: 'left', sortable: false, style: 'min-width:160px;', headerStyle: 'min-width:160px;', headerClasses: 'col-new col-new-first', classes: 'col-new col-new-first' },
-  { name: 'NewColor', label: 'Yeni Urun Rengi', field: 'NewColor', align: 'left', sortable: false, style: 'min-width:120px;', headerStyle: 'min-width:120px;', headerClasses: 'col-new', classes: 'col-new' },
-  { name: 'NewDim2', label: 'Yeni 2. Renk', field: 'NewDim2', align: 'left', sortable: false, style: 'min-width:120px;', headerStyle: 'min-width:120px;', headerClasses: 'col-new', classes: 'col-new' },
-  { name: 'NewDesc', label: 'Yeni Aciklama', field: 'NewDesc', align: 'left', sortable: false, style: 'min-width:200px;', headerStyle: 'min-width:200px;', headerClasses: 'col-new col-desc', classes: 'col-new col-desc' },
-  { name: 'actions', label: '', field: 'actions', align: 'center', sortable: false, style: 'width:50px;', headerStyle: 'width:50px;' }
+  { name: 'OldItemCode', label: 'Eski Urun Kodu', field: 'OldItemCode', align: 'left', sortable: true, style: 'min-width:90px;white-space:normal', headerStyle: 'min-width:90px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
+  { name: 'OldColor', label: 'Eski Urun Rengi', field: 'OldColor', align: 'left', sortable: true, style: 'min-width:80px;white-space:normal', headerStyle: 'min-width:80px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
+  { name: 'OldDim2', label: 'Eski 2. Renk', field: 'OldDim2', align: 'left', sortable: true, style: 'min-width:80px;white-space:normal', headerStyle: 'min-width:80px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
+  { name: 'OldDesc', label: 'Eski Aciklama', field: 'OldDesc', align: 'left', sortable: false, style: 'min-width:130px;', headerStyle: 'min-width:130px;', headerClasses: 'col-old col-desc', classes: 'col-old col-desc' },
+  { name: 'OldSizes', label: 'Bedenler', field: 'OldSizesLabel', align: 'left', sortable: false, style: 'min-width:90px;', headerStyle: 'min-width:90px;', headerClasses: 'col-old col-wrap', classes: 'col-old col-wrap' },
+  { name: 'NewItemCode', label: 'Yeni Urun Kodu', field: 'NewItemCode', align: 'left', sortable: false, style: 'min-width:130px;', headerStyle: 'min-width:130px;', headerClasses: 'col-new col-new-first', classes: 'col-new col-new-first' },
+  { name: 'NewColor', label: 'Yeni Urun Rengi', field: 'NewColor', align: 'left', sortable: false, style: 'min-width:100px;', headerStyle: 'min-width:100px;', headerClasses: 'col-new', classes: 'col-new' },
+  { name: 'NewDim2', label: 'Yeni 2. Renk', field: 'NewDim2', align: 'left', sortable: false, style: 'min-width:100px;', headerStyle: 'min-width:100px;', headerClasses: 'col-new', classes: 'col-new' },
+  { name: 'NewDesc', label: 'Yeni Aciklama', field: 'NewDesc', align: 'left', sortable: false, style: 'min-width:140px;', headerStyle: 'min-width:140px;', headerClasses: 'col-new col-desc', classes: 'col-new col-desc' }
 ]
 
 onMounted(async () => {
@@ -519,66 +502,12 @@ function groupItems (items, prevRows = []) {
   return out
 }
 
-function buildPayloadLines () {
-  return rows.value.flatMap(r =>
-    (r.OrderLineIDs || []).map(id => ({
-      OrderLineID: id,
-      NewItemCode: String(r.NewItemCode || '').trim(),
-      NewColor: String(r.NewColor || '').trim(),
-      NewDim2: String(r.NewDim2 || '').trim(),
-      NewDesc: String((r.NewDesc || r.OldDesc) || '').trim()
-    }))
-  )
-}
-
 async function refreshAll () {
   await store.fetchHeader(orderHeaderID.value)
   await store.fetchItems(orderHeaderID.value)
   await store.fetchProducts()
 }
 
-async function onRowSubmit (row) {
-  const { errMsg, lines } = collectLinesFromRows([row])
-  if (errMsg) {
-    $q.notify({ type: 'negative', message: errMsg })
-    return
-  }
-
-  if (!lines.length) {
-    $q.notify({ type: 'negative', message: 'Satir bulunamadi.' })
-    return
-  }
-
-  rowSavingId.value = row.RowKey
-  try {
-    const validate = await store.validateUpdates(orderHeaderID.value, lines)
-    const missingCount = validate?.missingCount || 0
-    if (missingCount > 0) {
-      const missingList = (validate?.missing || []).map(v => (
-        `${v.ItemCode} / ${v.ColorCode} / ${v.ItemDim1Code} / ${v.ItemDim2Code}`
-      ))
-      $q.dialog({
-        title: 'Eksik Varyantlar',
-        message: `Eksik varyant bulundu: ${missingCount}<br><br>${missingList.join('<br>')}`,
-        html: true,
-        ok: { label: 'Ekle ve Guncelle', color: 'primary' },
-        cancel: { label: 'Vazgec', flat: true }
-      }).onOk(async () => {
-        await store.applyUpdates(orderHeaderID.value, lines, true)
-        await store.fetchItems(orderHeaderID.value)
-      })
-      return
-    }
-
-    await store.applyUpdates(orderHeaderID.value, lines, false)
-    await store.fetchItems(orderHeaderID.value)
-  } catch (err) {
-    $q.notify({ type: 'negative', message: 'Islem basarisiz.' })
-  } finally {
-    rowSavingId.value = ''
-  }
-}
-
 async function onBulkSubmit () {
   const selectedRows = rows.value.filter(r => !!selectedMap.value[r.RowKey])
   if (!selectedRows.length) {
@@ -650,7 +579,7 @@ async function onBulkSubmit () {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .page-header {
@@ -676,7 +605,10 @@ async function onBulkSubmit () {
 .table-wrap {
   flex: 1;
   min-height: 0;
+  min-width: 0;
   display: flex;
+  width: 100%;
+  overflow: auto;
 }
 
 .prod-table :deep(.q-table__middle) {
@@ -740,4 +672,12 @@ async function onBulkSubmit () {
   word-break: break-word;
   line-height: 1.2;
 }
+
+.prod-table :deep(.q-field),
+.prod-table :deep(.q-field__control),
+.prod-table :deep(.q-select),
+.prod-table :deep(.q-input) {
+  width: 100%;
+  min-width: 0;
+}
 </style>