From 1e86f288574fe6e0258988b7e7e2e218e8bbb02c Mon Sep 17 00:00:00 2001
From: Robert Sesek <rsesek@bluestatic.org>
Date: Mon, 16 Mar 2020 23:36:38 -0400
Subject: [PATCH] Drop <table> instead of flex for layout.

This lets the trace viewer be larger than the form width.
---
 src/App.css           |  5 -----
 src/App.tsx           |  2 +-
 src/FormView.css      | 28 +++++++++++++++++++++++++---
 src/FormView.tsx      | 30 ++++++++++++++++--------------
 src/TaxReturnView.css |  3 +++
 5 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index b6f0c98..3c096f3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,8 +7,3 @@
 body {
   font-family: Helvetica, Arial, sans-serif;
 }
-
-.container {
-  width: 750px;
-  margin: 0 auto;
-}
diff --git a/src/App.tsx b/src/App.tsx
index 2f234b7..027aa18 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,5 +14,5 @@ interface Props {
 }
 
 export default function App(props: Props) {
-  return (<div class={S.container}><TaxReturnView {...props} /></div>);
+  return (<div><TaxReturnView {...props} /></div>);
 }
diff --git a/src/FormView.css b/src/FormView.css
index 944984c..fbd10ac 100644
--- a/src/FormView.css
+++ b/src/FormView.css
@@ -4,21 +4,39 @@
  * SPDX-License-Identifier: GPL-3.0-only
  */
 
+:root {
+  --form-width: 750px;
+}
+
+.form {
+}
+
 .form-name {
-  margin: 0;
+  width: var(--form-width);
+  margin: 0 auto;
+
   border: 3px solid black;
   border-bottom-width: 2px;
+  box-sizing: border-box;
   padding: 5px;
 }
 
 .table {
-  border: 1px solid black;
-  border-collapse: collapse;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .line {
+  width: var(--form-width);
+  margin: 0 auto;
+
   border: 1px solid black;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .line:hover {
@@ -31,10 +49,13 @@
   font-weight: bold;
   padding: 0 5px;
   text-align: center;
+  width: 10%;
+  padding: 3px 0;
 }
 
 .description {
   padding: 3px 10px 3px 3px;
+  flex: 2;
 }
 
 .value {
@@ -51,6 +72,7 @@
 .trace-viewer {
   background-color: #fffdf1;
   padding: 10px;
+  border: 1px solid red;
 }
 
 .trace-viewer h2 {
diff --git a/src/FormView.tsx b/src/FormView.tsx
index 3f4ceed..823b14b 100644
--- a/src/FormView.tsx
+++ b/src/FormView.tsx
@@ -24,15 +24,15 @@ export default function FormView(props: FormProps) {
   });
 
   return (
-    <>
+    <div class={S.form}>
       <h2 class={S.formName}>Form {props.form.name}</h2>
 
-      <table class={S.table}>
+      <div class={S.table}>
         <For each={lines()}>
           {line => <LineView tr={props.tr} line={line} />}
         </For>
-      </table>
-    </>
+      </div>
+    </div>
   );
 }
 
@@ -61,17 +61,19 @@ function LineView(props: LineProps) {
   const toggleTrace = () => setState('showTrace', !state.showTrace);
 
   return (
-    <tr class={S.line}>
-      <th class={S.id} onclick={toggleTrace}>{line.id}</th>
-      <td class={S.description}>
-        {line.description}
+    <>
+      <div class={S.line}>
+        <div class={S.id} onclick={toggleTrace}>{line.id}</div>
+        <div class={S.description}>
+          {line.description}
 
-        <Show when={state.showTrace}>
-          <TraceViewer line={line} trace={state.trace} />
-        </Show>
-      </td>
-      <td class={S.value}>{value()}</td>
-    </tr>
+        </div>
+        <div class={S.value}>{value()}</div>
+      </div>
+      <Show when={state.showTrace}>
+        <TraceViewer line={line} trace={state.trace} />
+      </Show>
+    </>
   );
 }
 
diff --git a/src/TaxReturnView.css b/src/TaxReturnView.css
index ec913a6..56cf8cd 100644
--- a/src/TaxReturnView.css
+++ b/src/TaxReturnView.css
@@ -7,6 +7,9 @@
 .header {
   display: flex;
   align-items: center;
+
+  width: 750px;
+  margin: 0 auto;
 }
 
 .header h1 {
-- 
2.22.5