styling improvments

assets/step.css

@@ -3,17 +3,19 @@
 
 body {
   display: flex;
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 #app {
-  flex: 1;
+  flex: 1 1 40%;
   padding: 50px;
 }
 
 #markdownReadme {
-  flex: 1;
+  box-sizing: border-box;
+  flex: 1 1 60%;
   background: #efefef;
   padding: 50px;
   margin: 0 auto;

markdownReadme/src/index.ts

@@ -32,13 +32,32 @@ async function run() {
     });
   }
 
-  // Set the renderer to marked.
-  // marked.setOptions({ renderer });
-
   if (div) {
     const response = await fetch('../README.md');
     const markdownText = await response.text();
     div.innerHTML = marked(markdownText, { baseUrl: '../' });
+    restoreScroll(div);
+  }
+
+  div.addEventListener('scroll', evt => {
+    saveScroll(div);
+  });
+
+  window.addEventListener('resize', evt => {
+    saveScroll(div);
+  });
+}
+
+const scrollKey = `${window.location.pathname}_scrolltop`;
+
+function saveScroll(div: HTMLElement) {
+  window.localStorage.setItem(scrollKey, String(div.scrollTop));
+}
+
+function restoreScroll(div: HTMLElement) {
+  const scrollTop = window.localStorage.getItem(scrollKey);
+  if (scrollTop) {
+    div.scrollTop = parseInt(scrollTop);
   }
 }
 

step2-08/demo/src/components/TodoHeader.tsx

@@ -29,7 +29,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
 
         <Stack horizontal gap={10}>
           <Stack.Item grow>
-            <TextField placeholder="What needs to be done?" value={this.state.labelInput} onChange={this.onChange} />
+            <TextField placeholder="What needs toasdf be done?" value={this.state.labelInput} onChange={this.onChange} />
           </Stack.Item>
           <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
         </Stack>