From a37e1840e7fa6694730c4602afc01b31181d6e40 Mon Sep 17 00:00:00 2001
From: Ritvik Mukherjee <mritvikcode1010@gmail.com>
Date: Wed, 22 Jul 2026 23:53:32 +0530
Subject: [PATCH] refactor(practice): widen solution editor workspace

---
 app/globals.css                           | 7 ++++---
 components/practice/problem-workspace.tsx | 3 ++-
 tests/e2e/problems.spec.ts                | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index d32b080..060d0ff 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1399,6 +1399,7 @@ a.notification-row:hover {
   flex-direction: column;
   height: calc(100vh - 132px);
   min-height: 520px;
+  padding-inline: clamp(16px, 1.75vw, 24px);
   overflow: hidden;
 }
 
@@ -1541,13 +1542,13 @@ a.notification-row:hover {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding-left: clamp(20px, 3vw, 36px);
+  padding-left: clamp(12px, 1.5vw, 20px);
 }
 
 .practice-divider {
-  flex: 0 0 7px;
+  flex: 0 0 5px;
   align-self: stretch;
-  margin: 0 clamp(6px, 1vw, 14px);
+  margin: 0 clamp(4px, 0.5vw, 8px);
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line);
   background: transparent;
diff --git a/components/practice/problem-workspace.tsx b/components/practice/problem-workspace.tsx
index 272ed28..2371991 100644
--- a/components/practice/problem-workspace.tsx
+++ b/components/practice/problem-workspace.tsx
@@ -102,6 +102,7 @@ const draftKey = (scope: string, language: string) => `shardup:draft:${scope}:${
 const splitKey = "shardup:practice-split";
 
 // Keep the resizable split within sane bounds so neither pane collapses.
+const DEFAULT_SPLIT = 0.45;
 const MIN_SPLIT = 0.25;
 const MAX_SPLIT = 0.75;
 
@@ -169,7 +170,7 @@ export function ProblemWorkspace({
   const [error, setError] = useState<string | null>(null);
   const [runningLanguage, setRunningLanguage] = useState("python");
   const [ephemeralSubmissions, setEphemeralSubmissions] = useState<Submission[]>([]);
-  const [split, setSplit] = useState(0.5);
+  const [split, setSplit] = useState(DEFAULT_SPLIT);
 
   const workspaceRef = useRef<HTMLDivElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
diff --git a/tests/e2e/problems.spec.ts b/tests/e2e/problems.spec.ts
index d77d69c..43f88b0 100644
--- a/tests/e2e/problems.spec.ts
+++ b/tests/e2e/problems.spec.ts
@@ -75,6 +75,7 @@ test.describe("problems", () => {
     expect(promptBox).not.toBeNull();
     expect(submitBox).not.toBeNull();
     expect(promptBox!.x + promptBox!.width).toBeLessThanOrEqual(submitBox!.x + 1);
+    expect(submitBox!.width).toBeGreaterThan(promptBox!.width);
   });
 
   test("stacks the practice workspace on mobile without horizontal overflow", async ({ page }) => {