address style improvments

Cargo.toml

@@ -3,9 +3,6 @@ name    = "mascarpone"
 version = "0.1.0"
 edition = "2024"
 
-[build]
-rustflags = ["--cfg=sqlx_macros_unstable"]
-
 [dependencies]
 anyhow         = "1.0.100"
 axum           = { version = "0.8.6",   features = ["macros", "form"] }

Taskfile

@@ -25,4 +25,9 @@ deploy_to_server() {
     && ssh -t "$where" "sudo mv -f mascarpone /usr/bin/ && sudo rm -rf /var/local/mascarpone/static && sudo mv -f static /var/local/mascarpone/ && sudo systemctl restart mascarpone"
 }
 
+dev() {
+  refresh_sqlx_db > /dev/null
+  env DATABASE_URL=sqlite:some_user.db cargo run -- serve
+}
+
 "$@"

build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    println!("cargo:rerun-if-changed=migrations");
+}

src/web/contact.rs

@@ -19,7 +19,7 @@ use crate::models::user::AuthSession;
 use crate::models::{HydratedContact, JournalEntry};
 use crate::{AppError, AppState};
 
-#[derive(serde::Serialize)]
+#[derive(serde::Serialize, Debug)]
 pub struct Address {
     pub id: DbId,
     pub contact_id: DbId,
@@ -248,24 +248,31 @@ mod get {
                 label { "addresses" }
                 div x-data=(json!({ "addresses": addresses, "new_label": "", "new_address": "" })) {
                     template x-for="(address, index) in addresses" x-bind:key="index" {
-                        div {
-                            input name="address_label" x-show="addresses.length > 1" x-model="address.label" placeholder="label";
-                            input name="address_value" x-model="address.value" placeholder="address";
+                        .address-input {
+                            input name="address_label" x-show="addresses.length" x-model="address.label" placeholder="label";
+                            .grow-wrap x-bind:data-replicated-value="address.value" {
+                                textarea name="address_value" x-model="address.value" placeholder="address" {}
                             }
                         }
-                    div {
-                        input x-show="addresses.length > 1" name="address_label" x-model="new_label" placeholder="label";
-                        input name="address_value" x-model="new_address" placeholder="new address";
+                    }
+                    .address-input {
+                        input x-show="addresses.length" name="address_label" x-model="new_label" placeholder="label";
+                        .grow-wrap x-bind:data-replicated-value="new_address" {
+                            textarea name="address_value" x-model="new_address" placeholder="new address" {}
+                        }
                     }
                     input type="button" value="Add" x-on:click="addresses.push({ label: new_label, value: new_address }); new_label = ''; new_address = ''";
                 }
             }
+            div #text_body {
+                div { "Free text (supports markdown)" }
                 .grow-wrap data-replicated-value=(text_body) {
                     textarea name="text_body"
                     onInput="this.parentNode.dataset.replicatedValue = this.value"
                     { (text_body) }
                 }
             }
+        }
     }))
     }
 }

static/contact.css

@@ -33,9 +33,14 @@ main {
   grid-template-columns: min-content auto;
   row-gap: 0.5em;
 
-  .label {
+  .label[data-is-empty="false"] {
     color: var(--line-color);
     text-align: right;
+    margin-right: 0.5em;
+  }
+
+  .value {
+    white-space: pre-wrap;
   }
 }
 
@@ -72,14 +77,35 @@ main {
   &>textarea,
   &::after {
     /* Identical styling required!! */
-    margin-top: 1em;
     width: 100%;
+    max-width: 12em;
+    font: inherit;
+    border: 1px solid gray;
+    box-sizing: border-box;
+    margin: 2px 0;
+    padding: 0.25em;
 
     /* Place on top of each other */
     grid-area: 1 / 1 / 2 / 2;
   }
 }
 
+@media only screen and (max-width: 650px) {
+  .address-input+.address-input {
+    margin-top: 0.5em;
+  }
+}
+
+#text_body {
+  margin-top: 1em;
+
+  .grow-wrap>textarea,
+  .grow-wrap::after {
+    /* Identical styling required!! */
+    max-width: 100%;
+  }
+}
+
 .hint {
   font-size: small;
 }