From 52458eb2238013795a7b8104c2f481f44d3ba051 Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Thu, 28 May 2026 11:31:41 +0300
Subject: [PATCH] fix: align tariff action in status card

---
 frontend/src/styles/webapp.css                | 11 ++++++++--
 frontend/src/webapp/screens/HomeScreen.svelte | 22 +++++++++----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/styles/webapp.css b/frontend/src/styles/webapp.css
index 6b20b51..84a8331 100644
--- a/frontend/src/styles/webapp.css
+++ b/frontend/src/styles/webapp.css
@@ -245,6 +245,11 @@ a {
   color: var(--accent);
 }
 
+.sub-status-main {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 .sub-status h2 {
   margin: 0;
   font-size: 15px;
@@ -264,9 +269,11 @@ a {
 }
 
 .status-tariff-action {
-  margin-top: 10px;
-  min-height: 38px;
+  min-height: 34px;
+  margin-left: auto;
   padding: 0 12px;
+  flex: 0 0 auto;
+  white-space: nowrap;
 }
 
 .traffic-top,
diff --git a/frontend/src/webapp/screens/HomeScreen.svelte b/frontend/src/webapp/screens/HomeScreen.svelte
index c50b107..49a2888 100644
--- a/frontend/src/webapp/screens/HomeScreen.svelte
+++ b/frontend/src/webapp/screens/HomeScreen.svelte
@@ -103,7 +103,7 @@
       {#if subscription.active}
         <div class="sub-status">
           <CheckCircle2 size={23} />
-          <div>
+          <div class="sub-status-main">
             <h2>
               {trafficMode ? t("wa_home_access_active") : t("wa_home_subscription_active")} | {activeSubscriptionTermLabel(
                 subscription
@@ -119,17 +119,17 @@
                 ? t("wa_until_date", { date: subscription.end_date_text })
                 : subscription.remaining_text}
             </p>
-            {#if canChangeTariff}
-              <Button
-                class="wide status-tariff-action"
-                variant="secondary"
-                onclick={openTariffChangeModal}
-              >
-                <Repeat2 size={17} />
-                {t("wa_change_tariff")}
-              </Button>
-            {/if}
           </div>
+          {#if canChangeTariff}
+            <Button
+              class="status-tariff-action"
+              variant="secondary"
+              onclick={openTariffChangeModal}
+            >
+              <Repeat2 size={17} />
+              {t("wa_change_tariff")}
+            </Button>
+          {/if}
         </div>
       {:else}
         <div class="sub-status sub-status-inactive">