Repository: sunflower-farmers/sunflower-farmers
File: src/features/game/components/bank/components/WithdrawFlower.tsx (TypeScript)

Code before:
  };

  const hasAccess = hasReputation({
    game: state,
    reputation: Reputation.Grower,
  });

  if (!hasAccess) {
    return <RequiredReputation reputation={Reputation.Grower} />;
  }

  if (!isFaceVerified({ game: state })) {
    return <FaceRecognition />;
  }

  const disableWithdraw =
    amount.greaterThan(balance) || amount.lessThanOrEqualTo(0);

  return (
    <>
      <ModalOverlay
        show={showConfirmation}
        onBackdropClick={() => setShowConfirmation(false)}
      >
        <InnerPanel>
          <div className="p-1">
            <div className="flex flex-col gap-1 mb-3">
              <Label type="default" icon={withdrawIcon}>
                {t("withdraw.flower.confirm")}
              </Label>
              <Label type="transparent">
                {t("withdraw.flower.chain", {
                  chain: chain?.name || "",
                })}
              </Label>
              <Label type="transparent">
                {t("withdraw.flower.amount", {
                  amount: formatNumber(amount, { decimalPlaces: 4 }),
                })}
              </Label>
              <Label type="transparent" className="text-nowrap">
                {t("withdraw.flower.recipient", {
                  address: shortAddress(wallet.getAccount() || "XXXX"),
                })}
              </Label>
            </div>

            <Label type="danger">{t("withdraw.flower.cannotCancel")}</Label>
            <Label type="transparent">
              <span className="text-xxs">
                {t("withdraw.flower.transaction", {

Review comment (suggestion):
This just gives a little space to break up the small text.

```suggestion
          <div className="p-1 mb-1">
```

Code after:
  };

  const hasAccess = hasReputation({
    game: state,
    reputation: Reputation.Grower,
  });

  if (!hasAccess) {
    return <RequiredReputation reputation={Reputation.Grower} />;
  }

  if (!isFaceVerified({ game: state })) {
    return <FaceRecognition />;
  }

  const disableWithdraw =
    amount.greaterThan(balance) || amount.lessThanOrEqualTo(0);

  return (
    <>
      <ModalOverlay
        show={showConfirmation}
        onBackdropClick={() => setShowConfirmation(false)}
      >
        <InnerPanel>
          <div className="p-1 mb-1">
            <div className="flex flex-col gap-1 mb-3">
              <Label type="default" icon={withdrawIcon}>
                {t("withdraw.flower.confirm")}
              </Label>
              <Label type="transparent">
                {t("withdraw.flower.chain", {
                  chain: chain?.name || "",
                })}
              </Label>
              <Label type="transparent">
                {t("withdraw.flower.amount", {
                  amount: formatNumber(amount, { decimalPlaces: 4 }),
                })}
              </Label>
              <Label type="transparent" className="text-nowrap">
                {t("withdraw.flower.recipient", {
                  address: shortAddress(wallet.getAccount() || "XXXX"),
                })}
              </Label>
            </div>

            <Label type="danger">{t("withdraw.flower.cannotCancel")}</Label>
            <Label type="transparent">
              <span className="text-xxs">
                {t("withdraw.flower.transaction", {