Fix issue with responsive (#2090)

Author: jdeniau

website/src/repl/Editor.tsx

@@ -46,10 +46,5 @@ export function Editor({ value, onChange }: Props): JSX.Element {
     };
   }, []);
 
-  return (
-    <div
-      style={{ border: '1px solid var(--code-block-bg-color)' }}
-      ref={editor}
-    ></div>
-  );
+  return <div className="repl-editor" ref={editor}></div>;
 }

website/src/repl/Repl.tsx

@@ -140,9 +140,7 @@ function Repl({ defaultValue }: Props): JSX.Element {
       <h4>Live example</h4>
 
       <div className="repl-editor-container">
-        <div style={{ flex: 1 }}>
-          <Editor value={code} onChange={setCode} />
-        </div>
+        <Editor value={code} onChange={setCode} />
 
         <button type="button" onClick={runCode}>
           Run

website/src/repl/repl.css

@@ -4,6 +4,13 @@
   gap: 8px;
 }
 
+.repl-editor {
+  flex: 1;
+  width: 0; /* See https://stackoverflow.com/a/75423682/2111353, but does only work on "row" mode */
+
+  border: 1px solid var(--code-block-bg-color);
+}
+
 textarea {
   width: 100%;
   height: 100px;

website/styles/globals.css

@@ -195,6 +195,12 @@ a.try-it {
   position: relative;
 }
 
+@media only screen and (max-width: 1024px) {
+  .pageBody {
+    padding: 0;
+  }
+}
+
 .contents {
   margin: 0 auto;
   max-width: 1024px;
@@ -204,6 +210,10 @@ a.try-it {
   flex-direction: row-reverse;
 }
 
+.contents > .docContents {
+  flex-grow: 1;
+}
+
 img {
   max-width: 1024px;
 }