Fix/Open preview by default

Ryczko · May 14, 2024 · 3dcd9e8 · 3dcd9e8
1 parent 32d7389
commit 3dcd9e8
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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/...atures/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts b/...atures/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
@@ -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
@@ -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>
   );