beancount · yagebu · Jan 2, 2026 · Dec 17, 2025
diff --git a/frontend/css/base.css b/frontend/css/base.css
@@ -20,8 +20,7 @@ ol,
 ul,
 dl,
 table,
-pre,
-hr {
+pre {
   padding: 0;
   margin: 0 0 1rem;
   list-style-type: none;
@@ -122,11 +121,14 @@ h3 {
 
 h4,
 h5 {
+  margin: 0;
   font-size: 1em;
   font-weight: 500;
 }
 
 hr {
+  padding: 0;
+  margin: 0;
   border: 1px solid var(--border);
 }
 
@@ -169,9 +171,9 @@ textarea {
 
 input,
 textarea {
-  padding: 6px 10px;
+  padding: var(--input-padding, 6px 10px);
   background: var(--placeholder-background);
-  border: 1px solid var(--border-darker);
+  border: var(--input-border, 1px solid var(--border-darker));
 }
 
 label {

diff --git a/frontend/css/grid.css b/frontend/css/grid.css
@@ -1,30 +1,38 @@
-.flex-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin: 0 -0.25rem;
+:root {
+  --flex-gap: 0.5rem;
 }
 
-.flex-row > * {
-  margin: 0.25rem;
-}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--flex-gap);
 
-.flex-row > label {
-  display: contents;
+  > h3 {
+    margin: 0;
+  }
 }
 
-.flex-row > label > * {
-  margin: 0.25rem;
-}
+.flex-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--flex-gap);
+  align-items: center;
 
-.flex-row .grow {
-  flex-grow: 1;
-}
+  > h3 {
+    margin: 0;
+  }
 
-.remove-row {
-  opacity: 0;
-}
+  > label {
+    display: contents;
+  }
+
+  @media (hover: hover) and (width > 767px) {
+    .remove-row {
+      opacity: 0;
+    }
+  }
 
-.flex-row:hover .remove-row {
-  opacity: 1;
+  &:hover .remove-row {
+    opacity: 1;
+  }
 }
diff --git a/frontend/src/AutocompleteInput.svelte b/frontend/src/AutocompleteInput.svelte
@@ -33,8 +33,6 @@
     valueSelector?: (val: string, input: HTMLInputElement) => string;
     /** Automatically adjust the size of the input element. */
     setSize?: boolean;
-    /** An optional class name to assign to the input element. */
-    className?: string | undefined;
     /** A key binding to add for this input. */
     key?: KeySpec;
     /** A function that checks the entered value for validity. */
@@ -58,7 +56,6 @@
     valueExtractor,
     valueSelector,
     setSize = false,
-    className,
     key,
     checkValidity,
     clearButton = false,
@@ -152,7 +149,7 @@
   }
 </script>
 
-<span class={className}>
+<span>
   <input
     type="text"
     autocomplete="off"
@@ -220,27 +217,22 @@
   span {
     position: relative;
     display: inline-block;
+    flex: var(--autocomplete-wrapper-flex, initial);
   }
 
   input {
     width: 100%;
   }
 
   ul {
-    position: absolute;
+    position: var(--autocomplete-list-position, absolute);
     z-index: var(--z-index-autocomplete);
     overflow: hidden auto;
     background-color: var(--background);
     border: 1px solid var(--border-darker);
     box-shadow: var(--box-shadow-dropdown);
   }
 
-  :global(aside) ul {
-    /* the only way to get the list to overflow the
-       aside is to put it in fixed position */
-    position: fixed;
-  }
-
   li {
     min-width: 8rem;
     padding: 0 0.5em;

diff --git a/frontend/src/charts/Chart.svelte b/frontend/src/charts/Chart.svelte
@@ -88,6 +88,10 @@
 </div>
 
 <style>
+  .flex-row {
+    margin-bottom: var(--flex-gap);
+  }
+
   @media print {
     button.show-charts {
       display: none;

diff --git a/frontend/src/charts/ChartSwitcher.svelte b/frontend/src/charts/ChartSwitcher.svelte
@@ -59,8 +59,7 @@
 
 <style>
   div {
-    margin-bottom: 1.5em;
-    font-size: 1em;
+    margin-bottom: 1em;
     color: var(--text-color-lightest);
     text-align: center;
   }

diff --git a/frontend/src/editor/SliceEditor.svelte b/frontend/src/editor/SliceEditor.svelte
@@ -93,7 +93,7 @@
   );
 </script>
 
-<form onsubmit={save}>
+<form onsubmit={save} class="flex-column">
   <div class="editor" {@attach attach_editor(editor)}></div>
   <div class="flex-row">
     <span class="spacer"></span>
@@ -107,12 +107,7 @@
 </form>
 
 <style>
-  label span {
-    margin-right: 1rem;
-  }
-
   .editor {
-    margin-bottom: 0.5rem;
     border: 1px solid var(--sidebar-border);
   }
 </style>
diff --git a/frontend/src/entry-forms/AccountInput.svelte b/frontend/src/entry-forms/AccountInput.svelte
@@ -12,19 +12,11 @@
     suggestions?: string[] | undefined;
     /** The date to enter this account for to exclude closed accounts. */
     date?: string | undefined;
-    /** An optional class name to assign to the input element. */
-    className?: string;
     /** Whether to mark the input as required. */
     required?: boolean;
   }
 
-  let {
-    value = $bindable(),
-    suggestions,
-    date,
-    className,
-    required,
-  }: Props = $props();
+  let { value = $bindable(), suggestions, date, required }: Props = $props();
 
   let checkValidity = $derived((val: string) =>
     !$accounts_set.size || $accounts_set.has(val) || (required !== true && !val)
@@ -46,7 +38,6 @@
 <AutocompleteInput
   placeholder={_("Account")}
   bind:value
-  {className}
   {checkValidity}
   {required}
   suggestions={filtered_suggestions}

diff --git a/frontend/src/entry-forms/Balance.svelte b/frontend/src/entry-forms/Balance.svelte
@@ -14,7 +14,7 @@
   let { entry = $bindable() }: Props = $props();
 </script>
 
-<div>
+<div class="flex-column">
   <div class="flex-row">
     <input
       type="date"
@@ -28,7 +28,6 @@
     />
     <h4>{_("Balance")}</h4>
     <AccountInput
-      className="grow"
       bind:value={
         () => entry.account,
         (account: string) => {
@@ -37,6 +36,7 @@
       }
       date={entry.date}
       required
+      --autocomplete-wrapper-flex="1"
     />
     <input
       type="tel"
@@ -52,7 +52,6 @@
       required
     />
     <AutocompleteInput
-      className="currency"
       placeholder={_("Currency")}
       suggestions={$currencies}
       bind:value={
@@ -62,6 +61,7 @@
         }
       }
       required
+      --autocomplete-wrapper-flex="0 6em"
     />
     <AddMetadataButton
       bind:meta={
@@ -81,9 +81,3 @@
     }
   />
 </div>
-
-<style>
-  div :global(.currency) {
-    width: 6em;
-  }
-</style>
diff --git a/frontend/src/entry-forms/EntryMetadata.svelte b/frontend/src/entry-forms/EntryMetadata.svelte
@@ -33,6 +33,7 @@
       }}
       required
     />
+    :
     <input
       type="text"
       class="value"
@@ -49,6 +50,7 @@
         onclick={() => {
           meta = meta.add();
         }}
+        aria-label={_("Add metadata")}
         title={_("Add metadata")}
       >
         +
@@ -59,17 +61,15 @@
 
 <style>
   div {
-    padding-left: 56px;
-    font-size: 0.8em;
+    padding-left: 3rem;
   }
 
   input.key {
-    width: 10em;
+    width: 12rem;
   }
 
   input.value {
     flex-grow: 1;
-    max-width: 15em;
   }
 
   @media (width <= 767px) {

diff --git a/frontend/src/entry-forms/Note.svelte b/frontend/src/entry-forms/Note.svelte
@@ -12,7 +12,7 @@
   let { entry = $bindable() }: Props = $props();
 </script>
 
-<div>
+<div class="flex-column">
   <div class="flex-row">
     <input
       type="date"
@@ -27,7 +27,6 @@
     />
     <h4>{_("Note")}</h4>
     <AccountInput
-      className="grow"
       bind:value={
         () => entry.account,
         (account: string) => {
@@ -36,6 +35,7 @@
       }
       date={entry.date}
       required
+      --autocomplete-wrapper-flex="1"
     />
     <AddMetadataButton
       bind:meta={
@@ -47,8 +47,8 @@
     />
   </div>
   <textarea
-    name="comment"
     rows={2}
+    placeholder="Comment"
     bind:value={
       () => entry.comment,
       (comment: string) => {
@@ -68,9 +68,6 @@
 
 <style>
   textarea {
-    flex-grow: 1;
-    width: 100%;
-    padding: 8px;
-    font: inherit;
+    resize: vertical;
   }
 </style>