taler-typescript-core

commit 575e42a985efd857cac0ca824481b504b6cfbe34
parent 4239599a7dc4984b9c352f82255f0e891c9ec0cf
Author: Florian Dold <dold@taler.net>
Date:   Tue,  3 Nov 2026 23:26:57 +0100

merchant web UI: use flat footers for inline settings editors

Diffstat:
M
packages/taler-merchant-webui/src/screens/BusinessSettingsScreen.tsx
 | 
1
+
M
packages/taler-merchant-webui/src/ui/FormActionFooter.tsx
 | 
12
+++++++++++-

2 files changed, 12 insertions(+), 1 deletion(-)
diff --git a/packages/taler-merchant-webui/src/screens/BusinessSettingsScreen.tsx b/packages/taler-merchant-webui/src/screens/BusinessSettingsScreen.tsx
@@ -228,6 +228,7 @@ function EditorActions({
   const { t } = useTranslation();
   return (
     <FormActionFooter
+      variant="inline"
       error={error}
       validationError={validationError}
       pending={pending}
diff --git a/packages/taler-merchant-webui/src/ui/FormActionFooter.tsx b/packages/taler-merchant-webui/src/ui/FormActionFooter.tsx
@@ -53,6 +53,8 @@ export function useFormFeedback() {
 
 export interface FormActionFooterProps {
   children: ComponentChildren;
+  /** Inline editors use a plain divider; scrolling forms use a raised footer. */
+  variant?: "inline" | "sticky";
   error?: unknown;
   validationError?: string;
   title?: string;
@@ -62,6 +64,7 @@ export interface FormActionFooterProps {
 
 export function FormActionFooter({
   children,
+  variant,
   error,
   validationError,
   title,
@@ -99,6 +102,7 @@ export function FormActionFooter({
 
   return (
     <ActionFooter
+      variant={variant}
       feedback={
         <>
           {!pending &&
@@ -151,14 +155,20 @@ export function FormActionFooter({
 export function ActionFooter({
   children,
   feedback,
+  variant = "sticky",
 }: {
   children: ComponentChildren;
   feedback?: ComponentChildren;
+  variant?: "inline" | "sticky";
 }) {
   return (
     <div
       data-form-action-footer
-      class="sticky bottom-0 z-20 space-y-3 border-t border-gray-200 bg-white px-3 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] shadow-[0_-2px_6px_rgb(0_0_0/0.06)] rounded-b-lg"
+      class={`space-y-3 border-t border-gray-200 pt-3 ${
+        variant === "sticky"
+          ? "sticky bottom-0 z-20 bg-white px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] shadow-[0_-2px_6px_rgb(0_0_0/0.06)] rounded-b-lg"
+          : ""
+      }`}
     >
       {feedback}
       <div class="flex flex-wrap items-center justify-end gap-3">