From 3dcd9e81206427fbe0018dd58c245d3df716cb28 Mon Sep 17 00:00:00 2001
From: Ryczko <konradryczko1@gmail.com>
Date: Tue, 14 May 2024 17:23:17 +0200
Subject: [PATCH] Fix/Open preview by default

---
 .../surveys/features/SurveyCreator/SurveyCreator.tsx      | 2 +-
 .../components/PreviewPanel/PreviewPanel.tsx              | 6 +++---
 .../managers/previewPanelManager/previewPanelManager.ts   | 8 +++++++-
 src/layout/ExternalRouteWrapper.tsx                       | 2 +-
 src/layout/StandardPageWrapper.tsx                        | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/features/surveys/features/SurveyCreator/SurveyCreator.tsx b/src/features/surveys/features/SurveyCreator/SurveyCreator.tsx
index 11b8128..04da36f 100644
--- a/src/features/surveys/features/SurveyCreator/SurveyCreator.tsx
+++ b/src/features/surveys/features/SurveyCreator/SurveyCreator.tsx
@@ -17,7 +17,7 @@ export default function SurveyCreator() {
           isPanelOpened && 'xl:mr-[550px]'
         )}
       >
-        <div className="mx-auto max-w-[58rem] px-6 xl:px-10">
+        <div className="mx-auto max-w-[58rem] px-4 xl:px-10">
           <TitleAndConfigSection />
           <QuestionsSection />
           <ActionButtons />
diff --git a/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx b/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
index 6db0b87..4e81f67 100644
--- a/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
@@ -29,11 +29,11 @@ export default function PreviewPanel() {
 
       <div
         className={clsx(
-          'fixed bottom-0 right-0 top-[var(--navigation-height)] w-[550px] max-w-[100vw] items-center overflow-hidden border-l transition-transform duration-500 ease-in-out',
+          'fixed bottom-0 right-0 top-[var(--navigation-height)] w-[550px] max-w-[calc(100vw-(100vw-100%))] items-center overflow-hidden border-l transition-transform duration-500 ease-in-out',
           !isPanelOpened && 'translate-x-full'
         )}
       >
-        <div className="flex h-[40px] items-center justify-between border-b bg-zinc-50 pl-2 pr-4 text-left font-semibold">
+        <div className="flex h-[42px] items-center justify-between border-b bg-zinc-50 px-4 pl-2 text-left font-semibold">
           <div className="flex items-center gap-4">
             <Button onClick={handleRestart} className="h-[26px] text-xs">
               Restart Survey <RefreshIcon className="ml-2 h-4 w-4" />
@@ -42,7 +42,7 @@ export default function PreviewPanel() {
 
           <XIcon onClick={togglePanel} className="h-5 w-5 cursor-pointer" />
         </div>
-        <div className="no-scrollbar h-[calc(100%-40px)] overflow-auto p-6">
+        <div className="no-scrollbar h-[calc(100%-42px)] overflow-auto p-6 px-4">
           <Background hideAccents />
           <SurveyDisplay
             previewMode
diff --git a/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts b/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts
index 7d9380b..1a863eb 100644
--- a/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts
+++ b/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts
@@ -1,8 +1,14 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export const usePreviewPanelManager = () => {
   const [isPanelOpened, setIsPanelOpened] = useState(false);
 
+  useEffect(() => {
+    if (window.innerWidth > 1280) {
+      setIsPanelOpened(true);
+    }
+  }, []);
+
   const togglePanel = () => {
     setIsPanelOpened((prev) => !prev);
   };
diff --git a/src/layout/ExternalRouteWrapper.tsx b/src/layout/ExternalRouteWrapper.tsx
index 3e3d879..0ecbe7b 100644
--- a/src/layout/ExternalRouteWrapper.tsx
+++ b/src/layout/ExternalRouteWrapper.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 export default function ExternalPageWrapper({ children }: PropsWithChildren) {
   return (
-    <div className="mx-auto flex w-full max-w-[54rem] flex-grow items-center justify-center px-6 py-8">
+    <div className="mx-auto flex w-full max-w-[54rem] flex-grow items-center justify-center px-4 py-8">
       {children}
     </div>
   );
diff --git a/src/layout/StandardPageWrapper.tsx b/src/layout/StandardPageWrapper.tsx
index 43b547a..f8e2500 100644
--- a/src/layout/StandardPageWrapper.tsx
+++ b/src/layout/StandardPageWrapper.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 export default function StandardPageWrapper({ children }: PropsWithChildren) {
   return (
-    <div className="mx-auto mb-4 mt-[60px] w-full max-w-[58rem] px-6 py-8">
+    <div className="mx-auto mb-4 mt-[60px] w-full max-w-[58rem] px-4 py-8">
       {children}
     </div>
   );