mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-06 05:40:02 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

chore: recalibrate survey editor width to 2/3 editor and 1/3 preview (#6772)

Browse Source
This commit is contained in:
Dhruwang Jariwala
2025-11-04 14:40:31 +05:30
committed by GitHub
parent cde03b6997
commit 600b793641
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/modules/survey/editor/components/survey-editor-tabs.tsx
View File

@@ -65,7 +65,7 @@ export const SurveyEditorTabs = ({
let tabsToDisplay = isCxMode ? tabsComputed.filter((tab) => tab.id !== "settings") : tabsComputed;
return (
<div className="fixed z-30 flex h-12 w-full items-center justify-center border-b bg-white md:w-1/2">
<div className="fixed z-30 flex h-12 w-full items-center justify-center border-b bg-white md:w-2/3">
<nav className="flex h-full items-center space-x-4" aria-label="Tabs">
{tabsToDisplay.map((tab) => (
<button

4
apps/web/modules/survey/editor/components/survey-editor.tsx
View File

@@ -176,7 +176,7 @@ export const SurveyEditor = ({
/>
<div className="relative z-0 flex flex-1 overflow-hidden">
<main
className="relative z-0 w-1/2 flex-1 overflow-y-auto bg-slate-50 focus:outline-none"
className="relative z-0 w-full overflow-y-auto bg-slate-50 focus:outline-none md:w-2/3"
ref={surveyEditorRef}>
<SurveyEditorTabs
activeId={activeView}
@@ -260,7 +260,7 @@ export const SurveyEditor = ({
)}
</main>
<aside className="group hidden flex-1 flex-shrink-0 items-center justify-center overflow-hidden border-l border-slate-200 bg-slate-100 shadow-inner md:flex md:flex-col">
<aside className="group hidden w-1/3 flex-shrink-0 items-center justify-center overflow-hidden border-l border-slate-200 bg-slate-100 shadow-inner md:flex md:flex-col">
<PreviewSurvey
survey={localSurvey}
questionId={activeQuestionId}

2
apps/web/modules/ui/components/media-background/index.tsx
View File

@@ -167,7 +167,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
<div
ref={ContentRef}
data-testid="mobile-preview-container"
className={`relative h-[90%] w-[45%] overflow-hidden rounded-[3rem] border-[6px] border-slate-400 ${getFilterStyle()}`}>
className={`relative h-[90%] w-full overflow-hidden rounded-[3rem] border-[6px] border-slate-400 lg:w-[75%] ${getFilterStyle()}`}>
{/* below element is use to create notch for the mobile device mockup */}
<div className="absolute left-1/2 right-1/2 top-2 z-20 h-4 w-1/3 -translate-x-1/2 transform rounded-full bg-slate-400"></div>
{surveyType === "link" && renderBackground()}