mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
📱 style: Settings UI Enhancements for Mobile (#1721)
* Fix the interface for the mobile version. * Make uniform margins for buttons.
This commit is contained in:
parent
d25ff7632a
commit
e7f6b22b5d
2 changed files with 12 additions and 9 deletions
|
|
@ -8,7 +8,7 @@ import { useMediaQuery, useLocalize } from '~/hooks';
|
|||
import { cn } from '~/utils';
|
||||
|
||||
export default function Settings({ open, onOpenChange }: TDialogProps) {
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
const isSmallScreen = useMediaQuery('(max-width: 767px)');
|
||||
const localize = useLocalize();
|
||||
|
||||
return (
|
||||
|
|
@ -47,9 +47,9 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
|
|||
>
|
||||
<Tabs.Trigger
|
||||
className={cn(
|
||||
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
isSmallScreen
|
||||
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
: 'bg-white radix-state-active:bg-gray-100',
|
||||
isSmallScreen
|
||||
? ''
|
||||
|
|
@ -62,9 +62,9 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
|
|||
</Tabs.Trigger>
|
||||
<Tabs.Trigger
|
||||
className={cn(
|
||||
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
isSmallScreen
|
||||
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
: 'bg-white radix-state-active:bg-gray-100',
|
||||
isSmallScreen
|
||||
? ''
|
||||
|
|
@ -77,9 +77,9 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
|
|||
</Tabs.Trigger>
|
||||
<Tabs.Trigger
|
||||
className={cn(
|
||||
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
isSmallScreen
|
||||
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
: 'bg-white radix-state-active:bg-gray-100',
|
||||
isSmallScreen
|
||||
? ''
|
||||
|
|
@ -92,9 +92,9 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
|
|||
</Tabs.Trigger>
|
||||
<Tabs.Trigger
|
||||
className={cn(
|
||||
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
|
||||
isSmallScreen
|
||||
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
|
||||
: 'bg-white radix-state-active:bg-gray-100',
|
||||
isSmallScreen
|
||||
? ''
|
||||
|
|
|
|||
|
|
@ -268,6 +268,7 @@ export default {
|
|||
com_nav_welcome_message: 'Чем я могу помочь вам сегодня?',
|
||||
com_nav_auto_scroll: 'Автоматически проматывать к самым новым сообщениям при открытии',
|
||||
com_nav_modular_chat: 'Разрешить менять точки подключения в середине разговора',
|
||||
com_nav_latex_parsing: 'Обработка LaTeX в сообщениях (может повлиять на производительность)',
|
||||
com_nav_plugin_store: 'Магазин плагинов',
|
||||
com_nav_plugin_search: 'Поиск плагинов',
|
||||
com_nav_plugin_auth_error:
|
||||
|
|
@ -286,6 +287,7 @@ export default {
|
|||
com_nav_theme_system: 'Системная',
|
||||
com_nav_theme_dark: 'Темная',
|
||||
com_nav_theme_light: 'Светлая',
|
||||
com_nav_user_name_display: 'Отображать имя пользователя в сообщениях',
|
||||
com_nav_language: 'Локализация',
|
||||
com_nav_setting_account: 'Аккаунт',
|
||||
com_nav_profile_picture: 'Изображение профиля',
|
||||
|
|
@ -306,5 +308,6 @@ export default {
|
|||
com_nav_settings: 'Настройки',
|
||||
com_nav_search_placeholder: 'Поиск сообщений',
|
||||
com_nav_setting_general: 'Общие',
|
||||
com_nav_setting_beta: 'Бета-функции',
|
||||
com_nav_setting_data: 'Управление данными',
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue