From 49111e9e12337e76b8e10a31b971a7c7feaab501 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sun, 4 Oct 2026 18:22:07 +0700
Subject: [PATCH] Fix the My Data delete dialog layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Select Content to Delete" dialog was broken on mobile:
- Filter pills had no flex-shrink-0, so they squashed and their labels overlapped
  ("All (504Spots (Shops…"). Added shrink-0 + min-h-0 so the row scrolls cleanly.
- The global mobile `button { min-height:44px }` rule inflated the checkboxes
  into giant squares. Added min-h-0/min-w-0 (and an explicit h-4 w-4).
- The per-row delete on Recent Activity was hover-only (invisible on touch);
  it's now always visible on mobile and compact.
---
 src/components/MyDataTab.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/MyDataTab.tsx b/src/components/MyDataTab.tsx
index 77fa2bc..4b85c63 100644
--- a/src/components/MyDataTab.tsx
+++ b/src/components/MyDataTab.tsx
@@ -169,7 +169,8 @@ function EventRow({
         variant="ghost"
         size="sm"
         onClick={() => onDelete(event)}
-        className="opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-300 hover:bg-red-500/10"
+        aria-label={t('settingsUi.myData.requestDeletion')}
+        className="min-h-0 min-w-0 opacity-100 transition-opacity text-red-400 hover:text-red-300 hover:bg-red-500/10 sm:opacity-0 sm:group-hover:opacity-100"
       >
         <Trash2 className="h-4 w-4" />
       </Button>
@@ -336,7 +337,7 @@ function SelectiveDeletionDialog({
                 <button
                   key={String(tab.kind)}
                   onClick={() => setFilterKind(tab.kind)}
-                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
+                  className={`flex shrink-0 min-h-0 items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
                     isActive 
                       ? 'bg-gray-700 text-white' 
                       : 'bg-gray-800/50 text-gray-400 hover:bg-gray-800'
@@ -353,11 +354,11 @@ function SelectiveDeletionDialog({
           {/* Quick actions */}
           <div className="flex items-center justify-between flex-shrink-0">
             <div className="flex gap-2 text-xs">
-              <button onClick={selectAllVisible} className="text-[#ccff00] hover:underline">
+              <button onClick={selectAllVisible} className="min-h-0 text-[#ccff00] hover:underline">
                 {filterKind !== 'all' ? t('settingsUi.myData.selectAllVisible') : t('settingsUi.myData.selectAll')}
               </button>
               <span className="text-gray-600">|</span>
-              <button onClick={selectNone} className="text-gray-400 hover:underline">{t('common.clear')}</button>
+              <button onClick={selectNone} className="min-h-0 text-gray-400 hover:underline">{t('common.clear')}</button>
             </div>
             <span className="text-xs text-gray-500">
               {t('settingsUi.myData.selectedCount', { count: selectedCount })}
@@ -388,7 +389,7 @@ function SelectiveDeletionDialog({
                     <Checkbox
                       checked={isChecked}
                       onCheckedChange={() => toggleEvent(event.id)}
-                      className="border-gray-600 data-[state=checked]:bg-red-500 data-[state=checked]:border-red-500 flex-shrink-0"
+                      className="h-4 w-4 min-h-0 min-w-0 border-gray-600 data-[state=checked]:bg-red-500 data-[state=checked]:border-red-500 flex-shrink-0"
                     />
                     <div className={`p-1.5 rounded ${config.color} bg-gray-800 flex-shrink-0`}>
                       <Icon className="h-3.5 w-3.5" />