Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-02 00:28:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

style: mobile optimizations, use fixed dialogs, and prevent auto-scroll for presets (#534)

Browse source 
* style(client): adjust height and add overflow to EditPresetDialog, AgentSettings, and Settings components
style(client): adjust size and add overflow to NewConversationMenu and PresetItems components
style(ui): add overflow to DialogContent component

* style(Settings.jsx): change height of settings component to md:h-[350px] h-[490px]
This commit is contained in:
Danny Avila 2023-06-18 11:24:22 -04:00 • committed by GitHub
parent 4f47da8f0d
commit ac537b96f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 14 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Input/NewConversationMenu/PresetItem.jsx
View file

@ -50,8 +50,8 @@ export default function PresetItem({ preset = {}, value, onChangePreset, onDelet
className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
>
{icon}
{preset?.title}
<small className="ml-2">({getPresetTitle()})</small>
<small className="text-[11px]">{preset?.title}</small>
<small className="ml-2 text-[10px]">({getPresetTitle()})</small>
<div className="flex w-4 flex-1" />
<button
className="invisible m-0 mr-1 rounded-md p-2 text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200 "

2
client/src/components/Input/NewConversationMenu/PresetItems.jsx
View file

@ -6,7 +6,7 @@ export default function PresetItems({ presets, onSelect, onChangePreset, onDelet
<>
{presets.map((preset) => (
<PresetItem
key={preset?.presetId}
key={preset?.presetId ?? Math.random()}
value={preset}
onSelect={onSelect}
onChangePreset={onChangePreset}

4
client/src/components/Input/NewConversationMenu/index.jsx
View file

@ -153,7 +153,7 @@ export default function NewConversationMenu() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="min-w-[300px] dark:bg-gray-900 z-[100]"
className="w-96 dark:bg-gray-900 z-[100]"
onCloseAutoFocus={(event) => event.preventDefault()}
>
<DropdownMenuLabel
@ -217,7 +217,7 @@ export default function NewConversationMenu() {
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
onValueChange={onSelectPreset}
className={cn('overflow-y-auto', showEndpoints ? 'max-h-[180px]' : 'max-h-[315px]')}
className={cn('overflow-y-auto overflow-x-hidden', showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]')}
>
{showPresets &&
(presets.length ? (