From faf4c450b0e995e68fdce6f236a0a1a2de5e85c7 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 24 Jul 2026 17:45:11 +0300
Subject: [PATCH] =?UTF-8?q?fix(sbp-recurring):=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=B0=D0=BA=D1=82=D0=BD=D1=8B=D0=B9=20layout=20=D0=A1=D0=91?=
 =?UTF-8?q?=D0=9F-=D0=B1=D0=BB=D0=BE=D0=BA=D0=B0=20=D0=BD=D0=B0=20=D0=B4?=
 =?UTF-8?q?=D0=B5=D1=81=D0=BA=D1=82=D0=BE=D0=BF=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Кнопки растягивались w-full на всю ширину карточки подписки (~1600px на
десктопе) — гигантская плашка вместо контрола. Теперь заголовок и статус
слева, компактное действие справа — зеркально соседнему тогглу
«Автопродление»; на мобиле кнопка по-прежнему на всю ширину
(w-full sm:w-auto).
---
 src/pages/Subscription.tsx | 183 +++++++++++++++++++------------------
 1 file changed, 95 insertions(+), 88 deletions(-)

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index c879276..30dac97 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -1177,100 +1177,107 @@ export default function Subscription() {
                     border: `1px solid ${g.innerBorder}`,
                   }}
                 >
-                  <div className="text-sm font-semibold text-dark-50">
-                    {t('subscription.sbpRecurring.title')}
-                  </div>
-
-                  {sbpUiStateValue === 'off' && (
-                    <>
-                      <div className="mt-0.5 text-[11px] text-dark-50/30">
-                        {t('subscription.sbpRecurring.autopayHint')}
+                  {/* Заголовок и статус слева, компактное действие справа —
+                      зеркально соседнему тогглу «Автопродление». На мобиле
+                      кнопка падает вниз на всю ширину (w-full sm:w-auto). */}
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="min-w-0">
+                      <div className="text-sm font-semibold text-dark-50">
+                        {t('subscription.sbpRecurring.title')}
                       </div>
-                      <button
-                        onClick={() => enableSbpMutation.mutate()}
-                        disabled={enableSbpMutation.isPending}
-                        className="mt-3 w-full rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-medium text-on-accent transition-opacity disabled:opacity-50"
-                      >
-                        {enableSbpMutation.isPending ? (
-                          <span className="mx-auto block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-                        ) : (
-                          t('subscription.sbpRecurring.connect')
-                        )}
-                      </button>
-                    </>
-                  )}
 
-                  {sbpUiStateValue === 'pending' && (
-                    <>
-                      <div className="mt-0.5 text-[11px] text-dark-50/30">
-                        {t('subscription.sbpRecurring.statusPending')}
-                      </div>
-                      {sbpInfo?.redirect_url && (
-                        <button
-                          onClick={() => {
-                            if (sbpInfo.redirect_url) {
-                              openPaymentUrl(sbpInfo.redirect_url, platform, openLink);
-                            }
-                          }}
-                          className="mt-3 w-full rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-medium text-on-accent transition-opacity"
-                        >
-                          {t('subscription.sbpRecurring.confirmInBank')}
-                        </button>
-                      )}
-                      <button
-                        onClick={handleCancelSbp}
-                        disabled={cancelSbpMutation.isPending}
-                        className="mt-2 text-[11px] font-medium transition-colors disabled:opacity-50"
-                        style={{ color: 'rgb(var(--color-critical-500))' }}
-                      >
-                        {t('subscription.sbpRecurring.cancel')}
-                      </button>
-                    </>
-                  )}
-
-                  {sbpUiStateValue === 'active' && sbpInfo && (
-                    <>
-                      <div className="mt-0.5 text-[11px] text-dark-50/30">
-                        {t('subscription.sbpRecurring.amountPerInterval', {
-                          amount: formatAmount((sbpInfo.amount_kopeks ?? 0) / 100),
-                          interval: t(sbpIntervalLabelKey(sbpInfo.interval)),
-                        })}
-                      </div>
-                      {sbpInfo.next_charge_at && (
+                      {sbpUiStateValue === 'off' && (
                         <div className="mt-0.5 text-[11px] text-dark-50/30">
-                          {t('subscription.sbpRecurring.nextCharge', {
-                            date: new Date(sbpInfo.next_charge_at).toLocaleDateString(uiLocale(), {
-                              day: '2-digit',
-                              month: '2-digit',
-                              year: 'numeric',
-                            }),
-                          })}
+                          {t('subscription.sbpRecurring.autopayHint')}
                         </div>
                       )}
-                      <button
-                        onClick={handleCancelSbp}
-                        disabled={cancelSbpMutation.isPending}
-                        className="mt-3 w-full rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm font-medium text-error-400 transition-colors hover:bg-error-500/20 disabled:opacity-50"
-                      >
-                        {t('subscription.sbpRecurring.cancel')}
-                      </button>
-                    </>
-                  )}
+                      {sbpUiStateValue === 'pending' && (
+                        <div className="mt-0.5 text-[11px] text-dark-50/30">
+                          {t('subscription.sbpRecurring.statusPending')}
+                        </div>
+                      )}
+                      {sbpUiStateValue === 'active' && sbpInfo && (
+                        <>
+                          <div className="mt-0.5 text-[11px] text-dark-50/30">
+                            {t('subscription.sbpRecurring.amountPerInterval', {
+                              amount: formatAmount((sbpInfo.amount_kopeks ?? 0) / 100),
+                              interval: t(sbpIntervalLabelKey(sbpInfo.interval)),
+                            })}
+                          </div>
+                          {sbpInfo.next_charge_at && (
+                            <div className="mt-0.5 text-[11px] text-dark-50/30">
+                              {t('subscription.sbpRecurring.nextCharge', {
+                                date: new Date(sbpInfo.next_charge_at).toLocaleDateString(
+                                  uiLocale(),
+                                  {
+                                    day: '2-digit',
+                                    month: '2-digit',
+                                    year: 'numeric',
+                                  },
+                                ),
+                              })}
+                            </div>
+                          )}
+                        </>
+                      )}
+                      {sbpUiStateValue === 'past_due' && (
+                        <div className="mt-0.5 text-[11px] font-medium text-warning-400">
+                          {t('subscription.sbpRecurring.statusPastDue')}
+                        </div>
+                      )}
+                    </div>
 
-                  {sbpUiStateValue === 'past_due' && (
-                    <>
-                      <div className="mt-0.5 text-[11px] font-medium text-warning-400">
-                        {t('subscription.sbpRecurring.statusPastDue')}
-                      </div>
-                      <button
-                        onClick={handleCancelSbp}
-                        disabled={cancelSbpMutation.isPending}
-                        className="mt-3 w-full rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm font-medium text-error-400 transition-colors hover:bg-error-500/20 disabled:opacity-50"
-                      >
-                        {t('subscription.sbpRecurring.cancel')}
-                      </button>
-                    </>
-                  )}
+                    <div className="flex shrink-0 flex-col gap-2 sm:items-end">
+                      {sbpUiStateValue === 'off' && (
+                        <button
+                          onClick={() => enableSbpMutation.mutate()}
+                          disabled={enableSbpMutation.isPending}
+                          className="w-full whitespace-nowrap rounded-xl bg-accent-500 px-5 py-2.5 text-sm font-medium text-on-accent transition-opacity disabled:opacity-50 sm:w-auto"
+                        >
+                          {enableSbpMutation.isPending ? (
+                            <span className="mx-auto block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                          ) : (
+                            t('subscription.sbpRecurring.connect')
+                          )}
+                        </button>
+                      )}
+
+                      {sbpUiStateValue === 'pending' && (
+                        <>
+                          {sbpInfo?.redirect_url && (
+                            <button
+                              onClick={() => {
+                                if (sbpInfo.redirect_url) {
+                                  openPaymentUrl(sbpInfo.redirect_url, platform, openLink);
+                                }
+                              }}
+                              className="w-full whitespace-nowrap rounded-xl bg-accent-500 px-5 py-2.5 text-sm font-medium text-on-accent transition-opacity sm:w-auto"
+                            >
+                              {t('subscription.sbpRecurring.confirmInBank')}
+                            </button>
+                          )}
+                          <button
+                            onClick={handleCancelSbp}
+                            disabled={cancelSbpMutation.isPending}
+                            className="text-[11px] font-medium transition-colors disabled:opacity-50 sm:text-right"
+                            style={{ color: 'rgb(var(--color-critical-500))' }}
+                          >
+                            {t('subscription.sbpRecurring.cancel')}
+                          </button>
+                        </>
+                      )}
+
+                      {(sbpUiStateValue === 'active' || sbpUiStateValue === 'past_due') && (
+                        <button
+                          onClick={handleCancelSbp}
+                          disabled={cancelSbpMutation.isPending}
+                          className="w-full whitespace-nowrap rounded-xl border border-error-500/30 bg-error-500/10 px-5 py-2.5 text-sm font-medium text-error-400 transition-colors hover:bg-error-500/20 disabled:opacity-50 sm:w-auto"
+                        >
+                          {t('subscription.sbpRecurring.cancel')}
+                        </button>
+                      )}
+                    </div>
+                  </div>
                 </div>
               )}
             </div>