improve appearance of poke form

2 files changed, 18 insertions, 9 deletions

diff --git a/static/form.css b/static/form.css
index 39f25cf..12e3ab3 100644
--- a/static/form.css
+++ b/static/form.css
@@ -161,15 +161,11 @@ form:not(.nopanel) {
   }
 
   &.pokeForm {
-    .column {
-      display: flex;
-      align-items: center;
-    }
-    label {
-      display: inline;
-      font-size: inherit;
-      color: inherit;
-      margin-right: var(--spacing-single);
+    border-start-start-radius: 0;
+    margin: 0;
+    padding: var(--spacing-single) var(--spacing-double);
+    .row:has(> .column) {
+      grid-auto-columns: max-content;
     }
   }
 
diff --git a/static/profile.css b/static/profile.css
index a46a9a3..3634b23 100644
--- a/static/profile.css
+++ b/static/profile.css
@@ -55,6 +55,19 @@
       gap: var(--spacing-double);
     }
   }
+
+  details > summary {
+    background: var(--clr-secondary);
+    color: var(--clr-foreground-on-secondary);
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    padding: var(--spacing-single) var(--spacing-double);
+    width: max-content;
+  }
+  details[open]:has(.pokeForm) > summary {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
 }
 
 form.fullProfile {