fix: language persistence and mobile responsiveness#1
Merged
Conversation
1. Fix i18n language persistence:
- Remove i18next-browser-languagedetector to eliminate race condition
with zustand's persist middleware (both were writing to localStorage
independently causing conflicts on reload)
- Read initial language directly from zustand's persisted localStorage
key (chat2api-settings) with browser navigator fallback
- Zustand onRehydrateStorage callback still syncs i18n on hydration
2. Fix mobile responsiveness:
- Add MobileSidebar component with slide-in overlay for mobile nav
- Add hamburger menu button in Header (visible only on mobile)
- Hide desktop Sidebar on screens < md breakpoint
- Make Dialog component width responsive (calc(100%-2rem) on mobile)
- Hide less-important table columns (provider, account, usage, date)
on small screens using hidden sm:table-cell / md:table-cell
- Responsive main content padding (p-3 → sm:p-4 → md:p-6)
- Settings tabs: 3-col grid on mobile, 5-col on sm+
- Add mobile CSS: reduce bokeh effects, smaller table cells,
disable tooltips on touch devices
- Responsive header spacing and proxy status display
3. Minor improvements:
- Add nav.menu translation key for mobile sidebar title
- Exclude mobileSidebarOpen from zustand persistence
- ApiKeys card header stacks vertically on mobile
Co-authored-by: zhaiker01 <285887163+zhaiker01@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request was created by @kiro-agent on behalf of @zhaiker01 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro autonomous agent
Summary
Fixes two issues:
1. Language setting not persisting across refresh
Root cause:
i18next-browser-languagedetectorand zustand'spersistmiddleware were both independently writing language preferences to localStorage, creating a race condition on page load. The detector would read its own key (i18nextLng) before zustand rehydrated, often defaulting to English.Fix:
i18next-browser-languagedetectorentirelychat2api-settingsin localStorage)navigator.languagefor first-time usersonRehydrateStoragestill syncs i18n after hydration as a safety net2. Mobile responsiveness
Problem: Sidebar, tables, dialogs, and other components had no responsive design - unusable on mobile.
Fix:
MobileSidebarcomponent (slide-in overlay with backdrop)mdbreakpoint)hidden md:block)w-[calc(100%-2rem)]on mobilehidden sm:table-cell)Files Changed
i18n/index.tsstores/settingsStore.tsmobileSidebarOpenstate,partializeto exclude transient statecomponents/layout/MainLayout.tsxcomponents/layout/MobileSidebar.tsxcomponents/layout/Header.tsxcomponents/ui/dialog.tsxindex.csspages/Settings.tsxpages/ApiKeys.tsxcomponents/logs/RequestLogList.tsxi18n/locales/*.jsonnav.menukeyTesting
tsc --noEmit)