Drop <table> instead of flex for layout.

This lets the trace viewer be larger than the form width.

diff --git a/src/App.css b/src/App.css
index b6f0c98f383785659051f4ee251b6bcabe78748c..3c096f3a621e9f18367ba7009e581c2adef44a15 100644 (file)
--- 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 2f234b7db517221fd2228712fa38ed179b604afb..027aa18ae1e813b3a366eb043ee05dd25a09748c 100644 (file)
--- 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 944984cbad267d771ed9ab80d371d343e2f999fc..fbd10ac25bbd6261587c70aa70adb80565028d9b 100644 (file)
--- 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 3f4ceedcb3a3fdef99bf4432eb258f679d1bb32d..823b14bd465671b956142bc2bf00d1d2b829df87 100644 (file)
--- 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 ec913a60665588581e8fc1991dbb86937a8abfff..56cf8cd04e83d5c06a717f38d17322795ce6ca0d 100644 (file)
--- 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 {