From 7c0f1479b49e0c89a099dccb77ffabb1379b15d3 Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Tue, 18 Aug 2026 21:33:08 +0200
Subject: [PATCH] new StoresIndexPage fix

---
 .../frontend/src/page/stores/CommandBlock.vue |  6 +-
 .../src/page/stores/StoresIndexPage.vue       | 65 +++++++++++--------
 2 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/apps/frontend/src/page/stores/CommandBlock.vue b/apps/frontend/src/page/stores/CommandBlock.vue
index d888dce..eecb273 100644
--- a/apps/frontend/src/page/stores/CommandBlock.vue
+++ b/apps/frontend/src/page/stores/CommandBlock.vue
@@ -30,10 +30,12 @@ async function copy() {
 
 <style scoped>
 .cb {
-  @apply relative bg-gray-900 text-gray-100 rounded-xl overflow-x-auto;
+  @apply relative block bg-gray-900 text-gray-100 rounded-xl overflow-x-auto;
 }
+/* Explicitly margin-free: a `pre` carries a browser margin of its own, and the block is
+   spaced by whatever contains it — otherwise what follows ends up against it. */
 .cb pre {
-  @apply p-4 pr-14 font-mono text-sm leading-relaxed;
+  @apply m-0 p-4 pr-14 font-mono text-sm leading-relaxed;
 }
 .cb-copy {
   @apply absolute top-2 right-2 w-9 h-9 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors;
diff --git a/apps/frontend/src/page/stores/StoresIndexPage.vue b/apps/frontend/src/page/stores/StoresIndexPage.vue
index 181ee5e..234d886 100644
--- a/apps/frontend/src/page/stores/StoresIndexPage.vue
+++ b/apps/frontend/src/page/stores/StoresIndexPage.vue
@@ -74,20 +74,24 @@
       </div>
 
       <section class="st-section">
-        <p class="st-cmd-label">{{ t('stores.installTitle') }}</p>
-        <CommandBlock :command="current.installCmd" />
-        <template v-if="current.afterInstallCmd">
-          <p class="st-cmd-label">{{ t('stores.installThen') }}</p>
-          <CommandBlock :command="current.afterInstallCmd" />
-        </template>
+        <!-- The spacing lives on this one container. Margins on the labels and none on
+             the button row is what let the buttons sit flush against the last block. -->
+        <div class="st-cmds">
+          <p class="st-cmd-label">{{ t('stores.installTitle') }}</p>
+          <CommandBlock :command="current.installCmd" />
+          <template v-if="current.afterInstallCmd">
+            <p class="st-cmd-label">{{ t('stores.installThen') }}</p>
+            <CommandBlock :command="current.afterInstallCmd" />
+          </template>
 
-        <p class="st-cmd-label">{{ t('stores.useTitle') }}</p>
-        <CommandBlock :command="current.cliSnippet" />
+          <p class="st-cmd-label">{{ t('stores.useTitle') }}</p>
+          <CommandBlock :command="current.cliSnippet" />
 
-        <p class="st-cmd-label">{{ t('stores.uninstallTitle') }}</p>
-        <CommandBlock :command="current.uninstallCmd" />
+          <p class="st-cmd-label">{{ t('stores.uninstallTitle') }}</p>
+          <CommandBlock :command="current.uninstallCmd" />
+        </div>
 
-        <div class="st-links">
+        <div class="st-links st-links-after">
           <a :href="current.wikiUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-indigo">
             <i class="fa-solid fa-book"></i> {{ t('stores.docs') }}
           </a>
@@ -99,20 +103,21 @@
           </a>
         </div>
       </section>
-    </template>
 
-    <!-- The same either way: which catalog platforms end up installed. A list, not a
-         paragraph. -->
-    <section class="st-section">
-      <h2 class="st-section-title">{{ t('stores.platformsTitle') }}</h2>
-      <ul class="st-platforms">
-        <li v-for="p in platforms" :key="p.platform" class="st-platform">
-          <i :class="p.icon" class="st-platform-icon"></i>
-          <span class="st-platform-name">{{ p.label }}</span>
-          <code class="st-platform-ext">{{ p.ext }}</code>
-        </li>
-      </ul>
-    </section>
+      <!-- Which catalog platforms a store engine can put on a device. The app has no
+           such list to show: it installs whatever the catalog offers, and says so on the
+           cards themselves. -->
+      <section class="st-section">
+        <h2 class="st-section-title">{{ t('stores.platformsTitle') }}</h2>
+        <ul class="st-platforms">
+          <li v-for="p in platforms" :key="p.platform" class="st-platform">
+            <i :class="p.icon" class="st-platform-icon"></i>
+            <span class="st-platform-name">{{ p.label }}</span>
+            <code class="st-platform-ext">{{ p.ext }}</code>
+          </li>
+        </ul>
+      </section>
+    </template>
 
     <p class="st-engine-line">
       {{ t('stores.engineLine') }}
@@ -304,11 +309,19 @@ const engines = [
 .st-view-active {
   @apply text-emerald-700 border-emerald-500;
 }
+/* One rhythm for the whole command list, so nothing depends on a margin someone
+   remembered to add. */
+.st-cmds {
+  @apply space-y-2;
+}
 .st-cmd-label {
-  @apply text-xs font-semibold uppercase tracking-wide text-gray-400 mt-4 mb-1;
+  @apply text-xs font-semibold uppercase tracking-wide text-gray-400 pt-3;
 }
 .st-cmd-label:first-child {
-  @apply mt-0;
+  @apply pt-0;
+}
+.st-links-after {
+  @apply mt-6;
 }
 .st-engine-line {
   @apply text-sm text-gray-500 mb-6 flex flex-wrap items-center gap-x-3 gap-y-1;