Refine DSA practice workspace proportions

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;

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);

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 }) => {