fix: align tariff action in status card

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: 34px;
-  min-height: 38px;
+  margin-left: auto;
   padding: 0 12px;
+  flex: 0 0 auto;
+  white-space: nowrap;
 }
 
 .traffic-top,

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,9 +119,10 @@
                 ? t("wa_until_date", { date: subscription.end_date_text })
                 : subscription.remaining_text}
             </p>
+          </div>
           {#if canChangeTariff}
             <Button
-                class="wide status-tariff-action"
+              class="status-tariff-action"
               variant="secondary"
               onclick={openTariffChangeModal}
             >
@@ -130,7 +131,6 @@
             </Button>
           {/if}
         </div>
-        </div>
       {:else}
         <div class="sub-status sub-status-inactive">
           <CircleX size={23} />