strings

src/frontend/src/components/orders/PaymentDetailsCard.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Button, Card, Collapse, Empty, Flex, QRCode, Space, Typography, theme } from "antd";
+import { Button, Card, Collapse, Empty, Flex, QRCode, Space, Tooltip, Typography, theme } from "antd";
 import { ExportOutlined, InfoCircleOutlined } from "@ant-design/icons";
 import { markdownToHtml } from "../../lib/markdown";
 import {
   PAYMENT_ESTIMATE_DISCLAIMER,
+  PAYMENT_ESTIMATE_DISCLAIMER_SHORT,
   PAYMENT_PROVIDER_LABELS,
   buildPaymentQrValue,
   buildPaypalUrl,
@@ -41,9 +42,11 @@ function DetailLine({ label, value, copyValue }: { label: string; value: string;
 
 export function PaymentDisclaimer() {
   return (
-    <Text type="secondary" style={{ ...hintStyle, display: "block" }} ellipsis={{ tooltip: PAYMENT_ESTIMATE_DISCLAIMER }}>
-      <InfoCircleOutlined /> {PAYMENT_ESTIMATE_DISCLAIMER}
-    </Text>
+    <Tooltip title={PAYMENT_ESTIMATE_DISCLAIMER}>
+      <Text type="secondary" style={{ ...hintStyle, cursor: "help" }}>
+        <InfoCircleOutlined /> {PAYMENT_ESTIMATE_DISCLAIMER_SHORT}
+      </Text>
+    </Tooltip>
   );
 }
 
@@ -72,23 +75,26 @@ export function PaymentMethodDetails({ method, context }: { method: PaymentMetho
             <DetailLine label="PayPal" value={cleanPaypalUsername(method.username)} copyValue={paypalUrl} />
           )}
           <DetailLine label="Amount" value={amount} copyValue={formatAmount(context.amount)} />
-          <DetailLine label={method.type === "paypal" ? "Note" : "Reference"} value={reference} />
+          <DetailLine
+            label={"Reference"}
+            value={reference}
+          />
           {method.type === "sepa" && qrValue && (
             <Text type="secondary" style={hintStyle}>
               Scan the code with your banking app to pre-fill the transfer.
             </Text>
           )}
           {paypalUrl && (
-            <Space direction="vertical" size={4}>
-              {reference && (
-                <Text type="secondary" style={hintStyle}>
-                  PayPal links can't carry a note, please add the note above manually.
-                </Text>
-              )}
-              <Button size="small" icon={<ExportOutlined />} href={paypalUrl} target="_blank" rel="noopener noreferrer">
-                Open PayPal
-              </Button>
-            </Space>
+            <Button
+              size="small"
+              icon={<ExportOutlined />}
+              href={paypalUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ alignSelf: "flex-start" }}
+            >
+              Open PayPal
+            </Button>
           )}
         </Space>
       </Flex>

src/frontend/src/lib/paymentDetails.ts

@@ -15,6 +15,8 @@ export const PAYMENT_REFERENCE_PLACEHOLDERS = [
   { key: "{total}", description: "Participant's estimated total, e.g. 12.50" },
 ];
 
+export const PAYMENT_ESTIMATE_DISCLAIMER_SHORT = "Amounts are estimates and subject to change.";
+
 export const PAYMENT_ESTIMATE_DISCLAIMER =
   "All amounts are non-binding estimates based on the listed menu prices. Errors and omissions excepted; " +
   "the final amount may differ and remains subject to change, e.g. due to pricing errors, substitutions or fees.";