fix: a lot of design flaws

Info text when empty, new inputs, minimum height of content fixed

app/assets/styles/form/textfield.css

@@ -0,0 +1,66 @@
+.TextField {
+  --border-color: var(--color-light);
+  --label-color: var(--color-middle);
+  --label-position-top: 0.4em;
+  --label-font-size: 1rem;
+  --icon-color: var(--color-main-dark);
+  --message-color: var(--color-middle);
+
+  position: relative;
+  flex: 25% 1 0;
+
+  &:focus-within {
+    --border-color: var(--color-main-dark);
+  }
+
+  &:focus-within,
+  &:has(input:not(:placeholder-shown)) {
+    --icon-color: var(--color-main-dark);
+    --label-color: var(--color-main-dark);
+    --label-position-top: -11px;
+    --label-font-size: 0.8rem;
+  }
+
+  &.error {
+    --label-color: var(--color-error);
+    --icon-color: var(--color-error);
+    --border-color: var(--color-error);
+    --message-color: var(--color-error);
+  }
+
+  & .wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0.1rem 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-default);
+  }
+
+  & label {
+    position: absolute;
+    background: var(--color-lightest);
+    padding: 0.2rem;
+    left: 1.8rem;
+    color: var(--label-color);
+    top: var(--label-position-top);
+    font-size: var(--label-font-size);
+    transition: var(--transition-default);
+  }
+
+  & .icon {
+    color: var(--icon-color);
+  }
+
+  & input {
+    all: unset;
+    padding: 0.5rem;
+    font-size: 1rem;
+    width: 100%;
+    flex: 25% 1 0;
+  }
+
+  & span {
+    color: var(--message-color);
+    font-size: 0.6rem;
+  }
+}