some more buttons and inputs

web/sass/buttons.scss

@@ -13,13 +13,6 @@
     @include btn;
 }
 
-.btn.invert {
-    color: var(--#{$prefix}-base) !important;
-}
-.btn.invert:hover {
-    color: var(--#{$prefix}-text) !important;
-}
-
 .btn-sm {
     @include btn;
     padding: 4px 8px 4px 8px;
@@ -37,6 +30,21 @@
     }
 }
 
+$button_sizes: (
+    "btn",
+    "btn-sm",
+);
+
+@each $s in $button_sizes {
+    .#{$s}.invert {
+        color: var(--#{$prefix}-base) !important;
+    }
+    .#{$s}.invert:hover {
+        color: var(--#{$prefix}-text) !important;
+    }
+}
+
+
 .borderless-btn {
     @include btn;
     color: var(--#{$prefix}-text);
@@ -60,14 +68,3 @@
     background-color: var(--#{$prefix}-surface0);
 }
 
-
-$colors: (
-    "green",
-);
-
-@each $color in $colors {
-    .btn.#{$color} {
-        background-color: var(--#{$prefix}-#{$color});
-    }
-}
-

web/sass/utility-classes.scss

@@ -195,3 +195,61 @@ table.table-striped {
 .select.border {
     border: 2pt solid var(--#{$prefix}-text);
 }
+
+.input-sizer {
+  display: inline-grid;
+  vertical-align: top;
+  align-items: center;
+  position: relative;
+  border: solid 1px;
+  padding: .25em .5em;
+  margin: 5px;
+  
+  &.stacked {
+    padding: .5em;
+    align-items: stretch;
+    
+    &::after,
+    input,
+    textarea {
+      grid-area: 2 / 1;
+    }
+  }
+  
+  &::after,
+  input,
+  textarea {
+    width: auto;
+    min-width: 1em;
+    grid-area: 1 / 2;
+    font: inherit;
+    padding: 0.25em;
+    margin: 0;
+    resize: none;
+    background: none;
+    appearance: none;
+    border: none;
+  }
+  
+  span {
+    padding: 0.25em;
+  }
+  
+  &::after {
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+  
+  &:focus-within {
+    outline: solid 1px blue;
+    box-shadow: 4px 4px 0px blue;
+    
+    > span { color: blue; }
+    
+    textarea:focus,
+    input:focus {
+      outline: none;
+    }
+  }
+}

web/sass/variables.scss

@@ -38,9 +38,3 @@
 .tc-text {
     color: var(--#{$prefix}-text);
 }
-.c-s0 {
-    background-color: var(--#{$prefix}-surface0);
-}
-.c-s1 {
-    background-color: var(--#{$prefix}-surface1);
-}

web/static/index.js

@@ -58,6 +58,9 @@ function register_handlers() {
     register_dropdowns();
     document.querySelector("#open-draft").addEventListener("click", open_drafts);
     document.querySelector("#close-transaction-pane").addEventListener("click", close_drafts);
+    document.querySelector(".input-sizer > input").addEventListener("input", (event) => {
+        event.target.parentNode.dataset.value = event.target.value
+    });
     close_new_transaction_pane();
 }
 

web/templates/new_transaction_pane.templ

@@ -46,20 +46,25 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
             </div>
             <div class="row">
                 <div class="p-5 mx-auto">
-                    <label>
-                        Tag:
-                        <input class="input" id="trans-tab-entry" type="text" disabled="disabled" />
+                    <label class="input-sizer">
+                        <span>Tag: </span>
+                        <input 
+                            size="4"
+                            class="input"
+                            id="trans-tab-entry"
+                            type="text"
+                        />
                     </label>
                 </div>
             </div>
             <div class="row">
                 <div class="ms-5 d-flex">
-                    <h2>Breakdown</h2>
-                    <button class="btn-sm ms-5 my-auto positive">
+                    <h2 class="my-3">Breakdown</h2>
+                    <button class="btn-sm ms-5 my-auto c-green invert">
                         <i class="" data-feather="plus"></i>
                         <span class="my-auto pe-2">New</span>
                     </button>
-                    <button class="btn-sm ms-5 my-auto positive">
+                    <button class="btn-sm ms-5 my-auto c-green invert">
                         <i class="" data-feather="plus"></i>
                         <span class="my-auto pe-2">Tax</span>
                     </button>

web/templates/transactions.templ

@@ -63,7 +63,6 @@ templ TransactionsPage(userID int, accounts *[]string) {
                     >Add
                     </button>
                 </div>
-
             </div>
 
             <button class="ms-5 borderless-btn">