From 5534fd7d889c68b4a1d4e0d78eac48885c131e36 Mon Sep 17 00:00:00 2001
From: Jakob Schnitzer <mail@jakobschnitzer.de>
Date: Wed, 17 Dec 2025 22:26:00 +0100
Subject: [PATCH] frontend: use flex gap, adjust add entry components

- Use flex with a gap instead of margins on the children.
- Adjust input sizes on entry form
    - bigger metadata and bigger metadata value field
    - more space for narration compared to payee
- refactor AutocompleteInput component to be more modifiable via CSS
  variables
---
 frontend/css/base.css                         | 10 +-
 frontend/css/grid.css                         | 50 ++++++----
 frontend/src/AutocompleteInput.svelte         | 14 +--
 frontend/src/charts/Chart.svelte              |  4 +
 frontend/src/charts/ChartSwitcher.svelte      |  3 +-
 frontend/src/editor/SliceEditor.svelte        |  7 +-
 frontend/src/entry-forms/AccountInput.svelte  | 11 +--
 frontend/src/entry-forms/Balance.svelte       | 12 +--
 frontend/src/entry-forms/EntryMetadata.svelte |  8 +-
 frontend/src/entry-forms/Note.svelte          | 11 +--
 frontend/src/entry-forms/Posting.svelte       | 26 +++--
 frontend/src/entry-forms/Transaction.svelte   | 27 ++----
 frontend/src/modals/AddEntry.svelte           |  6 +-
 frontend/src/reports/import/Extract.svelte    |  6 +-
 frontend/src/reports/import/FileList.svelte   | 97 ++++++++++---------
 frontend/src/reports/import/Import.svelte     | 31 +++---
 .../src/reports/journal/JournalHeaders.svelte |  2 +-
 frontend/src/sidebar/AccountSelector.svelte   |  8 +-
 frontend/src/sidebar/FilterForm.svelte        | 11 +--
 19 files changed, 156 insertions(+), 188 deletions(-)

diff --git a/frontend/css/base.css b/frontend/css/base.css
index 4ab0c26d4..15a9f1354 100644
--- 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
index 5bd192cbf..112a399af 100644
--- 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
index b96b78f76..5af1e507b 100644
--- 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,6 +217,7 @@
   span {
     position: relative;
     display: inline-block;
+    flex: var(--autocomplete-wrapper-flex, initial);
   }
 
   input {
@@ -227,7 +225,7 @@
   }
 
   ul {
-    position: absolute;
+    position: var(--autocomplete-list-position, absolute);
     z-index: var(--z-index-autocomplete);
     overflow: hidden auto;
     background-color: var(--background);
@@ -235,12 +233,6 @@
     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
index 1f1e481bd..ab2b81c60 100644
--- 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
index 7e0030ada..a9c91ecfb 100644
--- 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
index 4803984f5..8c175c7c7 100644
--- 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
index a8e52df46..8d333a3a2 100644
--- 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
index d635ba59e..0002591b7 100644
--- 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
index f118e8730..b697e1dd3 100644
--- 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
index 51fa0bdf1..feb7e76fe 100644
--- 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>
diff --git a/frontend/src/entry-forms/Posting.svelte b/frontend/src/entry-forms/Posting.svelte
index b5ec16bf8..315153b14 100644
--- a/frontend/src/entry-forms/Posting.svelte
+++ b/frontend/src/entry-forms/Posting.svelte
@@ -86,7 +86,6 @@
     ×
   </button>
   <AccountInput
-    className="grow"
     bind:value={
       () => posting.account,
       (account: string) => {
@@ -95,9 +94,9 @@
     }
     {suggestions}
     {date}
+    --autocomplete-wrapper-flex="2"
   />
   <AutocompleteInput
-    className="amount"
     placeholder={_("Amount")}
     suggestions={amountSuggestions}
     bind:value={
@@ -106,6 +105,7 @@
         posting = posting.set("amount", amount);
       }
     }
+    --autocomplete-wrapper-flex="1"
   />
   <AddMetadataButton
     bind:meta={
@@ -115,15 +115,15 @@
       }
     }
   />
-  <EntryMetadataSvelte
-    bind:meta={
-      () => posting.meta,
-      (meta: EntryMetadata) => {
-        posting = posting.set("meta", meta);
-      }
-    }
-  />
 </div>
+<EntryMetadataSvelte
+  bind:meta={
+    () => posting.meta,
+    (meta: EntryMetadata) => {
+      posting = posting.set("meta", meta);
+    }
+  }
+/>
 
 <style>
   .drag {
@@ -131,7 +131,7 @@
   }
 
   div {
-    padding-left: 50px;
+    padding-left: 3rem;
     cursor: grab;
   }
 
@@ -143,10 +143,6 @@
     visibility: hidden;
   }
 
-  div :global(.amount) {
-    width: 220px;
-  }
-
   @media (width <= 767px) {
     div {
       padding-left: 0;
diff --git a/frontend/src/entry-forms/Transaction.svelte b/frontend/src/entry-forms/Transaction.svelte
index 33b3b35b6..a415cce1b 100644
--- a/frontend/src/entry-forms/Transaction.svelte
+++ b/frontend/src/entry-forms/Transaction.svelte
@@ -86,7 +86,7 @@
   });
 </script>
 
-<div>
+<div class="flex-column">
   <div class="flex-row">
     <input
       type="date"
@@ -110,9 +110,8 @@
       required
     />
     <label>
-      <span>{_("Payee")}:</span>
+      <span class="hide-on-desktop">{_("Payee")}:</span>
       <AutocompleteInput
-        className="payee"
         placeholder={_("Payee")}
         bind:value={
           () => entry.payee,
@@ -122,12 +121,12 @@
         }
         suggestions={$payees}
         onSelect={autocompleteSelectPayee}
+        --autocomplete-wrapper-flex="1"
       />
     </label>
-    <label>
-      <span>{_("Narration")}:</span>
+    <label class="narration">
+      <span class="hide-on-desktop">{_("Narration")}:</span>
       <AutocompleteInput
-        className="narration"
         placeholder={_("Narration")}
         bind:value={narration}
         suggestions={narration_suggestions}
@@ -138,6 +137,7 @@
         onBlur={() => {
           entry = entry.set_narration_tags_links(narration);
         }}
+        --autocomplete-wrapper-flex="2"
       />
       <AddMetadataButton
         bind:meta={
@@ -157,8 +157,8 @@
       }
     }
   />
-  <div class="flex-row">
-    <span class="label"> <span>{_("Postings")}:</span> </span>
+  <div class="flex-row hide-on-desktop">
+    <span class="label">{_("Postings")}:</span>
   </div>
   {#each entry.postings, index (index)}
     <!-- Using the indexed access (instead of `as posting` in the each) seems to track
@@ -194,19 +194,12 @@
     text-align: center;
   }
 
-  div :global(.payee) {
-    flex-grow: 1;
-    flex-basis: 100px;
-  }
-
-  label > span:first-child,
-  .label > span:first-child {
+  .hide-on-desktop {
     display: none;
   }
 
   @media (width <= 767px) {
-    label > span:first-child,
-    .label > span:first-child {
+    .hide-on-desktop {
       display: initial;
       width: 100%;
     }
diff --git a/frontend/src/modals/AddEntry.svelte b/frontend/src/modals/AddEntry.svelte
index ab6ae5915..ca47cd73b 100644
--- a/frontend/src/modals/AddEntry.svelte
+++ b/frontend/src/modals/AddEntry.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <ModalBase {shown} focus=".payee input">
-  <form onsubmit={submit}>
+  <form onsubmit={submit} class="flex-column">
     <h3>
       {_("Add")}
       {#each entryTypes as [Cls, displayName] (displayName)}
@@ -69,6 +69,10 @@
 </ModalBase>
 
 <style>
+  h3 {
+    margin: 0;
+  }
+
   label span {
     margin-right: 1rem;
   }
diff --git a/frontend/src/reports/import/Extract.svelte b/frontend/src/reports/import/Extract.svelte
index 8578b665b..18f0d058b 100644
--- a/frontend/src/reports/import/Extract.svelte
+++ b/frontend/src/reports/import/Extract.svelte
@@ -54,7 +54,7 @@
 </script>
 
 <ModalBase {shown} closeHandler={close}>
-  <form novalidate={duplicate} onsubmit={submitOrNext}>
+  <form class="flex-column" novalidate={duplicate} onsubmit={submitOrNext}>
     <h3>{_("Import")}</h3>
     {#if entry}
       <div class="flex-row">
@@ -115,8 +115,8 @@
           </button>
         {:else}<button type="submit">{_("Save")}</button>{/if}
       </div>
-      <hr />
       {#if entry.meta.get("__source__")}
+        <hr />
         <h3>
           {_("Source")}
           {#if entry.meta.lineno}({_("Line")}: {entry.meta.lineno}){/if}
@@ -129,11 +129,13 @@
 
 <style>
   pre {
+    margin: 0;
     font-size: 0.9em;
     white-space: pre-wrap;
   }
 
   .duplicate {
+    display: contents;
     opacity: 0.5;
   }
 </style>
diff --git a/frontend/src/reports/import/FileList.svelte b/frontend/src/reports/import/FileList.svelte
index a2e2ef3eb..b770d962c 100644
--- a/frontend/src/reports/import/FileList.svelte
+++ b/frontend/src/reports/import/FileList.svelte
@@ -50,69 +50,70 @@
       ×
     </button>
   </div>
-  {#each file.importers as info (info.importer_name)}
-    {@const file_importer_key = `${file.name}:${info.importer_name}`}
-    {@const account = file_accounts.get(file_importer_key) ?? info.account}
-    {@const new_name = file_names.get(file_importer_key) ?? info.newName}
-    <form
-      class="flex-row"
-      onsubmit={(event) => {
-        event.preventDefault();
-        move(file.name, account, new_name);
-      }}
-    >
-      <AccountInput
-        bind:value={
-          () => account,
-          (value: string) => {
-            file_accounts.set(file_importer_key, value);
+  <div class="flex-column">
+    {#each file.importers as info (info.importer_name)}
+      {@const file_importer_key = `${file.name}:${info.importer_name}`}
+      {@const account = file_accounts.get(file_importer_key) ?? info.account}
+      {@const new_name = file_names.get(file_importer_key) ?? info.newName}
+      <form
+        class="flex-row"
+        onsubmit={(event) => {
+          event.preventDefault();
+          move(file.name, account, new_name);
+        }}
+      >
+        <AccountInput
+          bind:value={
+            () => account,
+            (value: string) => {
+              file_accounts.set(file_importer_key, value);
+            }
           }
-        }
-        required
-      />
-      <input
-        size={40}
-        bind:value={
-          () => new_name,
-          (value: string) => {
-            file_names.set(file_importer_key, value);
+          required
+        />
+        <input
+          size={40}
+          bind:value={
+            () => new_name,
+            (value: string) => {
+              file_names.set(file_importer_key, value);
+            }
           }
-        }
-      />
-      <button type="submit">
-        {_("Move")}
-      </button>
-      {#if info.importer_name}
-        {@const is_cached = extract_cache.has(file_importer_key)}
-        <button
-          type="button"
-          title="{_('Extract')} with importer {info.importer_name}"
-          onclick={() => {
-            extract(file.name, info.importer_name);
-          }}
-        >
-          {is_cached ? _("Continue") : _("Extract")}
+        />
+        <button type="submit">
+          {_("Move")}
         </button>
-        {#if is_cached}
+        {#if info.importer_name}
+          {@const is_cached = extract_cache.has(file_importer_key)}
           <button
             type="button"
+            title="{_('Extract')} with importer {info.importer_name}"
             onclick={() => {
-              extract_cache.delete(file_importer_key);
+              extract(file.name, info.importer_name);
             }}
           >
-            {_("Clear")}
+            {is_cached ? _("Continue") : _("Extract")}
           </button>
+          {#if is_cached}
+            <button
+              type="button"
+              onclick={() => {
+                extract_cache.delete(file_importer_key);
+              }}
+            >
+              {_("Clear")}
+            </button>
+          {/if}
+          {info.importer_name}
         {/if}
-        {info.importer_name}
-      {/if}
-    </form>
-  {/each}
+      </form>
+    {/each}
+  </div>
 {/each}
 
 <style>
   .header {
     padding: 0.5rem;
-    margin: 0.5rem 0;
     background-color: var(--summary-background);
   }
 
diff --git a/frontend/src/reports/import/Import.svelte b/frontend/src/reports/import/Import.svelte
index 8535c7f34..bb19ffcab 100644
--- a/frontend/src/reports/import/Import.svelte
+++ b/frontend/src/reports/import/Import.svelte
@@ -140,25 +140,22 @@
     {save}
   />
   <div class="fixed-fullsize-container">
-    <div class="filelist">
+    <div class="filelist flex-column">
       {#if files.length === 0}
         <p>{_("No files were found for import.")}</p>
       {/if}
       {#if importable_files.length > 0}
-        <div>
-          <h2>{_("Importable Files")}</h2>
-          <FileList
-            files={importable_files}
-            {extract_cache}
-            {file_accounts}
-            {file_names}
-            bind:selected
-            {move}
-            {remove}
-            {extract}
-          />
-        </div>
-        <hr />
+        <h2>{_("Importable Files")}</h2>
+        <FileList
+          files={importable_files}
+          {extract_cache}
+          {file_accounts}
+          {file_names}
+          bind:selected
+          {move}
+          {remove}
+          {extract}
+        />
       {/if}
       {#if other_files.length > 0}
         <details bind:open={show_other_files}>
@@ -199,8 +196,4 @@
   .filelist {
     padding: 1rem;
   }
-
-  hr {
-    margin: 1rem 0;
-  }
 </style>
diff --git a/frontend/src/reports/journal/JournalHeaders.svelte b/frontend/src/reports/journal/JournalHeaders.svelte
index 18fe05d98..710d53248 100644
--- a/frontend/src/reports/journal/JournalHeaders.svelte
+++ b/frontend/src/reports/journal/JournalHeaders.svelte
@@ -64,7 +64,7 @@
 
 <style>
   ol {
-    margin: 0.25rem 0 0;
+    margin: var(--flex-gap) 0 0;
   }
 
   button {
diff --git a/frontend/src/sidebar/AccountSelector.svelte b/frontend/src/sidebar/AccountSelector.svelte
index 7f885b96d..63244cc0e 100644
--- a/frontend/src/sidebar/AccountSelector.svelte
+++ b/frontend/src/sidebar/AccountSelector.svelte
@@ -21,7 +21,6 @@
     bind:value
     placeholder={_("Go to account")}
     suggestions={$accounts}
-    className="account-selector"
     key="g a"
     onSelect={select}
     onEnter={select}
@@ -29,8 +28,9 @@
 </li>
 
 <style>
-  :global(.account-selector input) {
-    padding: 0.25em 0.5em 0.25em 1em;
-    border: none;
+  li {
+    --input-border: none;
+    --input-padding: 0.25em 0.5em 0.25em 1em;
+    --autocomplete-list-position: fixed;
   }
 </style>
diff --git a/frontend/src/sidebar/FilterForm.svelte b/frontend/src/sidebar/FilterForm.svelte
index be2a2445c..343bf76a3 100644
--- a/frontend/src/sidebar/FilterForm.svelte
+++ b/frontend/src/sidebar/FilterForm.svelte
@@ -76,6 +76,7 @@
 </script>
 
 <form
+  class="flex-row"
   onsubmit={(ev) => {
     ev.preventDefault();
     submit();
@@ -122,14 +123,11 @@
 
 <style>
   form {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5em;
-    margin: 0;
     color: var(--text-color);
 
     --placeholder-color: var(--header-placeholder-color);
     --placeholder-background: var(--header-placeholder-background);
+    --input-padding: 8px 25px 8px 10px;
   }
 
   form > :global(span) {
@@ -137,7 +135,6 @@
   }
 
   form :global(input) {
-    padding: 8px 25px 8px 10px;
     outline: none;
     background-color: var(--background);
     border: 0;
@@ -152,8 +149,8 @@
   }
 
   @media print {
-    form :global(input) {
-      padding: 8px 10px;
+    form {
+      --input-padding: 8px 10px;
     }
 
     form :global(input):placeholder-shown {