skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

Fix the My Data delete dialog layout

Browse source 
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.
This commit is contained in:
SkateSpots 2026-10-04 18:22:07 +07:00
parent b91224699a
commit 49111e9e12
1 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/MyDataTab.tsx
View file

@ -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" />