From b12e8916824273eefb85f0bb498d4991e8c66d5e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 10:50:14 +0000
Subject: [PATCH] fix(ui): improve devices page table layout to prevent
 horizontal scrolling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Widen page container from max-w-4xl (896px) to max-w-6xl (1152px)
- Convert action buttons (Revoke/Reactivate/Delete) to icon-only (44×44px)
  with aria-label and title tooltip for accessibility
- Reduce table cell padding from px-6 py-4 to px-4 py-3

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 frontend/templates/devices.html | 115 ++++++++++++++++----------------
 1 file changed, 57 insertions(+), 58 deletions(-)

diff --git a/frontend/templates/devices.html b/frontend/templates/devices.html
index 498fd486..b640d950 100644
--- a/frontend/templates/devices.html
+++ b/frontend/templates/devices.html
@@ -3,7 +3,7 @@
 {% block title %}{{ _("devices.page_title") }}{% endblock %}
 
 {% block content %}
-<div x-data="devicesPage()" x-init="init()" class="container mx-auto px-4 py-8 max-w-4xl">
+<div x-data="devicesPage()" x-init="init()" class="container mx-auto px-4 py-8 max-w-6xl">
 
   <!-- ── Header ─────────────────────────────────────────────────────────── -->
   <header class="mb-8">
@@ -48,86 +48,85 @@
         <table class="w-full text-sm" aria-label="{{ _('devices.mobile_tokens_heading') }}">
           <thead>
             <tr class="bg-gray-50 dark:bg-gray-750 text-left">
-              <th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_device") }}</th>
-              <th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_token_prefix") }}</th>
-              <th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_created") }}</th>
-              <th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_last_used") }}</th>
-              <th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_status") }}</th>
-              <th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider sr-only">{{ _("common.actions") }}</th>
+              <th scope="col" class="px-4 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_device") }}</th>
+              <th scope="col" class="px-4 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_token_prefix") }}</th>
+              <th scope="col" class="px-4 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_created") }}</th>
+              <th scope="col" class="px-4 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_last_used") }}</th>
+              <th scope="col" class="px-4 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("devices.col_status") }}</th>
+              <th scope="col" class="px-4 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider sr-only">{{ _("common.actions") }}</th>
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
             <template x-for="token in mobileTokens" :key="token.id">
               <tr class="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
-                <td class="px-6 py-4 whitespace-nowrap">
+                <td class="px-4 py-3 whitespace-nowrap">
                   <div class="flex items-center gap-2">
                     <i class="fas fa-mobile-alt text-gray-400" aria-hidden="true"></i>
                     <span class="font-medium text-gray-900 dark:text-white" x-text="formatDeviceName(token.name)"></span>
                   </div>
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap">
+                <td class="px-4 py-3 whitespace-nowrap">
                   <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs font-mono" x-text="token.token_prefix + '…'"></code>
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap text-gray-500 dark:text-gray-400" x-text="formatDate(token.created_at)"></td>
-                <td class="px-6 py-4 whitespace-nowrap text-gray-500 dark:text-gray-400">
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(token.created_at)"></td>
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                   <span x-text="token.last_used_at ? formatDate(token.last_used_at) : '—'"></span>
                   <span x-show="token.last_used_ip" class="block text-xs text-gray-400 mt-0.5">
                     <i class="fas fa-globe mr-1" aria-hidden="true"></i><span x-text="token.last_used_ip"></span>
                   </span>
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap">
+                <td class="px-4 py-3 whitespace-nowrap">
                   <span
                     class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                     :class="token.is_active ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'"
                     x-text="token.is_active ? '{{ _('devices.status_active') }}' : '{{ _('devices.status_revoked') }}'"
                   ></span>
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap text-right">
-                  <!-- Revoke button – shown for active tokens -->
-                  <button
-                    x-show="token.is_active"
-                    type="button"
-                    @click="revokeToken(token)"
-                    :disabled="actingToken === token.id"
-                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-800
-                           dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md
-                           focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 transition-colors"
-                    style="min-height:36px; min-width:44px;"
-                    :aria-label="'{{ _('devices.revoke_token') }} ' + token.name"
-                  >
-                    <i :class="actingToken === token.id ? 'fas fa-spinner fa-spin' : 'fas fa-sign-out-alt'" class="mr-1" aria-hidden="true"></i>
-                    {{ _("devices.revoke_token") }}
-                  </button>
-                  <!-- Reactivate button – shown for revoked tokens -->
-                  <button
-                    x-show="!token.is_active"
-                    type="button"
-                    @click="reactivateMobileToken(token)"
-                    :disabled="actingToken === token.id"
-                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-green-600 hover:text-green-800
-                           dark:text-green-400 dark:hover:text-green-300 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-md
-                           focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50 transition-colors mr-1"
-                    style="min-height:36px; min-width:44px;"
-                    :aria-label="'{{ _('devices.reactivate_token') }} ' + token.name"
-                  >
-                    <i :class="actingToken === token.id ? 'fas fa-spinner fa-spin' : 'fas fa-redo'" class="mr-1" aria-hidden="true"></i>
-                    {{ _("devices.reactivate_token") }}
-                  </button>
-                  <!-- Delete button – shown for revoked tokens -->
-                  <button
-                    x-show="!token.is_active"
-                    type="button"
-                    @click="deleteMobileToken(token)"
-                    :disabled="actingToken === token.id"
-                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-800
-                           dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md
-                           focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 transition-colors"
-                    style="min-height:36px; min-width:44px;"
-                    :aria-label="'{{ _('devices.delete_token') }} ' + token.name"
-                  >
-                    <i :class="actingToken === token.id ? 'fas fa-spinner fa-spin' : 'fas fa-trash-alt'" class="mr-1" aria-hidden="true"></i>
-                    {{ _("devices.delete_token") }}
-                  </button>
+                <td class="px-4 py-3 whitespace-nowrap text-right">
+                  <div class="inline-flex items-center gap-1">
+                    <!-- Revoke button – shown for active tokens -->
+                    <button
+                      x-show="token.is_active"
+                      type="button"
+                      @click="revokeToken(token)"
+                      :disabled="actingToken === token.id"
+                      :title="'{{ _('devices.revoke_token') }}'"
+                      class="inline-flex items-center justify-center w-11 h-11 text-sm text-red-600 hover:text-red-800
+                             dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md
+                             focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 transition-colors"
+                      :aria-label="'{{ _('devices.revoke_token') }} ' + token.name"
+                    >
+                      <i :class="actingToken === token.id ? 'fas fa-spinner fa-spin' : 'fas fa-sign-out-alt'" aria-hidden="true"></i>
+                    </button>
+                    <!-- Reactivate button – shown for revoked tokens -->
+                    <button
+                      x-show="!token.is_active"
+                      type="button"
+                      @click="reactivateMobileToken(token)"
+                      :disabled="actingToken === token.id"
+                      :title="'{{ _('devices.reactivate_token') }}'"
+                      class="inline-flex items-center justify-center w-11 h-11 text-sm text-green-600 hover:text-green-800
+                             dark:text-green-400 dark:hover:text-green-300 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-md
+                             focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50 transition-colors"
+                      :aria-label="'{{ _('devices.reactivate_token') }} ' + token.name"
+                    >
+                      <i :class="actingToken === token.id ? 'fas fa-spinner fa-spin' : 'fas fa-redo'" aria-hidden="true"></i>
+                    </button>
+                    <!-- Delete button – shown for revoked tokens -->
+                    <button
+                      x-show="!token.is_active"
+                      type="button"
+                      @click="deleteMobileToken(token)"
+                      :disabled="actingToken === token.id"
+                      :title="'{{ _('devices.delete_token') }}'"
+                      class="inline-flex items-center justify-center w-11 h-11 text-sm text-red-600 hover:text-red-800
+                             dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md
+                             focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 transition-colors"
+                      :aria-label="'{{ _('devices.delete_token') }} ' + token.name"
+                    >
+                      <i :class="actingToken === token.id ? 'fas fa-spinner fa-spin' : 'fas fa-trash-alt'" aria-hidden="true"></i>
+                    </button>
+                  </div>
                 </td>
               </tr>
             </template>