fix: compact mobile subscription status card

frontend/src/styles/webapp.css

@@ -268,6 +268,10 @@ a {
   opacity: 1;
 }
 
+.sub-status-details {
+  min-width: 0;
+}
+
 .status-tariff-action {
   min-height: 34px;
   margin-left: auto;
@@ -276,6 +280,64 @@ a {
   white-space: nowrap;
 }
 
+@media (max-width: 1023px) {
+  .status-card {
+    padding: 13px;
+  }
+
+  .sub-status {
+    display: grid;
+    grid-template-columns: 34px minmax(0, 1fr);
+    align-items: center;
+    gap: 8px 10px;
+  }
+
+  .sub-status-icon {
+    width: 30px;
+    height: 30px;
+  }
+
+  .sub-status h2 {
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 1.14;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sub-status-details {
+    display: flex;
+    min-width: 0;
+    gap: 4px;
+    align-items: baseline;
+    overflow: hidden;
+  }
+
+  .sub-status-details p {
+    min-width: 0;
+    margin-top: 3px;
+    overflow: hidden;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sub-status-details-with-tariff .current-tariff-line {
+    flex: 0 1 auto;
+  }
+
+  .sub-status-details-with-tariff .subscription-end-line {
+    flex: 0 0 auto;
+  }
+
+  .status-tariff-action {
+    grid-column: 1 / -1;
+    width: 100%;
+    margin-left: 0;
+    justify-content: center;
+  }
+}
+
 .traffic-top,
 .total-card {
   display: flex;

frontend/src/webapp/screens/HomeScreen.svelte

@@ -118,23 +118,30 @@
     <Card class={`status-card${subscription.active ? "" : " status-card-inactive"}`}>
       {#if subscription.active}
         <div class="sub-status">
-          <CheckCircle2 size={23} />
+          <CheckCircle2 class="sub-status-icon" size={23} />
           <div class="sub-status-main">
             <h2>
               {trafficMode ? t("wa_home_access_active") : t("wa_home_subscription_active")} | {activeSubscriptionTermLabel(
                 subscription
               )}
             </h2>
-            {#if hasActiveTariffSubscription && hasMultipleTariffs && currentTariffName}
+            <div
-              <p class="current-tariff-line">
+              class:sub-status-details-with-tariff={hasActiveTariffSubscription &&
-                {t("wa_current_tariff", { tariff: currentTariffName })}
+                hasMultipleTariffs &&
+                currentTariffName}
+              class="sub-status-details"
+            >
+              {#if hasActiveTariffSubscription && hasMultipleTariffs && currentTariffName}
+                <p class="current-tariff-line">
+                  {t("wa_current_tariff", { tariff: currentTariffName })}
+                </p>
+              {/if}
+              <p class="subscription-end-line">
+                {subscription.end_date_text
+                  ? t("wa_until_date", { date: subscription.end_date_text })
+                  : subscription.remaining_text}
               </p>
-            {/if}
+            </div>
-            <p>
-              {subscription.end_date_text
-                ? t("wa_until_date", { date: subscription.end_date_text })
-                : subscription.remaining_text}
-            </p>
           </div>
           {#if canChangeTariff}
             <Button
@@ -149,7 +156,7 @@
         </div>
       {:else}
         <div class="sub-status sub-status-inactive">
-          <CircleX size={23} />
+          <CircleX class="sub-status-icon" size={23} />
           <h2>{t("wa_home_subscription_inactive")}</h2>
         </div>
       {/if}