Fix Layout

src/app/(protected)/orders/page.tsx

@@ -245,7 +245,7 @@ const MOCK_ORDERS: Order[] = [
         dimensionsCmW: 12,
         dimensionsCmH: 8,
         fulfillStatus: "unfulfilled",
-        shipBy: "2025-10-09T18:00+07:00",
+        shipBy: "2025-10-09T18:00:00+07:00",
         carrier: "Flash",
         serviceLevel: "COD-Standard",
         trackingNo: null,
@@ -409,9 +409,7 @@ function downloadCsv(filename: string, rows: Order[], cols: Column[]) {
     const csv =
         headers.join(",") +
         "\n" +
-        rows
+        rows.map((r) => keys.map((k) => escapeCsv(getProp(r, k))).join(",")).join("\n");
-            .map((r) => keys.map((k) => escapeCsv(getProp(r, k))).join(","))
-            .join("\n");
     const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -619,7 +617,17 @@ export default function OrdersPage() {
     }, [visibleCols]);
 
     return (
-        <div className="space-y-6">
+        <>
+            {/* ทำให้กว้างหน้า "นิ่งเท่ากัน" เสมอ โดยจองที่สกรอลล์บาร์ */}
+            <style jsx global>{`
+        html { scrollbar-gutter: stable both-edges; }
+        @supports not (scrollbar-gutter: stable both-edges) {
+          html { overflow-y: scroll; }
+        }
+      `}</style>
+
+            {/* ผูกหน้าเข้ากับกรอบคงที่ */}
+            <div className="mx-auto w-full max-w-7xl px-6 space-y-6">
                 {/* Header */}
                 <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                     <div>
@@ -647,7 +655,7 @@ export default function OrdersPage() {
                     </div>
                 </div>
 
-            {/* Filters — ใช้ p-5 ให้เท่ากันทุกการ์ด */}
+                {/* Filters */}
                 <section className="rounded-3xl border border-neutral-200/70 bg-white/80 p-5 shadow-[0_10px_30px_-12px_rgba(0,0,0,0.08)]">
                     <div className="grid gap-3 sm:grid-cols-12">
                         <div className="sm:col-span-6">
@@ -704,7 +712,7 @@ export default function OrdersPage() {
                     </div>
                 </section>
 
-            {/* Table — ดึงสกรอลบาร์ออกนอก padding ด้วย -mx-5 แล้วชดเชย px-5 */}
+                {/* Table — เก็บเนื้อหาทั้งหมดด้วยสกรอลล์แนวนอน และสกรอลล์บาร์ชิดขอบการ์ด */}
                 <section className="rounded-3xl border border-neutral-200/70 bg-white/80 p-5 shadow-[0_10px_30px_-12px_rgba(0,0,0,0.08)]">
                     <div className="-mx-5 overflow-x-auto">
                         <div className="px-5">
@@ -715,7 +723,7 @@ export default function OrdersPage() {
                                         <th
                                             key={`${seg.groupTH}-${idx}`}
                                             colSpan={seg.colSpan}
-                                        className="pb-1 pr-4 whitespace-nowrap text-center text-[12px] font-semibold"
+                                            className="whitespace-nowrap pb-1 pr-4 text-center text-[12px] font-semibold"
                                         >
                                             {seg.groupTH}
                                         </th>
@@ -725,7 +733,7 @@ export default function OrdersPage() {
                                     {visibleCols.map((c) => (
                                         <th
                                             key={String(c.key)}
-                                        className={`pb-2 pr-4 whitespace-nowrap ${c.align === "right" ? "text-right" : ""}`}
+                                            className={`whitespace-nowrap pb-2 pr-4 ${c.align === "right" ? "text-right" : ""}`}
                                         >
                                             {c.labelTH}
                                         </th>
@@ -884,7 +892,9 @@ export default function OrdersPage() {
                                             setOpenCustomize(false);
                                         }}
                                         className={`rounded-xl px-3 py-1.5 text-sm font-semibold shadow-sm ${
-                                        tempKeys.length === 0 ? "cursor-not-allowed bg-neutral-200 text-neutral-500" : "bg-neutral-900 text-white hover:bg-neutral-800"
+                                            tempKeys.length === 0
+                                                ? "cursor-not-allowed bg-neutral-200 text-neutral-500"
+                                                : "bg-neutral-900 text-white hover:bg-neutral-800"
                                         }`}
                                     >
                                         ใช้ค่าที่เลือก
@@ -895,5 +905,6 @@ export default function OrdersPage() {
                     </div>
                 )}
             </div>
+        </>
     );
 }

src/app/globals.css

@@ -1,5 +1,11 @@
 @import "tailwindcss";
 
+html { scrollbar-gutter: stable both-edges; }
+
+@supports not (scrollbar-gutter: stable both-edges) {
+    html { overflow-y: scroll; }
+}
+
 :root {
   --background: #ffffff;
   --foreground: #171717;