feat(todo): add To-Do list feature with 3-column layout

- New todo_items DB table with priority, due date, description, user assignment
- Full CRUD API with WebSocket real-time sync
- 3-column UI: sidebar filters (All, My Tasks, Overdue, Done, by Priority),
  task list with inline badges, and detail/create pane
- Apple-inspired design with custom dropdowns, date picker, priority system (P1-P3)
- Mobile responsive: icon-only sidebar, bottom-sheet modals for detail/create
- Lists tab with sub-tabs (Packing List + To-Do), persisted selection
- Addon renamed from "Packing List" to "Lists"
- i18n keys for all 13 languages
- UI polish: notification colors use system theme, mobile navbar cleanup,
  settings page responsive buttons

client/src/pages/SettingsPage.tsx

@@ -550,7 +550,7 @@ export default function SettingsPage(): React.ReactElement {
             {/* Dark Mode Toggle */}
             <div>
               <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.colorMode')}</label>
-              <div className="flex gap-3">
+              <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
                 {[
                   { value: 'light', label: t('settings.light'), icon: Sun },
                   { value: 'dark', label: t('settings.dark'), icon: Moon },
@@ -567,8 +567,8 @@ export default function SettingsPage(): React.ReactElement {
                         } catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
                       }}
                       style={{
-                        display: 'flex', alignItems: 'center', gap: 8,
-                        padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                        display: 'flex', alignItems: 'center', gap: 6,
+                        padding: '10px 14px', borderRadius: 10, cursor: 'pointer', flex: '1 1 0', justifyContent: 'center', minWidth: 0,
                         fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
                         border: isActive ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
                         background: isActive ? 'var(--bg-hover)' : 'var(--bg-card)',
@@ -1275,7 +1275,8 @@ export default function SettingsPage(): React.ReactElement {
                 className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
               >
                 {saving.profile ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
-                {t('settings.saveProfile')}
+                <span className="hidden sm:inline">{t('settings.saveProfile')}</span>
+                <span className="sm:hidden">{t('common.save')}</span>
               </button>
               <button
                 onClick={async () => {
@@ -1295,7 +1296,8 @@ export default function SettingsPage(): React.ReactElement {
                 style={{ border: '1px solid #fecaca' }}
               >
                 <Trash2 size={14} />
-                {t('settings.deleteAccount')}
+                <span className="hidden sm:inline">{t('settings.deleteAccount')}</span>
+                <span className="sm:hidden">{t('common.delete')}</span>
               </button>
             </div>
           </Section>