etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile layout and touch target improvements for admin settings

Browse Source 
- SettingsTableRow: stack name above controls on mobile, show action
  buttons without hover (max-lg:opacity-100)
- SettingsMobileTabs: increase touch targets to 44px, add scroll spacers
- QuickToggles: increase chip touch targets
- SettingInput: increase display button touch target
- AdminSettings: add bottom padding buffer to mobile layout
This commit is contained in:
Fringg
2026-03-29 03:18:21 +03:00
parent 67055d58f7
commit e004d8103b
5 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/admin/SettingsTableRow.tsx
View File

@@ -67,9 +67,13 @@ export function SettingsTableRow({
className,
)}
>
<div className={cn(isLongValue ? 'space-y-3' : 'flex items-center gap-4')}>
<div
className={cn(
isLongValue ? 'space-y-3' : 'flex flex-col gap-2 lg:flex-row lg:items-center lg:gap-4',
)}
>
{/* Left side: name, badges, key */}
<div className={cn('min-w-0', !isLongValue && 'flex-1')}>
<div className={cn('min-w-0', !isLongValue && 'lg:flex-1')}>
{/* Name + badges row */}
<div className="flex flex-wrap items-center gap-1.5">
<span className="text-[13px] font-medium text-dark-100">{displayName}</span>
@@ -106,7 +110,12 @@ export function SettingsTableRow({
</div>
{/* Right side: control + action buttons */}
<div className={cn('flex items-center gap-2', isLongValue ? 'w-full' : 'flex-shrink-0')}>
<div
className={cn(
'flex items-center gap-2',
isLongValue ? 'w-full' : 'self-end lg:flex-shrink-0',
)}
>
{setting.read_only ? (
<span className="max-w-[240px] truncate rounded bg-dark-700/30 px-3 py-1.5 font-mono text-xs text-dark-400">
{isBool
@@ -133,7 +142,7 @@ export function SettingsTableRow({
<button
onClick={onReset}
disabled={isResetting}
className="flex-shrink-0 rounded-lg p-1.5 text-dark-500 opacity-0 transition-all hover:bg-dark-700 hover:text-dark-200 disabled:opacity-50 group-hover:opacity-100"
className="flex-shrink-0 rounded-lg p-1.5 text-dark-500 opacity-0 transition-all hover:bg-dark-700 hover:text-dark-200 disabled:opacity-50 group-hover:opacity-100 max-lg:opacity-100"
title={t('admin.settings.reset')}
aria-label={t('admin.settings.reset')}
>
@@ -148,7 +157,7 @@ export function SettingsTableRow({
'flex-shrink-0 rounded-lg p-1.5 transition-all',
isFavorite
? 'text-warning-400 hover:bg-warning-500/15'
: 'text-dark-500 opacity-0 hover:bg-dark-700/50 hover:text-warning-400 group-hover:opacity-100',
: 'text-dark-500 opacity-0 hover:bg-dark-700/50 hover:text-warning-400 group-hover:opacity-100 max-lg:opacity-100',
)}
title={
isFavorite