diff --git a/cmd/coin2html/README.md b/cmd/coin2html/README.md
index 37b06fd..5e5158c 100644
--- a/cmd/coin2html/README.md
+++ b/cmd/coin2html/README.md
@@ -2,10 +2,11 @@ Converts the coin database into an HTML doc with a single page, interactive JS a
Check out the [examples/yearly](https://mkobetic.github.io/coin/).
Account hierarchy nav on the left, segregated by account type (Assets, Income, Expenses, Liabilities, Equity).
-Selecting a specific account restricts the detail view to that account's hierarchy.
+Clicking a specific account restricts the detail view on the right to that account's hierarchy.
+Currently selected account is shown as a heading above the details view.
-Details of selected accounts on the right with different presentation possibilities (Table, Chart, ...).
-Displayed transactions are restricted to selected time range.
+Details of the selected account are shown on the right with different presentation options (Register, Chart, ...).
+The details show account transactions restricted to selected time range, controlled by the From/To inputs.
# Register View
@@ -16,7 +17,7 @@ Shows the transaction details in tabular form
## SubAccounts
When un-checked only transactions for the selected account are shown.
-When checked transaction of the account and any subaccounts are shown.
+When checked transactions of the account and any sub-accounts are shown.
@@ -24,7 +25,7 @@ When checked transaction of the account and any subaccounts are shown.
When None, the individual transactions are shown.
When not None, the transactions are aggregated by the selected aggregation period (Weekly, Monthly, Quarterly, Yearly).
-When aggregated with subaccounts, the SubAccount Max option controls how many "top" subaccounts should be shown; the rest of the subaccounts are combined into an "Other" column. Top means the subaccounts with the highest average transaction value across the time range.
+When aggregated with sub-accounts, the SubAccount Max option controls how many "top" sub-accounts should be shown; the rest of the sub-accounts are combined into the "Other" column. Top here means the sub-accounts with the highest average transaction value across the time range.
@@ -34,6 +35,6 @@ When Aggregate is set to None, and Show Notes is checked, each transaction is di
# Chart View
-Chart shows aggregated transactions (including subaccounts) by the selected aggregation period as a bar chart. The meaning of the available options is the same as for the Register aggregations.
+Chart shows aggregated transactions (including sub-accounts) by the selected aggregation period as a bar chart. The meaning of the available options is the same as for the Register aggregations.
diff --git a/cmd/coin2html/js/body.html b/cmd/coin2html/js/body.html
index 253dc1f..5ac6667 100644
--- a/cmd/coin2html/js/body.html
+++ b/cmd/coin2html/js/body.html
@@ -1,23 +1,27 @@
-
-
-
-
diff --git a/cmd/coin2html/js/src/index.js b/cmd/coin2html/js/src/index.js
index fb18863..87bab57 100644
--- a/cmd/coin2html/js/src/index.js
+++ b/cmd/coin2html/js/src/index.js
@@ -835,9 +835,9 @@ function viewChart(options) {
// UI Node Selectors
const RootAccountSelect = "#sidebar select#root";
const AccountList = "#sidebar ul#accounts";
-const ViewSelect = "#main>#controls select#view";
-const StartDateInput = "#main>#controls input#start";
-const EndDateInput = "#main>#controls input#end";
+const ViewSelect = "#main #controls select#view";
+const StartDateInput = "#main #controls input#start";
+const EndDateInput = "#main #controls input#end";
const AccountOutput = "#main output#account";
const MainView = "#main section#view";
function emptyElement(selector) {
diff --git a/cmd/coin2html/js/src/index.ts b/cmd/coin2html/js/src/index.ts
index 13f25fd..cb3a17c 100644
--- a/cmd/coin2html/js/src/index.ts
+++ b/cmd/coin2html/js/src/index.ts
@@ -1072,9 +1072,9 @@ function viewChart(options?: {
const RootAccountSelect = "#sidebar select#root";
const AccountList = "#sidebar ul#accounts";
-const ViewSelect = "#main>#controls select#view";
-const StartDateInput = "#main>#controls input#start";
-const EndDateInput = "#main>#controls input#end";
+const ViewSelect = "#main #controls select#view";
+const StartDateInput = "#main #controls input#start";
+const EndDateInput = "#main #controls input#end";
const AccountOutput = "#main output#account";
const MainView = "#main section#view";
diff --git a/cmd/coin2html/js/styles.css b/cmd/coin2html/js/styles.css
index 816a637..f37fdaf 100644
--- a/cmd/coin2html/js/styles.css
+++ b/cmd/coin2html/js/styles.css
@@ -33,6 +33,16 @@ label {
margin: 0.3em; /* reduce margin */
}
+#main #header {
+ display: flex;
+ flex-basis: 100%;
+ justify-content: space-between; /* to make the Help link align right */
+}
+
+#main #header #help {
+ margin: 0.3em;
+}
+
/* VIEW REGISTER */
table#register {
width: 100%;
diff --git a/examples/yearly/viewer/index.html b/examples/yearly/viewer/index.html
index 43ec942..132351d 100644
--- a/examples/yearly/viewer/index.html
+++ b/examples/yearly/viewer/index.html
@@ -41,6 +41,16 @@
margin: 0.3em; /* reduce margin */
}
+#main #header {
+ display: flex;
+ flex-basis: 100%;
+ justify-content: space-between; /* to make the Help link align right */
+}
+
+#main #header #help {
+ margin: 0.3em;
+}
+
/* VIEW REGISTER */
table#register {
width: 100%;
@@ -83,29 +93,33 @@
-
-
-
-