diff --git a/apps/web/src/components/ui/report/ReportEditorSkeleton.tsx b/apps/web/src/components/ui/report/ReportEditorSkeleton.tsx
index 3ae7c13de..08de9fb88 100644
--- a/apps/web/src/components/ui/report/ReportEditorSkeleton.tsx
+++ b/apps/web/src/components/ui/report/ReportEditorSkeleton.tsx
@@ -54,7 +54,13 @@ export function ReportEditorSkeleton({
   showToolbar = false,
 }: ReportEditorSkeletonProps) {
   return (
-    <div className={cn('mx-auto mt-8 w-full space-y-6', className)}>
+    <div
+      className={cn(
+        'mx-auto mt-8 w-full space-y-6',
+        'sm:px-[max(64px,calc(50%-350px))] px-[max(24px,calc(50%-350px))]',
+        className
+      )}
+    >
       {/* Toolbar skeleton */}
       {showToolbar && (
         <div className="border-border flex h-11 w-full animate-pulse items-center justify-between border-b bg-transparent px-3">
diff --git a/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx b/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx
index 7e8fce9f4..79e253ad2 100644
--- a/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx
+++ b/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx
@@ -125,7 +125,7 @@ export const ReportPageController: React.FC<{
             }
           />
         ) : (
-          <ReportEditorSkeleton />
+          <ReportEditorSkeleton className={commonClassName} />
         )}
       </div>
     );