Fix layout when rendering multiple action buttons

curveball · Jan 8, 2025 · 30ad764 · 30ad764
1 parent c8383f1
commit 30ad764
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 77 deletions.
diff --git a/assets/themes/curveball/main.css b/assets/themes/curveball/main.css
@@ -70,6 +70,16 @@ header a {
   text-decoration: none;
 }
 
+ul.button-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 /* search */
 form.search {
 

diff --git a/changelog.md b/changelog.md
@@ -1,6 +1,12 @@
 Changelog
 =========
 
+1.1.5 (????-??-??)
+------------------
+
+* Fix layout when multiple single-button actions are rendered.
+
+
 1.1.4 (2024-12-15)
 ------------------
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/forms.tsx b/src/components/forms.tsx
@@ -33,7 +33,9 @@ export function Forms(props: PageProps) {
 
   return <>
     <h2 key="-1">Actions</h2>
-    {buttonForms.map( (form, index) => <span key={index}>{form}</span>)}
+    <ul className="action-buttons">
+      {buttonForms.map( (form, index) => <li key={index}>{form}</li>)}
+    </ul>
     {forms.map( (form, index) => <span key={index}>{form}</span>)}
   </>;