@kernhq/module-billing 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kernhq/module-billing",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Kern billing module: plans, entitlements, subscriptions and Stripe — the mechanism that lets any Kern instance sell seats on itself",
   "homepage": "https://github.com/KernAIO/module-billing#readme",
   "license": "AGPL-3.0-only",

package/src/client/settings/PlanSettings.svelte

@@ -413,7 +413,14 @@ function once(run: () => void) {
           {@const isCurrent = sub?.planId === plan.id}
           {@const blocked = planBlockedReason(plan, { seats: usage.seats })}
           <li class="grid">
-            <Card class="grid content-between gap-4 p-4">
+            <!--
+              `Card` is a block: a `grid` class on it does not reach its content, so the gap
+              between the highlights and the button was lost and the button sat flush against the
+              last line with the card's padding pooled underneath. The layout lives on an element
+              of our own inside the card.
+            -->
+            <Card class="p-4">
+              <div class="grid h-full content-between gap-5">
               <div class="grid gap-2">
                 <div class="flex items-center justify-between gap-2">
                   <span class="text-[15px] font-medium text-[var(--kern-ink-900)]">{plan.name}</span>
@@ -429,16 +436,19 @@ function once(run: () => void) {
                   Free text an administrator typed, in whatever language they typed it. Under a
                   Persian screen an English highlight rendered backwards — "2 GB of storage" with
                   the 2 at the far end — because the block's direction was applied to a line whose
-                  own direction is Latin. `dir="auto"` lets each line follow its first strong
-                  character; the text alignment stays with the screen.
+                  own direction is Latin. `dir="auto"` on the block fixed the order and broke the
+                  alignment — the line became a left-aligned island in a right-aligned card — and
+                  so did `unicode-bidi: plaintext`, because Chrome resolves `text-align: start`
+                  against the paragraph's resolved direction in both cases. `<bdi>` isolates the
+                  run inside a block that keeps the card's direction and alignment.
                 -->
                 {#if plan.description}
-                  <p class="text-[13px] text-[var(--kern-ink-700)]" dir="auto">{plan.description}</p>
+                  <p class="text-[13px] text-[var(--kern-ink-700)]"><bdi>{plan.description}</bdi></p>
                 {/if}
                 {#if plan.highlights.length}
                   <ul class="mt-1 grid gap-1">
                     {#each plan.highlights as h (h)}
-                      <li class="text-[12.5px] text-[var(--kern-ink-700)]" dir="auto">{h}</li>
+                      <li class="text-[12.5px] text-[var(--kern-ink-700)]"><bdi>{h}</bdi></li>
                     {/each}
                   </ul>
                 {/if}
@@ -468,6 +478,7 @@ function once(run: () => void) {
                   </span>
                 {/snippet}
               </Tooltip>
+              </div>
             </Card>
           </li>
         {/each}
@@ -519,4 +530,4 @@ function once(run: () => void) {
       {/if}
     </section>
   {/if}
-</div>
+</div>