From 1ee1b56f706ef95e22fc59664d33112634564d9b Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Thu, 16 Jul 2026 23:15:44 -0400
Subject: [PATCH] fix(ui): desktop Tor rows get their inline actions back +
 card actions bottom-align across grid cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The card-action sweep put the mobile 50/50 Delete|Rotate row under every
Tor service on desktop too — desktop reverts to the original compact
inline Rotate / trash / toggle beside each row, while mobile keeps the
thumb-safe stacked layout. The VPN and Network Interfaces cards' bottom
buttons now pin to the card bottom (mt-auto) so they stay vertically
aligned when the grid stretches one card taller than the other.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/views/Server.vue                 | 25 ++++++++------
 neode-ui/src/views/server/TorServicesCard.vue | 33 ++++++++++++++++---
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/neode-ui/src/views/Server.vue b/neode-ui/src/views/Server.vue
index a73c48dd..ae4dcab6 100644
--- a/neode-ui/src/views/Server.vue
+++ b/neode-ui/src/views/Server.vue
@@ -207,9 +207,13 @@
         <div v-else class="text-xs text-white/30 py-2">No devices added yet</div>
       </div>
 
-      <button @click="showAddDeviceModal = true; showingNewDevice = true" class="responsive-card-actions-bottom mt-4 mobile-card-action glass-button rounded-lg text-sm font-medium">
-        Add Device
-      </button>
+      <!-- mt-auto pins the action to the card bottom so buttons align across
+           equal-height grid cards -->
+      <div class="responsive-card-actions-bottom mt-auto pt-4">
+        <button @click="showAddDeviceModal = true; showingNewDevice = true" class="mobile-card-action glass-button rounded-lg text-sm font-medium">
+          Add Device
+        </button>
+      </div>
     </div>
 
     <!-- Network Interfaces (second column on desktop) -->
@@ -273,13 +277,14 @@
         </div>
       </template>
 
-      <button
-        v-if="wifiAvailable"
-        @click="showWifiModal = true"
-        class="responsive-card-actions-bottom mt-4 mobile-card-action glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors"
-      >
-        Scan WiFi
-      </button>
+      <div v-if="wifiAvailable" class="responsive-card-actions-bottom mt-auto pt-4">
+        <button
+          @click="showWifiModal = true"
+          class="mobile-card-action glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors"
+        >
+          Scan WiFi
+        </button>
+      </div>
     </div>
 
     </div><!-- close VPN+Network 2-col grid -->
diff --git a/neode-ui/src/views/server/TorServicesCard.vue b/neode-ui/src/views/server/TorServicesCard.vue
index 05350ab9..4970d7d8 100644
--- a/neode-ui/src/views/server/TorServicesCard.vue
+++ b/neode-ui/src/views/server/TorServicesCard.vue
@@ -44,13 +44,36 @@
             <p v-else-if="svc.enabled" class="text-white/30 text-xs">Waiting for .onion address...</p>
             <p v-else class="text-white/30 text-xs">Disabled</p>
           </div>
-          <ToggleSwitch class="shrink-0" :model-value="svc.enabled" @update:model-value="$emit('toggleApp', svc.name, $event)" />
+          <!-- Desktop: compact inline actions next to the toggle -->
+          <div class="hidden md:flex items-center gap-2 shrink-0">
+            <button
+              v-if="svc.onion_address && svc.enabled"
+              @click="$emit('rotateService', svc.name)"
+              :disabled="torRotating === svc.name"
+              class="glass-button px-3 py-1.5 rounded-lg text-xs"
+            >
+              {{ torRotating === svc.name ? 'Rotating...' : 'Rotate' }}
+            </button>
+            <button
+              v-if="svc.name !== 'archipelago'"
+              @click="$emit('deleteService', svc.name)"
+              :disabled="torDeleting === svc.name"
+              class="glass-button px-2 py-1.5 rounded-lg text-xs text-red-400 hover:text-red-300"
+              :title="'Delete ' + svc.name + ' hidden service'"
+            >
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+            <ToggleSwitch :model-value="svc.enabled" @update:model-value="$emit('toggleApp', svc.name, $event)" />
+          </div>
+          <ToggleSwitch class="shrink-0 md:hidden" :model-value="svc.enabled" @update:model-value="$emit('toggleApp', svc.name, $event)" />
         </div>
-        <!-- Actions in their own 50/50 row: Delete on the LEFT, far from the
-             toggle above, so a rushed thumb can't hit the wrong control. -->
+        <!-- Mobile: actions in their own 50/50 row — Delete on the LEFT, far
+             from the toggle above, so a rushed thumb can't hit the wrong control. -->
         <div
           v-if="svc.name !== 'archipelago' || (svc.onion_address && svc.enabled)"
-          class="grid grid-cols-2 gap-2 mt-3"
+          class="grid md:hidden grid-cols-2 gap-2 mt-3"
         >
           <button
             v-if="svc.name !== 'archipelago'"
@@ -74,7 +97,7 @@
         </div>
       </div>
     </div>
-    <div class="responsive-card-actions-bottom-grid mt-4 grid-cols-2 gap-3">
+    <div class="responsive-card-actions-bottom-grid mt-auto pt-4 grid-cols-2 gap-3">
       <button @click="$emit('restartTor')" :disabled="torRestarting" class="mobile-card-action glass-button rounded-lg text-sm font-medium disabled:opacity-50">
         {{ torRestarting ? 'Restarting...' : 'Restart Tor' }}
       </button>